1

<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のような古いブラウザと新しいブラウザで動作するはずです。FF 3,4; クロム; MACのSafari4,5、iPadのSafari。

4

1 に答える 1

4

Modernizrを使用してサポートを検出できますaudio。

単純なことのためにそのライブラリを含めたくない場合は、これでうまくいくはずです...

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。

于 2011-06-06T12:05:34.283 に答える