Question

我正在尝试在我的网页上播放MP3文件，但我想使用一个选项让用户选择是否播放音乐。所以我需要一个按钮来在播放和停止之间切换。

HTML

<li><a href="#" id="music"><i class="fa fa-music fa-2x" aria-hidden="true"></i></a></li>

的JavaScript

$("#music").click(function() {
  //$("blockquote").removeClass("animated rollIn").addClass("animated hinge");
  var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/665940/om_cut.mp3');

    audioElement.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);

   audioElement.play();
    $(this).find('i').toggleClass('fa-music fa-stop');
});

所以我可以在点击时成功播放音乐，当我点击播放图标时，我的图标也会变为停止图标。

但我希望当我点击停止图标时，音乐会停止，图标会变回播放图标。我无法理解如何将第二次点击事件添加到此图标。

Answer 1

试试这个：

var playing = false;
var initDone = false;

var audioElement = null;

$("#music").click(function() {
  if (playing) {
    // Stop playing
    audioElement.pause();
  } else {
    // Start playing
    if (!initDone) {
      initDone = true;

      audioElement = document.createElement('audio');
      audioElement.setAttribute('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/665940/om_cut.mp3');

      audioElement.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
      }, false);
    }

    audioElement.play();
  }

  $(this).find('i').toggleClass('fa-music fa-stop');
  playing = !playing;
});

Answer 2

它可能适合你：）

HTML：

<a href="#" id="music" class="play"><i class="fa fa-music fa-2x" aria-hidden="true"></i></a>

JS：

var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/665940/om_cut.mp3');
$(document).on('click', '.play', function() {
        audioElement.play();
    $(this).removeClass('play').addClass('pause');
});

$(document).on('click', '.pause', function() {
        audioElement.pause();
    $(this).removeClass('pause').addClass('play');
});

jQuery暂停和播放音频和更改图标

2 个答案: