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

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 暂停和播放音频以及更改图标

jQuery to pause and play audio and change icons

html

css

jquery

font-awesome