如何在HTML5音頻中控制播放和暫停

Question

我正在創建一個既沒有播放列表又沒有播放列表的音樂播放器。 單擊播放按鈕或單擊播放列表中的曲目之一時，音樂開始播放。 當時只能播放一首曲目。

這是我的代碼： DEMO

 $.fn.MusicPlayer = function(options) { var settings = $.extend({ // These are the defaults title: "", track_URL: "", load_playlist: "" }, options); var audio, thisObj, playPauseBTN; audio = new Audio(); thisObj = this; playPauseBTN = $(".playButton", thisObj); //Statuses Evnts $(audio).on("playing", function() { togglePlying(playPauseBTN, true); $(playPauseBTN).addClass("pause"); }); $(audio).on("pause", function() { togglePlying(playPauseBTN, false); $(playPauseBTN).removeClass("pause"); }); thisObj.each(function() { audio.src = settings.track_URL; $(".title", thisObj).text(settings.title); if (settings.load_playlist == "true") { $(thisObj).css("height", "140px"); $(thisObj).append("<div class='playlist'></div>"); $(".playlist", thisObj).append("<div class='row' data-src='https://p.scdn.co/mp3-preview/c92cc644b1eb5094ce65cf561c41b0c6d9f3faaa'>music 1</div>"); $(".playlist", thisObj).append("<div class='row' data-src='https://p.scdn.co/mp3-preview/dc73c2b8aa08c7b5ac2c72813326fbd6aa65787b'>music 2</div>"); $(".playlist", thisObj).append("<div class='row' data-src='https://p.scdn.co/mp3-preview/b2da3e7ee2834c24fbf5a0927e59d34cc618e30e'>music 3</div>"); } }); $(playPauseBTN, thisObj).on("click tap", function() { manageAudio(); }); $(".playlist > .row", thisObj).on("click tap", function() { audio.src = $(this).attr("data-src"); manageAudio(); }); function manageAudio() { if (audio.paused) { audio.play(); $('.playButton.playing').click(); $(thisObj).addClass("bekhon"); $(".sMusicPlyaer").removeClass("nakhon "); } else { audio.pause(); $(thisObj).addClass("nakhon"); $(".sMusicPlyaer").removeClass("bekhon"); } } } // Utility functions function togglePlying(aClassName, bool) { $(aClassName).toggleClass("playing", bool); } $("#player1").MusicPlayer({ title: "title 1", track_URL: "https://rjmediamusic.com/media/mp3/mp3-256/Alireza-JJ-Sijal-Nassim-Ki-Khoobe-Ki-Bad-(Ft-Behzad-Leito-Sami-Low-AFX).mp3" }); $("#player2").MusicPlayer({ title: "title 2", track_URL: "http://myst729.qiniudn.com/within-temptation_pale.mp3", load_playlist: "true" }); $("#player3").MusicPlayer({ title: "title 3", track_URL: "https://p.scdn.co/mp3-preview/657f7141682f667253bf9c3afab5feebccf75105" }); 

 body { background: url(http://wallpapercave.com/wp/VkyGWEi.jpg) no-repeat; background-size: cover; } .sMP { background: rgba(255, 255, 255, 0.5); color: #000; width: 400px; height: 50px; margin: 10px; } .playButton { background: url(https://cdn4.iconfinder.com/data/icons/standard-free-icons/139/Play01-64.png); background-size: 30px 30px !important; width: 30px; height: 30px; } .playButton.pause { background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-pause-48.png); } .row { border: 1px solid black; margin: 5px 0 5px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sMP" id="player1"> <div class="playButton"></div> <div class="title"></div> </div> <div class="sMP" id="player2"> <div class="playButton"></div> <div class="title"></div> </div> <div class="sMP" id="player3"> <div class="playButton"></div> <div class="title"></div> </div> 

上面的代碼是代碼的一部分。 它一次播放一首曲目，但是如果單擊了同一播放列表中的曲目，則會暫停該曲目。 （必須開始播放）。 要對其進行測試，請從播放列表中單擊music 1 ，然后在播放時單擊music 2 。 您會看到曲目暫停而不是開始播放。

有解決的辦法嗎？

Answer 1

超時后播放音頻：

function manageAudio() {
    if (audio.paused) {

 //play after 150ms
    setTimeout(function () {      
       audio.play();
    }, 150);

      $('.playButton.playing').click();

      $(thisObj).addClass("bekhon");
      $(".sMusicPlyaer").removeClass("nakhon ");
    } else {
      audio.pause();

      $(thisObj).addClass("nakhon");
      $(".sMusicPlyaer").removeClass("bekhon");
    }
  }

簽出： 如何防止“ play（）請求被對pause（）的調用中斷”錯誤？