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

Question

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

6

我正在使用这个函数：

function playSound(file) {

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

}

很不幸，我无法找到一种文件类型可以在所有浏览器中都能使用。Mp3可以在Chrome、Safari和IE中使用，但无法在FF和Opera中使用，而.ogg文件似乎只能在FF中使用。

有什么方法可以绕过这个问题吗？我猜测没有一种编程方式可以检测使用的浏览器，然后播放适当的文件类型？任何建议/想法都将不胜感激。谢谢。

- Matt Herbstritt

wav。由于它主要是原始PCM加上非常简单的头文件，我还没有看到任何平台无法默认播放它，尽管我可能错了。 - user529758

使用WebM格式适用于Chrome、Firefox和Opera浏览器，同时使用WAV格式适用于Firefox、IE、Safari和Opera浏览器。 - Vukašin Manojlović

使用特性检测，而非浏览器检测！每个浏览器支持的类型会随时间变化；请使用 canPlayType：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/canPlayType - apsillers

1

@apsillers 1. 谁关心IE？2. 微软失败，这是他们自己的格式。 - user529758

可能是使用JavaScript播放mp3文件的重复问题。 - Phil

显示剩余3条评论

3个回答

1

在Chrome、Firefox和Opera中使用webm格式 + 在Firefox、IE、Safari和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支持。

- Vukašin Manojlović

0

嗯，看这里：jQuery Buzz 扩展。我从未使用过它，但听说它应该能很好地工作。它可以检查您的浏览器是否支持某些格式，真的很棒。

- OzrenTkalcecKrznaric

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- apsillers · Accepted Answer

很遗憾，没有一种通用的可播放类型。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 有三种可能的返回值：

"probably" - 媒体类型几乎可以播放
"maybe" - 媒体类型可能可以播放。当您询问浏览器是否支持Ogg时，如果浏览器支持特定的编解码器（即Vorbis和Theora），将返回此结果。 Ogg文件可能使用浏览器不支持的编解码器，因此如果您没有指定编解码器，则浏览器只能猜测它可能能够播放。
"" （空字符串） - 媒体类型肯定无法播放

如果您真的想测试ogg支持，那么可以测试非空字符串（即测试"probably"或"maybe"），如下所示：

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

你应该测试媒体文件使用的特定编解码器，例如使用 'audio/ogg; codecs="vorbis"' 来测试 Vorbis 编解码器。测试通用的 Ogg 支持可能没有什么用处。