jQuery：複数のオーディオプレーヤーボタン

Question

私はmp3オーディオを再生する4つの再生ボタンを作りたいと思います。再生機能は4つのボタンごとに機能していますが、残念ながら、いずれのボタンでも一時停止が機能していません。多分休止状態が間違っていますか？

<div class="audio-button"> 
    <audio src="media/test.mp3"></audio> 
</div> 
<div class="audio-button"> 
    <audio src="media/test2.mp3"></audio> 
</div> 
<div class="audio-button"> 
    <audio src="media/test3.mp3"></audio> 
</div> 
<div class="audio-button"> 
    <audio src="media/test4.mp3"></audio> 
</div> 

$(document).ready(function() { 
    var playing = false; 

    $('.audio-button').click(function() { 
     $(this).toggleClass("playing"); 
     var song = $(this).find('audio').attr('src'); 
     var audio = new Audio(song); 

     if (playing == false) { 
      audio.play(); 
      playing = true; 
     } else { 
      audio.pause(); 
      playing = false; 
     } 
    }); 
}); 

Answer 1

ボタンから直接オーディオ要素を取得し、それと対話する必要があります。コンストラクタを使用してAudioオブジェクトを複製する必要はありません。

$(document).ready(function() { 
 
    var playing = false; 
 

 
    // Add file names. 
 
    $('.audio-button').each(function() { 
 
    var $button = $(this);  
 
    var $audio = $button.find('audio'); 
 
    
 
    $($('<span>').text($audio.attr('src'))).insertBefore($audio); 
 
    }); 
 

 
    // Add click listener. 
 
    $('.audio-button').click(function() { 
 
    var $button = $(this);  
 
    var audio = $button.find('audio')[0]; // <-- Interact with this! 
 
    
 
    // Toggle play/pause 
 
    if (playing !== true) { 
 
     audio.play(); 
 
    } else { 
 
     audio.pause(); 
 
    } 
 

 
    // Flip state 
 
    $button.toggleClass('playing'); 
 
    playing = !playing 
 
    }); 
 
});

.fa.audio-button { 
 
    position:  relative; 
 
    display:  block; 
 
    width:   12em; 
 
    height:  2.25em; 
 
    margin-bottom: 0.125em; 
 
    text-align: left; 
 
} 
 

 
.fa.audio-button:after { 
 
    position:  absolute; 
 
    right:   0.8em; 
 
    content:  "\f04b"; 
 
} 
 

 
.fa.audio-button.playing:after { 
 
    content:  "\f04c"; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="fa audio-button"> 
 
    <audio src="media/test.mp3"></audio> 
 
</button> 
 
<button class="fa audio-button"> 
 
    <audio src="media/test2.mp3"></audio> 
 
</button> 
 
<button class="fa audio-button"> 
 
    <audio src="media/test3.mp3"></audio> 
 
</button> 
 
<button class="fa audio-button"> 
 
    <audio src="media/test4.mp3"></audio> 
 
</button>

Answer 2

あなたは1がクリックされたときに、他の3を停止するようにしたいですか？

ので、あなたが試すことができた場合：

$(document).ready(function() { $('.audio-button').click(function (e) { var button = $(e.target).closest('.audio-button'); var audio = button.find('audio'); var audioDom = audio.get(0); $('audio[data-is-playing]').not(audio).each(function (i, currentAudioDom) { var currentButton = $(currentAudioDom).closest('.audio-button'); currentButton.removeClass('playing'); currentButton.removeAttr('data-is-playing'); currentAudioDom.$audio.pause(); }); button.addClass('playing'); audio.attr('data-is-playing', ''); audioDom.$audio = audioDom.$audio || new Audio(audio.attr('src')); audioDom.$audio.play(); }); });

修正：

実は私はaudio要素自体はオーディオオブジェクトである場合にはそうならば、あなたがプレイを呼び出すことができるかわかりません/ audioDom/currentAudioDom要素に直接ポーズして、$ audioのことを忘れてしまいます。