2

Html5オーディオでクリック時にサウンドを再生するにはどうすればよいですか? (Firefox などのブラウザーでは ogg、chrome などのブラウザーでは mp3)

これまでのところ onclick 単一のファイルタイプに変更できますが、通常のhtml5オーディオ宣言で行うようにバックアップオプションを設定することはできません.

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

コード：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>How do i call the javascript function and get it to play .ogg if can't play .mp3?</title>
</head>
<body>
    <audio id="Mp3Me" autoplay autobuffer controls>
  <source src="Piano.mp3">
</audio>

<a href="javascript:GuitarTrack()">Guitar</a>

<script type="text/javascript">
function GuitarTrack(){
var Mp3Me= document.getElementById('Mp3Me');
Mp3Me.src = "Guitar.mp3";
Mp3Me.src = "Guitar.ogg";
}
</script>

</body>

</html>
4

1 に答える 1

3

要素を1つだけ作成するため、HTMLで<source>別の要素を作成するか、JavaScriptを使用して要素を作成する必要があります。<source>

  1. HTMLを使用して2番目の要素を作成します。http://jsfiddle.net/PVqvC/

    <audio id="Mp3Me" autoplay autobuffer controls>
<source src="Piano.mp3">
<source src="Piano.ogg">
</audio>
<a href="javascript:GuitarTrack();">Guitar</a>

<script type="text/javascript">
function GuitarTrack(){
    var Mp3Me= document.getElementById('Mp3Me');
    Mp3Me.children[0].src = "Guitar.mp3";
    Mp3Me.children[1].src = "Guitar.ogg";
    Mp3Me.load();
}
</script>

  2. JSを使用して2番目の要素を作成します。http://jsfiddle.net/MBvsC/1/

    <audio id="Mp3Me" autoplay autobuffer controls>
<source src="Piano.mp3">
</audio>
<a href="javascript:GuitarTrack();">Guitar</a>

<script type="text/javascript">
function GuitarTrack(){
    var Mp3Me= document.getElementById('Mp3Me').getElementsByTagName('source');

    if(Mp3Me.length > 1) { //there are 2 elements
        Mp3Me[0].src = "Guitar.mp3";
        Mp3Me[1].src = "Guitar.ogg";
    }
    if(Mp3Me.length == 1) { //only one element, so we need to create the second one
        Mp3Me[0].src = "Guitar.mp3"; //changes existing element

        var node = document.getElementById('Mp3Me');
        var newelem = document.createElement('source');
        newelem.setAttribute('src', 'Guitar.ogg');
        node.appendChild(newelem); //creating new element with appropriate src                         
    }
    Mp3Me.load();
}
</script>

ご覧のとおり、最初の方法ははるかに短くてクリーンなので、使用できる場合は使用してください。ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-03-10T01:05:01.350 に答える