Question

我通过javascript添加音频源：

<audio id="audiotest" preload="none" controls volume=".2">
  <source type="audio/ogg">
  <source type="audio/mpeg">
</audio>

<script>
var audioTag = document.createElement('audio');
var canPlayAudio = (audioTag.play)? true : false;
if(canPlayAudio) {
    var oggSource = document.getElementById("audiotest").children[0];
    var mp3Source = document.getElementById("audiotest").children[1];
    oggSource.src="test.ogg";
    mp3Source.src="test.mp3";
}
</script>

如果有外部样式表，则Chrome和Firefox会失败。 Firefox没有src属性。如果我删除它然后它工作。

我绝对不明白为什么。

工作测试用例：失败（使用外部样式表）：http://www.joshblackburn.com/test1.html Works（无样式表）：http://www.joshblackburn.com/test2.html

这到底是怎么回事？

Answer 1

这是一个奇怪的。我不确定为什么样式表会导致问题，但在test1.html中，您可以通过在脚本末尾添加以下行来解决问题：

document.getElementById("audiotest").load()

更好的方法可能是从HTML中一起排除audiotest元素，只需使用javascript添加它：

var audio = new Audio();
audio.id = 'audiotest';
audio.src = audio.canPlayType('audio/mpeg') ? 'test.mp3' : 'test.ogg';
audio.volume = 0.2;
audio.preload = 'none';
audio.controls = true;
document.body.appendChild(audio);

仅当存在外部样式表时，通过javascript添加HTML5音频源才起作用

1 个答案: