2011-12-10 19 views
1

HTML5アニメーションを使用してコード化される簡単なツアーを自分のウェブサイトに構築しました。 HTML5オーディオタグのサウンドが使用され、ツアーはjqueryを使用して読み込まれます。jQueryを使用してページのHTML5オーディオを制御する

ツアーがロードされると、オーディオの再生が開始され、ユーザーはリンクを切り替えてサウンドをミュートすることができます。ツアーを終了すると、オーディオがリセットされます。

私はこの作業の一部を持っていますが、適切に音楽を切り替えるとオフし、その後、彼らはツアーを閉じた場合、それを完全に止めることはできないようです。誰も助けることができますか?

var sound; 

      $(document).ready(function() 
      { 
       sound = $('#soundTour'); 

       $('.sound a').click(function() 
       { 
        $(this).parents('div').toggleClass('mute'); 

        if (sound.paused) 
        { 
         sound.play(); 
        } 
        else 
        { 
         sound.pause(); 
        } 
       }); 

       $('.showTour').click(function() 
       { 
        $('body').addClass('theatre'); $('#tour').fadeIn('slow', function() { }); 

        sound.trigger('play'); 
       }); 

       $('#tour').find('.tourClose').click(function() 
       { 
        $('body').removeClass('theatre'); $('#tour').fadeOut('slow', function() { }); 

        sound.currentTime=0; 
        sound.pause(); 

       }); 

      }); 
+2

FYI 1後者は確かに 'getElementById'を使用するよう、'オーディオ#1 soundTour'のようなセレクタはちょうど '#soundTour'よりも遅くなる場合があります: お使いのブラウザがその形式をサポートしている必要がありますので、mp3ファイルを使用しています*少なくとも*は選択された要素のtagNameをチェックする必要があります - そしてidsは一意でなければならないので、あなたは 'id =" soundTour "を持つ要素をとにかくする必要はありません。 – ThiefMaster

答えて

4

は、次のような本当に「停止」であることを言うことは困難である、投稿のコードで定義されていないイベントをトリガするためにjQueryのトリガーを()を使用しているが、一般的なルールとして、HTML5音声はありません。ストップ()関数は、のみ(遊び)とオーディオをリセットするために、)(一時停止もう一度ソースを定義するか、そうのような、ゼロに.currenttimeを設定:

var audioElm = document.getElementById('soundTour'); 
    audioElm.src = 'myaudio.mp3'; 
    audioElm.load(); 

又は

var audioElm = document.getElementById('soundTour'); 
    audioElm.currentTime=0; 
    audioElm.pause(); 

currentTiを設定する私は最初にオーディオを巻き戻し、本当にそれを止めません。

ここでは、その方法の1つを示すためのフィドルです。 http://jsfiddle.net/adeneo/n6Bar/1/

+0

私はエラーが私は私の答えを編集した – Cameron

+0

@Cameron方法が有効なjqueryのメソッドではないことを言ってます、HTML5オーディオ機能としての私の悪いがネイティブであり、ネイティブJS要素上で実行する必要があります。 – adeneo

関連する問題