HTML5 音频播放器。无法更改 src 元素
Posted
技术标签:
【中文标题】HTML5 音频播放器。无法更改 src 元素【英文标题】：HTML5 audio player. Cannot change the src element 【发布时间】：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 的答案。 你可以在这里找到一个很好的解决方案：***.com/a/9512994/358331 【参考方案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 >_以上是关于HTML5 音频播放器。无法更改 src 元素的主要内容，如果未能解决你的问题，请参考以下文章
在 html5 音频元素到达播放结束前 5 秒执行 Javascript 代码