オーディオ自動再生次の曲が前に終了しました

Question

ユーザーが画像をクリックして再生または停止することができるオーディオ背景プレーヤーを作成したいと思います。私は、既存のコードを作成または再作成して、そのためのプレイリストを作成するのに問題があります。これは、前回の終了時に自動的に次の曲を再生します。私はバニラ・ジャズでやりたいここ
は、私がこれまで持っているものである：同じオーディオタグに別の曲を再生する方法

music.addEventListener('ended',function(){ 
     //play next song 
    }); 

：ここ
https://jsfiddle.net/rockarou/ad8Lkkrj/

var imageTracker = 'playImage'; 

swapImage = function() { 
    var image = document.getElementById('swapImage'); 
    if (imageTracker == 'playImage') { 
    image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_pause_01.png'; 
    imageTracker = 'stopImage'; 
    } else { 
    image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_play_01.png'; 
    imageTracker = 'playImage'; 
    } 
}; 

var musicTracker = 'noMusic'; 

audioStatus = function() { 
    var music = document.getElementById('natureSounds'); 
    if (musicTracker == 'noMusic') { 
    music.play(); 
    musicTracker = 'playMusic'; 
    } else { 
    music.pause(); 
    musicTracker = 'noMusic'; 
    } 
}; 

Answer 1

は、次の曲をトリガするトリックです

music.pause(); 
music.src = "new url"; 
music.load(); 
music.play(); 

ここでは、html5でのプレイリストのクールな例を示します。その時点で各曲を読み込むことができます。

//playing flag 
var musicTracker = 'noMusic'; 
//playlist audios 
var audios = []; 
$(".song").each(function(){ 
     var load = new Audio($(this).attr("url")); 
    load.load(); 
    load.addEventListener('ended',function(){ 
     forward(); 
    }); 
    audios.push(load); 
}); 
//active track 
var activeTrack = 0; 

強調魔女の歌がある：S（モバイル）を使用すると、トラフィックを消費したときに幸せになることはありませんが、次の例では、すべてのオーディオは、曲から曲へのスムーズな移行を持っているために同時にロードされ、 曲を読み込みますええ私は怠け者、怠惰なjqueryの、ええ、例ビットで、遊ん：

var showPlaying = function() 
{ 
    var src = audios[activeTrack].src; 
    $(".song").removeClass("playing"); 
    $("div[url='" + src + "']").addClass("playing"); 
}; 

Fiddle here

注：音のが再生されない場合は、オーディオのURLのがアクセス可能である場合は、手動でチェック