HTML5 音频播放器。无法更改 src 元素答案

【问题标题】：HTML5 audio player. Cannot change the src elementHTML5 音频播放器。无法更改 src 元素
【发布时间】：2015-02-13 21:32:51
【问题描述】：

我正在尝试动态更改我的 HTML 音频播放器的 src 的值，但由于某种原因我无法更改它并且它停留在它的占位符值上。这是我的 HTML 元素：

    <audio controls preload="none" style="width:480px;">
    <source id="mp3" src="placeholder" type="audio/mp3" />
    </audio>

这是我的 Javascript：

var tempMp3 = "http://www.someurl.org/somefile.mp3";
$("#mp3").attr("src", tempMp3);

有人知道我在这里犯了什么愚蠢的错误吗？

干杯

【问题讨论】：

您可能正在尝试在加载 DOM 之前修改元素。你能在 HTML 中显示你将 javascript 放在哪里吗？
我把它放在正文中，在 HTML 之前
那是你的问题。有关详细信息，请参阅@Ethaan 的答案。
你可以在这里找到一个很好的解决方案：stackoverflow.com/a/9512994/358331

标签： javascript jquery html audio

【解决方案1】：

代码看起来没问题，可能就像@Nick Dugger 说你在尝试更改 DOM 元素时还没有准备好

在文档“准备就绪”之前，无法安全地操作页面。 jQuery 会为您检测到这种准备状态。内含代码 $( document ).ready() 只会运行一次页面 Document Object 模型 (DOM) 已准备好执行 JavaScript 代码。包含代码 $( window ).load(function() { ... }) 内部将运行一次页面（图像或 iframe），而不仅仅是 DOM，已准备就绪。

第一选择

尝试将代码放入$(document).ready()

$( document ).ready(function() {
    var tempMp3 = "http://www.someurl.org/somefile.mp3";
    $("#mp3").attr("src", tempMp3);
});

第二个选项

另一种选择是将<script> 标签放在<body> 标签的末尾

【讨论】：

虽然可能是解决方案，但$( document ).ready 经常被滥用。另外，你能向 OP 解释 为什么 他需要这个吗？
郑重声明，我不容忍使用$( document ).ready，并建议在正文末尾触发javascript。
这个成功了，但我还有另一个问题是由于未能在两个函数之间移动这个 tempMp3 字符串。感谢您的帮助！
嗨@PavelZagalsky 如果您还有其他不同的问题，请您再提出一个 SO 问题并投票赞成这个问题吗？因为这里的问题已经解决了
我确实会这样做。非常感谢@Ethaan 和所有帮助过的人

【解决方案2】：

尝试一下纯 JavaScript：

var audio=document.getElementById("my_audio_element");
audio.src="source.mp3";
audio.play();

这对我有用。 HTML5 音频仍然有点不稳定，并且在所有主要浏览器中的实现方式都不相同。如果你想让它在手机上玩，那就更棘手了。不过，您的代码对我来说看起来不错。希望这会有所帮助！

【讨论】：

如果您运行此代码，它将起作用。 Downvoter，解释你的downvote！

【解决方案3】：

更改源后，请务必在音频元素上运行.load() 函数以加载更改。

示例（假设 id "audio" 设置为音频元素）：

var tempMp3 = "http://www.someurl.org/somefile.mp3";
$("#mp3").attr("src", tempMp3);
$("#audio").load();
$("#audio").play();

【讨论】：

像这样：$("#mp3").attr("src", tempMp3).load();?
哎哟 -2 >_