HTML5 - 再生オーディオ

誰かが私に操縦を与えることができるのだろうか - 私の心は空です。私のページには3つの異なるボタン（JavaScriptを使用）があります。私がしようとしているのは、これらの3つのボタンと、選択されたサウンドを再生するボタンです。もう一度クリックすると、それが停止します。HTML5 - 再生オーディオ

私はFlashでそれを行うことができましたが、私はHTML5でちょっと困惑しています！

更新

こんにちはガイズ - 応答のためのおかげで、これは私がこれまで使用しているものです..：ボタンが選択させる

<div data-role="controlgroup" data-type="horizontal"> 
    <audio loop id="8000"> 
     <source src="8000.mp3"> 
    </audio> 
    <button onclick="document.getElementById('8000').play()">16kHz</button> 
    <audio loop id="18000"> 
     <source src="18000.mp3"> 
    </audio> 
    <button onclick="document.getElementById('18000').play()">18kHz</button> 
    <audio loop id="20000"> 
     <source src="20000.mp3"> 
    </audio> 
    <button onclick="document.getElementById('18000').play()">20kHz</button> 
</div> 
<div data-role="controlgroup" data-type="horizontal"> 
    <button class="ui-body-b" onclick="document.getElementById('8000').pause(); document.getElementById('8000').currentTime = 0;" >Stop Playing</button>

これがポイントに動作しますが、私はしたいです再生するサウンド（実際には再生しません）が大きい再生サウンドボタンを持っています...

出典

2012-01-23 Jimbly2

Googleでしたか？ 'html5 audio'の最初の結果はおそらくあなたが探しているものです：http://www.w3schools.com/html5/html5_audio.asp – Josh

ロジックはFlashとほとんど同じです。唯一の違いは、あなたが使用しているAPIです。これは、[仕様]（http://w3.org/TR/html5/）に明記されています。どのような特定の問題がありますか？ – Quentin

私は、HTML5のオーディオタグが完全には動作しないブラウザ（つまり、HTML5/CSS/JQuery）で、Flashのフォールバックを使用してhttp://jplayer.org/を使用しています。あなたは何を探していますか？「コマンド」属性を持つHTML5オーディオタグと同じくらいシンプルにできますが、クロスブラウザでは機能しません。 –

あなたの問題は実際にオーディオに関連していないようですが、その代わりに効果を得るためのボタンを実装する方法欲しいです。投稿したコードが動作すると言うので、再生や一時停止はオーディオ要素でうまく動作しています。しかし、3つのボタンは3つの異なるサウンドを開始し、最後のボタンは現在再生されているサウンドを停止します。一方、3つのボタンの1つでサウンドを選択し、最後のボタンを使用して再生/一時停止します。その後、

あなたが最後のidは音のボタンを選択しクリックした格納する変数を持っている場合は、プレイを呼び出して切り替えるには、最後のボタンを使用します（）および一時停止（）...

<!DOCTYPE html> 
<html> 
<header> 
<script type="text/javascript"> 
    var selSound = 8000; //default to first sound. 
    var play = false; //default to paused. 

    function selectSound(id) { 
     selSound = id; 
    } 

    function togglePlay() { 
     var a = document.getElementById(selSound); 
     var b = document.getElementById("playbtn"); 
     play = !play; 
     if (play) { 
      b.value = "Stop Playing"; 
      a.play(); 
     } 
     else { 
      b.value = "Start Playing"; 
      a.pause(); 
     } 
    } 
</script> 
</header> 
<body> 
    <div data-role="controlgroup" data-type="horizontal"> 
     <audio loop id="8000"> 
      <source src="8000.mp3"> 
     </audio> 
     <button onclick="selectSound('8000')">16kHz</button> 
     <audio loop id="18000"> 
      <source src="18000.mp3"> 
     </audio> 
     <button onclick="selectSound('18000')">18kHz</button> 
     <audio loop id="20000"> 
      <source src="20000.mp3"> 
     </audio> 
     <button onclick="selectSound('18000')">20kHz</button> 
    </div> 
    <div data-role="controlgroup" data-type="horizontal"> 
      <button id="playbtn" class="ui-body-b" onclick="togglePlay()" >Start Playing</button> 
    </div> 
</body> 
</html>

ここで最初の3つのボタンは単に変数selSoundを '8000'、 '18000'または '20000'に設定します。最後のボタンを押してサウンドを再生すると、selsound変数が使用するオーディオ要素のIDを識別するために使用されます。まず最初のクリックで音が鳴り、次のクリックでそれが止まり、前後に切り替えられます。

これは完全ではありません。テストしていないので、完全に機能しない可能性もあります。しかし、再生が終了すると、再生/一時停止ボタンを[再生開始]に戻すことをお勧めします。それ以外の場合は、再生をクリックすると、選択したサウンドが再生され、最後に停止しますが、ボタンには「再生を停止」と表示され、クリックすると「再生を開始」とトグルしますもう一度サンプルを再生するようにします。だから、サウンドが止まったときにイベントをトラップし、ボタンを「再生開始」に戻したいと思うでしょう。

HTH

出典

2012-02-06 18:03:39

こんにちはDavid - これを見て時間をとってくれてありがとう - 私はこれがまさに私が達成しようとしているものだと思います。私はあなたのポイントを '再生を開始する'に戻してトグルしますが、サウンドはループされますので、実際には止まらないでしょう。ボタンの画像も使用しますが、これは簡単です。もう一度ありがとう - ジム – Jimbly2

こんにちは - 私は 'playbtn'をオン/オフに切り替えることができません？ – Jimbly2

「再生開始」/オーディオファイルの一時停止と「再生停止」/ボタンをクリックしたときのオーディオファイルの再生を切り替えていないことを意味しますか？ Javascriptでエラーが発生しましたか？ –

HTML5 - 再生オーディオ

答えて

関連する問題