Question

我正在尝试动态更改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);

有人知道我在这做什么傻事吗？

干杯

Answer 1

代码看起来不错，也许就像@Nick Dugger说你还没准备好改变DOM元素

在文档“准备就绪”之前，无法安全地操作页面。 jQuery为您检测这种准备状态。代码包含在里面 $（document）.ready（）只会运行一次页面Document Object Model（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>标记的末尾

Answer 2

尝试一些简单的JavaScript：

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

这对我有用。 HTML5音频仍然不稳定，并没有在所有主流浏览器中实现相同。如果你想让它在移动设备上玩，那就更难了。不过，你的代码对我来说很好。希望这有帮助！

Answer 3

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

示例（假设id＆＃34; audio＆＃34;设置音频元素）：

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

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

3 个答案: