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