6

我正在使用这个功能：

function playSound(file) {

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

}

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

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

4

3 回答 3

6

令人沮丧的是，没有普遍可玩的类型。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 支持不太可能有用。

于 2012-10-30T22:10:00.427 回答
1

将 webm 用于 Chrome、Firefox 和 Opera + wav 用于 Firefox、IE、Safari 和 Opera。

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和音频。wavaudio

注2：代码需要jQuery。

于 2012-10-30T21:50:37.507 回答
0

好吧，请看这里：jQuery Buzz 扩展。没用过，听说应该没问题。它能够检查您的浏览器是否支持某种格式，非常简洁的功能。

于 2012-10-30T21:45:48.587 回答