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

Posted 2023-02-25

【中文标题】Javascript 音频控制自动播放播放暂停

【英文标题】：Javascript audio controls autoplay play pause

【发布时间】：2017-04-23 01:07:36

【问题描述】：

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

JS

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');
  );

【参考方案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();
    
);