jquery - 複数の HTML5 オーディオの動作 : 一度に 1 トラックずつお願いします

Question

最初に、私がこれまでに持っているものをお見せすると思います....

http://jsfiddle.net/fDRnY/

HTML 構造に複数の<audio>タグがあります。<a>タグ付きのファイルを再生する標準的な手法を使用しています

$('.play').on('click',function(e){
e.preventDefault();

var song = $(this).next('audio').get(0);

    if(song.paused){
        song.play();

    }else {
        song.pause();    
    }
});

次に、現在再生中のトラックが終了したときに次のトラックを再生する簡単な関数を作成しました...

$('audio').on('ended',function(e){
e.preventDefault();
var $next = $(this).nextAll().eq(1).get(0);

        if($next.paused){
            $next.play();
        }
}); 

次に、現在再生中のトラックにハイライト クラスを追加するビジュアル UI 用の関数がさらにいくつかあります...

$('audio').on('playing',function(){
    $(this).prev().addClass('highlight')
});

$('audio').on('ended',function(){
    $(this).prev().removeClass('highlight')
});

 $('audio').on('pause',function(){ 
    $(this).prev().removeClass('highlight') 
 });

今私の問題: 複数のトラックをクリックすると、同時に再生されます。別のトラックをクリックすると、現在再生中のトラックが一時停止するようにします。

スタックに関する同様の懸念を持つ同様の投稿を見つけ、すべてのaudioオブジェクトをループして一時停止するこの関数を見つけました...

var allAudioEls = $('audio');

function pauseAllAudio() {
   allAudioEls.each(function() {
      var a = $(this).get(0);
      a.pause();
   });
}

このように関数を呼び出すと (下の 3 行目)...

$('.play').on('click',function(e){
e.preventDefault();
pauseAllAudio();        
var song = $(this).next('audio').get(0);

    if(song.paused){
        song.play();

    }else {
        song.pause();    
    }
});

それはほとんど機能し、再生中の他のトラックを一時停止し、最後にクリックしたトラックを再生しますが、現在再生中のトラックを一時停止することはできません。それが理にかなっていることを願っています。ある種のフローの問題だと確信していますが、私はまったくの初心者です...これを行うにはまったく新しいテクニックが必要かもしれません。私はaudioオブジェクトをループすることで正しい軌道に乗っていると思います...助けをいただければ幸いです。私が言ったように、私は初心者です。詳細な説明はさらに高く評価されます。

ありがとう！