Javascript音频控件自动播放暂停

Question

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

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> 

---

UPDATE

我设法让自动播放和切换工作，但最初它需要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'); 
    }); 

Answer 1

由于音频播放负载 ...

只需设置锚的onload类暂停。
而你的代码是正确的。

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

Working CodePen here。

Answer 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(); 
    } 
});