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