web-dev-qa-db-ja.com

JavaScriptでHTML5オーディオを動的に制御する

それぞれが1つの曲を表す10個ほどのサムネイルを備えた種類のギャラリーがあります。それぞれの再生を制御するために、jQueryを介してフェードインするように再生ボタンを設定しました。 AppleのDevCenterを調べた後、オーディオを制御するためのネイティブJavaScriptを見つけました。それは美しく機能しますが、一度に1つのオブジェクトを制御するために書かれています。私がやりたいのは、選択しているサムネイルの再生/一時停止を動的に制御する1つの関数として書き直すことです。

以下は私が見つけたコードです..動作しますが、10回書くのは不必要なコードがたくさんあります。

いつもあなたの助けとアドバイスをありがとう！

HTML：

    <div class="thumbnail" id="paparazzixxx">
        <a href="javascript:playPause();">
            <img id="play" src="../images/icons/35.png" />
        </a>
        <audio id="paparazzi">
            <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
            <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
    </div>

JavaScript：

<script type="text/javascript">
       function playPause() {
       var song = document.getElementsByTagName('audio')[0];
       if (song.paused)
           song.play();
       else
           song.pause();
       }
</script>
javascriptjqueryhtmlaudioplayback
9
technopeasant

jQueryは、この種のことには最適です。 DOMツリー内の他の要素との関係に基づいて要素を簡単に操作する機能を提供します。あなたの例では、<a>要素がクリックされたときにそれらのすぐ隣にある<audio>要素にのみ影響するようにしたいと考えています。

現在のJavascriptコードの問題は、実際にはページ全体の最初のオーディオ要素のみを取得していることです。

無制限の数の<a> & <audio>ペアをサポートするようにコードを変更する方法は次のとおりです。

  1. <a>タグにクラスを追加します（私の例では「再生」）
  2. Href属性を「＃」に置き換えます
  3. 次に、jQueryを使用して、そのクラスを持つ要素のクリックイベントにハンドラーをアタッチします。

[〜＃〜] html [〜＃〜]

<div class="thumbnail" id="paparazzixxx">
    <a class="playback" href="#">
        <img id="play" src="../images/icons/35.png" />
    </a>
    <audio id="paparazzi">
        <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
        <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
        Your browser does not support HTML5 audio.
    </audio>
</div>

Javascript

<script type="text/javascript">
   $(function() {
     $(".playback").click(function(e) {
       e.preventDefault();

       // This next line will get the audio element
       // that is adjacent to the link that was clicked.
       var song = $(this).next('audio').get(0);
       if (song.paused)
         song.play();
       else
         song.pause();
     });
   });
</script>
22
jessegavin