javascript - 通过 Javascript 回退

Question

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

即我的页面上有一个 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；法郎 3,4; 铬合金; MAC 上的 Safari 4,5，iPad 上的 Safari..

Answer 1

您可以使用Modernizr来检测audio支持。

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

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

js小提琴。

所以那将是...

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

js小提琴。