我们如何才能使音频在所有浏览器中都能正常工作，如果浏览器不支持，我们可以使用什么原语？

Question

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

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

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

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

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

所以这个问题有了答案：

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

但我现在的问题是：

如何确保音频始终在所有浏览器中播放？如何将 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() 构造函数提供对 <audio> 元素属性的访问，以及使用 :

操作它们的方法

mySound = new Audio([URLString]);

看看 MDN HTMLAudioElement Specifications，您会发现 new Audio() 构造函数基本上得到几乎所有浏览器的支持，如下所示：

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;

我们如何才能使音频在所有浏览器中都能正常工作，如果浏览器不支持，我们可以使用什么原语？

How can we make audio works in all browsers, what primitive can we use if a browser doesn't support it?

javascript

html

audio

compatibility