javascript - <Audio> 通过 Javascript 回退

Question

我想了解如何实现 HTML5 <audio>使用 Javascript 回退...

即我的页面上有一个 div，我动态地向其附加 <embed>当前单击“播放音频”链接时的标记.. 即我目前使用

function playSound(audioUrl)
{
var x = document.getElementById("playAudio");
x.innerHTML = '<EMBED src="'+audioUrl+'" autostart=true loop=false volume=100 hidden=true>';
} 

我想使用 HTML5 实现相同的功能 <audio>标签，但希望在不支持 HTML5 音频标签时回退嵌入。鉴于音频 URL 是动态的，我如何使用 JS 实现相同的功能？

我的意图是它应该适用于较旧和较新的浏览器..比如 IE6,7,8； FF 3,4； Chrome ; MAC 上的 Safari 4,5，iPad 上的 Safari..

Answer 1

你可以使用 Modernizr检测音频支持。

如果您不想为了简单的事情而包含该库，那么应该这样做...

var audioSupport = document.createElement('audio').hasOwnProperty('src');

jsFiddle .

那就是……

function playSound(audioUrl) {
    var audioSupport = document.createElement('audio').hasOwnProperty('src'),
        x = document.getElementById("playAudio");

    if (audioSupport) {
        var audio = document.createElement('audio');
        audio.src = audioUrl;
        x.appendChild(audio);
        audio.play();
    } else {
        // Or you could use proper DOM methods...
        x.innerHTML = '<EMBED src="' + audioUrl + '" autostart=true loop=false volume=100 hidden=true>';
    }
}

jsFiddle .