HTML5オーディオの再生と一時停止を制御する方法

Question

再生リストと再生リストの両方を備えた音楽プレーヤーを作成しています。 再生ボタンをクリックするか、プレイリスト内のトラックの1つをクリックすると、音楽が再生されます。また、その時には1つのトラックしか再生する必要がありません。 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>

上記のコードは、コードの一部を行います。

は、ここに私のコードです。その時点で1つのトラックが再生されますが、同じプレイリストのトラックがクリックされた場合はトラックが一時停止します。 （代わりにそれを再生する必要があります）。 これをテストするには、プレイリストから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"); 
    } 
    } 

チェックアウト：How to prevent "The play() request was interrupted by a call to pause()" error?