注入 src URL 后 HTML5 音频不播放

Posted 2023-02-25

【中文标题】注入 src URL 后 HTML5 音频不播放

【英文标题】：HTML5 Audio not playing after src URL injected in

【发布时间】：2016-06-28 20:52:49

【问题描述】：

我在页面加载时有这样的事情：

echo "<td class='audio'><audio controls><source src></audio></td>";

然后，我基于点击进行 ajax 调用，以从我正在使用的 API 中提取相对音频 URL，以用作 src。

在单独的选项卡中访问其中一个音频 URL 时，音频确实实际上会播放。我的想法是它没有在我需要的地方播放，因为它在需要它之前不会获得源（由于相当大的 API 调用，使用 ajax 来减少加载时间）。

有什么想法吗？

【问题讨论】：

您能详细说明您的问题吗？ jsfiddle.net/4ubfnjts

@DaniP 我从 API 中获取了一组音频 URL，对于这些 URL 中的每一个，都会生成一个 html5 音频对象，但是在用户单击该区域之前，源一直是空白的相对于我拥有的所有这些信息的手风琴。我设置了一个循环来将 URL 设置为这些音频对象中的每一个的 src。即使在检查和测试 URL 后，一切都很好。

【参考方案1】：

您的source 标签缺少文件类型信息。即使是src 被src="your_path/your_file.mp3" 替换，它还需要例如type="audio/mpeg" 用于mp3 文件。完整生成的 HTML 代码必须类似于

<audio controls>
  <source src="your_path/your_file.mp3" type="audio/mpeg">
</audio> 

【讨论】：

真的认为这将是解决方案，但仍然行不通！我现在尝试了很多不同的东西，这看起来很简单。

如果您查看生成的页面/音频 div（在浏览器开发者工具中），确切的源代码是什么？

【参考方案2】：

这是我的工作，或者您可以删除<source src=""> 标签并在<audio> 标签内添加src=""

https://shty.ml?j2n7MxkhKm 输入此链接后，点击Preview 按钮