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是一种“容器”格式，除了Vorbis和Theora之外还可以hypothetically use other codecs（例如，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支持可能不太有用。

Answer 2

为Firefox，IE，Safari和Opera使用适用于Chrome，Firefox和Opera + wav的webm。

HTML：

<audio id="audio"></audio>

JS：

var src = "myvideoname";
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

if (is_chrome) {
   $("#audio").attr('src', 'audio/' + src + '.webm')
}
else {
   $("#audio").attr('src', 'audio/' + src + '.wav')
}

解释：
Javascript找出用户浏览器，如果是Chrome，则会webm提供，如果不是，则使用wav

注意：使用此代码，您只需要在webm文件夹中同名的wav和audio音频。

注2：代码需要jQuery。

Answer 3

好的，请看这里：jQuery Buzz extension。从未使用它，但听说它应该工作正常。它能够检查您的浏览器是否支持某种格式，非常简洁的功能。

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

3 个答案: