âm thanh tự động phát bài hát tiếp theo khi trước đó kết thúc

Question

Tôi muốn tạo trình phát nền âm thanh trong đó người dùng chỉ có thể nhấp vào hình ảnh để phát hoặc ngừng phát lại. Tôi gặp sự cố khi tạo hoặc viết lại các mã hiện có để tạo danh sách phát cho nó, tự động phát bài hát tiếp theo khi trước đó kết thúc. Tôi muốn làm điều đó trong vanilla js.
Dưới đây là những gì tôi có cho đến nay:
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

đây là mẹo để kích hoạt bài hát tiếp theo:

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

Làm thế nào để chơi bài hát khác trên cùng một thẻ âm thanh:

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

Bây giờ, đây là một ví dụ tuyệt vời về danh sách phát trong html5, bạn có thể tải từng bài hát vào thời điểm đó, trường hợp một số khách hàng s (di động) sẽ không được hạnh phúc khi bạn tiêu thụ giao thông, trong ví dụ tiếp theo tất cả các âm thanh được nạp cùng lúc để có một chuyển đổi suôn sẻ từ bài hát để hát, tải bài hát:

//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; 

Nêu bật bài hát phù thủy là chơi, với một chút jquery, yeah, trường hợp vâng tôi là lười biếng, lười biếng:

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

Fiddle here

Lưu ý: Nếu của âm thanh không chơi, tự kiểm tra xem của url âm thanh có thể truy cập