javascript - 我们怎样才能使音频在所有浏览器中工作，如果浏览器不支持它，我们可以使用什么原语？

Question

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

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

但我想确保该音频在所有浏览器中都能正常工作。所以我有两个问题:

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

我看到了所有答案here我还在这里找到了解决方案:

• DETECTING HTML5FEATURES .

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

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

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

但我现在的问题是:

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

我该如何处理这个问题？

Answer 1

您需要将此作为不支持音频元素的浏览器的替代方案

<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;