jQuery：多个音频播放器按钮

Question

我想做4播放按钮，播放MP3音频。播放功能每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

你想被点击时一个停止其他三个？

如果这样你就可以尝试：

$(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(); }); });

修复：

其实我不知道，如果音频元素本身就是一个音频对象，如果是这样，你可以调用播放/暂停直接在audioDom/currentAudioDom元素上，忘记$ audio的东西...