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

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之外的其他编解码器 （例如， Opus格式 ）。 您可以像这样测试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的'audio/ogg; codecs="vorbis"' 。 对一般Ogg支持的测试不太可能有用。

Answer 2

对于Firefox，IE，Safari和Opera，使用webm进行Chrome，Firefox和Opera + wav。

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

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

注2：代码需要jQuery。

Answer 3

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