Javascript 音频控制自动播放播放暂停答案

【问题标题】：Javascript audio controls autoplay play pauseJavascript 音频控制自动播放播放暂停
【发布时间】：2017-04-23 01:07:36
【问题描述】：

我的应用上有一个音频循环，我希望它自动播放并在播放和暂停之间切换图标。但不能在暂停和播放之间切换

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'bglaughs.mp3');

audioElement.play();

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

if(audioElement.paused && audioElement.currentTime > 0 && !audioElement.ended) {
  $(document).on('click', '.play', function() {
          audioElement.play();
      $(this).removeClass('play').addClass('pause');
      $('a .fa-volume-off').removeClass('fa-volume-off').addClass('fa-volume-up');
  });

} else {
  $(document).on('click', '.pause', function() {
          audioElement.pause();
      $(this).removeClass('pause').addClass('play');
      $('a .fa-volume-up').removeClass('fa-volume-up').addClass('fa-volume-off');
  });
}

HTML

<a href="#" id="music" style="color:black" class="play"><i class="fa fa-volume-up fa-2x" aria-hidden="true"></i></a>

更新

我设法让自动播放和切换开始工作，但最初需要单击 2 次才能停止音频，然后切换恢复正常。关于它为什么这样做的任何帮助？

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'bglaughs.mp3');

audioElement.load();
audioElement.addEventListener("canplay", function() {
  audioElement.play();
}, true);

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


  $(document).on('click', '.play', function() {
          audioElement.play();
      $(this).removeClass('play').addClass('pause');
      $('a .fa-volume-off').removeClass('fa-volume-off').addClass('fa-volume-up');
  });


  $(document).on('click', '.pause', function() {
          audioElement.pause();
      $(this).removeClass('pause').addClass('play');
      $('a .fa-volume-up').removeClass('fa-volume-up').addClass('fa-volume-off');
  });

【问题讨论】：

标签： javascript jquery audio

【解决方案1】：

由于音频正在播放正在加载...

只需将锚的 onload 类设置为暂停即可。
而且你的代码是正确的。

<a href="#" id="music" style="color:black" class="pause">

Working CodePen here.

【讨论】：

【解决方案2】：

IMO，您可以用更少的代码处理这个问题：

audioElement = new Audio('bglaughs.mp3');
audioElement.addEventListener("canplay", function() {
  audioElement.play();
}, false);
audioElement.addEventListener('ended', function () {
        this.currentTime = 0;
        this.play();
}, false);

$('#music').on('click', function(e) {
    e.preventDefault();
    var volIcon = $(this).find('i');
    volIcon.toggleClass('fa-volume-up fa-volume-off');
    if (volIcon.hasClass('fa-volume-off')) {
        audioElement.pause();
    } else {
        audioElement.play();
    }
});

【讨论】：