我们如何在所有浏览器中使用音频，如果浏览器不支持，我们可以使用什么原语？

Question

我正在使用JavaScript和HTML5编写一个Web应用程序，我必须在我的网页中发出声音通知，这就是我在JavaScript中调用它的方式：

sounds: {
    bip: new Audio('/sounds/bip.mp3') 
}

但我想确保此音频适用于所有浏览器。所以我有两个问题：

1. 如何检查音频是否适用于所有浏览器？

我看到了所有答案here，我也在这里找到了解决方案：

• DETECTING HTML5 FEATURES

• Using document.createElement() to test for browser support for an element

所以这个问题有一个答案：

var test_audio= document.createElement("audio"); //try and create sample audio element
var audiosupport=(test_audio.play)? true : false;

但我现在的问题是：

1. 如何确保音频始终在所有浏览器中播放？如何将Audio()元素替换为替代且兼容的元素？

我该如何管理？

Answer 1

正如您在上面提到的，您可以轻松检查兼容性，但我认为您可以在评论中看到此功能很少得到支持，并且少数旧版浏览器并不支持它这里的主要问题是MP3编解码器支持，你可以用canPlay()测试它，你可以这样保证：

var audio=document.createElement("audio");
audio.controls="controls";
//The mp3 source
   var mp3Source=document.createElement("source");
   mp3Source.src="myFile.mp3";
   mp3Source.type="audio/mpeg";
//the ogg source
   var oggSource=document.createElement("source");
   oggSource.src="myFile.ogg";
   oggSource.type="audio/ogg";
//Append the source elements to the audio
audio.appendChild(mp3Source);
audio.appendChild(oggSource);

您当前使用的new Audio() construtor提供对<audio>元素属性的访问，以及使用以下方法操作它们的方法：

mySound = new Audio([URLString]);

请查看MDN HTMLAudioElement Specifications，您可以看到new Audio() construtor基本上支持所有浏览器，如下所示：

Answer 2

对于不支持音频元素的浏览器，您需要此选项

<object data="/sounds/bip.mp3" >
<param name="src" value="/sounds/bip.mp3"/>
</object>

使用JavaScript，您可以使用以下内容：

var obj = document.createElement('object'), 
    param = document.createElement('param');

param.name = "src";
param.value = "/sounds/bip.mp3";

obj.appendChild(param);
document.body.appendChild(obj);

您可以检查是否使用此或不使用Modernizr或您的代码（尚未测试）：

var test_audio= document.createElement("audio"); //try and create sample audio element
var audiosupport=(test_audio.play)? true : false;