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

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.对一般Ogg支持的测试不太可能有用.