JavaScript 中的 HTML5 音频：我做错了啥？

Posted 2023-02-25

【中文标题】JavaScript 中的 HTML5 音频：我做错了啥？

【英文标题】：HTML5 Audio in JavaScript: What am I doing wrong?JavaScript 中的 HTML5 音频：我做错了什么？

【发布时间】：2011-06-05 06:36:33

【问题描述】：

我正在尝试在 javascript 中创建一个 html 5 音频标签。我无法让它工作和预加载：

var audioElement = document.createElement('audio');

var source1 = document.createElement('source');
source1.type= 'audio/ogg';
source1.src= 'assets/audio/ost.ogg';
source1.setAttribute("preload","auto");
audioElement.appendChild(source1);

var source2 = document.createElement('source');
source2.type= 'audio/mpeg';
source2.src= 'assets/audio/ost.mp3';
source2.setAttribute("preload","auto");
audioElement.appendChild(source2);

audioElement.preload = auto;
audioElement.load();

有什么想法吗？

谢谢。

编辑：

这就是我最终为任何想知道的人所做的事情。适用于 FF3.6、ff4、safari 5、ie9、chrome 11、opera 11.11 (pc)

var audioElement = document.createElement('audio');
audioElement.setAttribute("preload", "auto");
audioElement.autobuffer = true;

var source1 = document.createElement('source');
source1.type= 'audio/ogg';
source1.src= 'assets/audio/ost.ogg';
audioElement.appendChild(source1);

var source2 = document.createElement('source');
source2.type= 'audio/mpeg';
source2.src= 'assets/audio/ost.mp3';
audioElement.appendChild(source2);

然后：

audioElement.load();

感谢您的帮助，凯文。

【参考方案1】：

<source> 元素不能具有 preload 属性，并且您忘记在音频对象的 preload 属性周围加上引号。

因此，从您的 sourceX 对象中删除 setAttribute('preload', 'auto') 并在 preload 属性周围加上引号，如下所示：

audioElement.preload = 'auto';

MDC Audio element MDC Source element

【讨论】：

@Yahreen 我不确定 3.6 是否支持预加载。