javascript - 跨浏览器兼容音频有哪些选项？

Question

我正在使用这个函数:

function playSound(file) {

MyAudio = new Audio(file);
MyAudio.play();

}

不幸的是，我正在努力寻找一种适用于所有浏览器的文件类型。 Mp3 在 Chrome、Safari、IE 中有效，但在 FF 和 Opera 中无效，而 .ogg 文件似乎只在 FF 中有效。

关于解决此问题的任何建议？我想没有办法以编程方式检测正在使用哪个浏览器然后播放适当的文件类型？任何建议/想法表示赞赏。谢谢。

Answer 1

令人沮丧的是，没有普遍适用的类型。 WAV 最接近，但它相当大并且在 IE9 中不受支持。您需要有多种可用类型并选择浏览器可以播放的类型。

为此，请使用功能检测，而不是浏览器检测。每个浏览器支持的媒体类型会随着时间的推移而改变，因此假设 Firefox 不能播放 MP3 的代码可能会在几年后过时，当 Mozilla 采用它时(专利到期后)。使用 canPlayType , 指示是否支持给定格式:

var audio = new Audio();
if(audio.canPlayType("audio/mpeg") == "probably") {
    playSound("myMedia.mp3");
} else if(audio.canPlayType("audio/webm") == "probably") {
    playSound("myMedia.webm");
}
// do checks for other types...

此外，如果您将音频标签编写为 HTML，您可以使用多个 <source>标签，浏览器将播放它能播放的第一个:

<audio controls="controls">
    <source src="mymedia.ogg" type="audio/ogg" />
    <source src="mymedia.mp3" type="audio/mpeg" />
    Update your browser! This sentence is fallback content for browsers that do not support the audio element at all.
</audio>

如果您想测试 Ogg 音频支持，您可能想专门测试 Ogg Vorbis。 Ogg 是一种“容器”格式，可以 hypothetically use other codecs除了 Vorbis 和 Theora(例如 Opus format )。您可以像这样测试 Ogg Vorbis:

audio.canPlayType('audio/ogg; codecs="vorbis"') == "probably";

请注意 canPlayType具有三个可能的返回值:

• “可能” - 媒体类型几乎肯定可以播放
• “可能” - 媒体类型可能可以播放。这是当您在浏览器中询问一般 Ogg 支持时返回的内容，该浏览器具有对特定编解码器(即 Vorbis 和 Theora)的 Ogg 支持。 Ogg 文件可能使用浏览器不支持的编解码器，因此如果您不指定编解码器，浏览器只能猜测它可能能够播放它。
• "" (空字符串) - 媒体类型肯定无法播放

如果您真的想测试 ogg 支持，那么您可以测试非空字符串而不是测试“可能”(即测试“可能”或“可能” "), 像这样:

// test for *any* Ogg codecs
if(audio.canPlayType("audio/ogg") != "") {  
    playSound("myMedia.ogg");
}

您应该测试您的媒体文件使用的任何特定编解码器，例如 'audio/ogg; codecs="vorbis"'对于 Vorbis。测试一般的 Ogg 支持不太可能有用。