javascript - 音频元素的javascript等价物是什么

Question

假设以下音频元素

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
</audio>

现在我想对 javascript 做同样的事情

var audio new Audio( 'horse.mp3' ) ;

所以问题是我如何还可以提供“ogg”，以便“音频”对象可以确定它可以播放哪个？

Answer 1

等效于 JS 中的任何标签createElement和setAttribute.

var audio = document.createElement('audio');
audio.setAttribute('controls', 'controls');

var ogg = document.createElement('source');
ogg.setAttribute('src', 'horse.ogg');
ogg.setAttribute('type', 'audio/ogg');

var mp3 = document.createElement('source');
mp3.setAttribute('src', 'horse.mp3');
mp3.setAttribute('type', 'audio/mp3');

audio.appendChild(ogg);
audio.appendChild(mp3);

Answer 2

使用 audio|video.canPlayType(type)

例子 ：

var canPlayMpeg = audio.canPlayType("audio/mpeg");

您还可以使用诸如buzz.js http://buzz.jaysalvat.com之类的库

Answer 3

Javascript 类不支持回退，因此您有两种选择：

1. 检查客户端是否可以播放某种编解码器并创建 Audio依赖支持。
2. 创建 DOM 元素并将它们注入页面。

检查是否支持编码；

var audio = new Audio();
if (audio.canPlayType("audio/ogg; codecs=vorbis")) {
    audio = new Audio("file.ogg");
} else ...

DOM注入；

var el = document.createElement('audio');
el.innerHTML = '<source src="file.ogg" type="audio/ogg" /><source src="file.mp3" type="audio/mp3" />';
document.body.appendChild(el);