<音频>通过Javascript回退 [英] <Audio> fallback through Javascript

问题描述

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

I want to understand how to implement HTML5 <audio> fallback using Javascript...

我在我的页面上有一个div，当我点击播放音频链接时，我会动态地附加< embed> 标记。
ie ie使用

i.e. I have a div on my page, to which , I dynamically append <embed> tag when "Play audio" link is clicked currently.. i.e. I currently use

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

我想要使用HTML5 < audio> 标记，但希望在不支持HTML5音频标记时嵌套回退。我怎么能实现相同的使用JS给定的音频URL是动态的？

I want to have the same thing implemented using the HTML5 <audio> tag, But want to fallback to embed when HTML5 audio tag is not supported. How can I implement the same using JS given that the Audio URL is kind of dynamic ?

我的意图是它应该在旧的以及新的浏览器上工作..像IE6 ，7,8; FF 3,4;铬; MAC上的Safari 4,5，iPad上的Safari。

My intention is it should work on older as well as newer browsers..like IE6,7,8; FF 3,4; Chrome; Safari 4,5 on MAC, Safari on iPad..

推荐答案

您可以使用 Modernizr 来检测音频的支持。

You could use Modernizr to detect audio support.

如果你不想把这个库包括进来，那么应该这样做......

If you don't want to include that library for a simple thing, this should do it...

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 。

这篇关于<音频>通过Javascript回退的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！