jQuery：多个音频播放器按钮答案

【问题标题】：jQuery: Multiple audio player buttonsjQuery：多个音频播放器按钮
【发布时间】：2016-06-15 21:53:08
【问题描述】：

我想制作 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;
        }
    });
});

【问题讨论】：

为什么要“克隆”音频（by var audio = new Audio(song);）？试试$(this).find('audio')[0].pause()

标签： javascript jquery html5-audio

【解决方案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>

【讨论】：

【解决方案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(); }); });

修复：

其实我不确定audio元素本身是不是一个Audio Object，如果是的话，你可以直接在audioDom/currentAudioDom元素上调用play/pause，忘记$audio这个东西……

【讨论】：