Come riprodurre ciascun elemento audio su una pagina (HTML, JQuery, Javascript)

Ok ho una pagina che contiene più elementi audio. Sto cercando un modo per suonare ognuno, partendo dal primo, aspettando che finisca di suonare e poi passare al prossimo elemento audio, fino all’ultimo elemento. C’è un modo per realizzare questo? Grazie!

Modificare:

Non riesco ad aggiungere un esempio di codice perché gli elementi audio sono tutti aggiunti dynamicmente da PHP, quindi è un file vuoto prima.

Puoi farlo memorizzando ogni elemento audio in una coda. Diciamo che memorizzi ogni elemento in un array audioElements.

var index = 0; function playNext(index){ audioElements[index].play(); //this will play the element audioElements[index].on('ended', function(){ //this will bind a function to the "ended" event //increment the index to target the next element index++; if(index < audioElements.length){ //plays the next song and binds the function to the ended event again until the queue is empty playNext(index); } } } playNext(index); 

Basato sulla risposta di @ liam-schauerman, in realtà ho trovato questa soluzione:

 var index = 0; var audioElements = document.getElementsByTagName('audio'); function playNext(index) { audioElements[index].play(); $(audioElements[index]).bind("ended", function(){ index++; if(index < audioElements.length){ playNext(index); } }); } $(document).ready(function() { $("#swig").click(function() { audioElements[index].play(); $(audioElements[index]).bind("ended", function(){ index = index + 1; if(index < audioElements.length){ playNext(index); } }); }); }); 

Ho appena codificato ciecamente questo. Se qualcuno lo avesse elaborato e perché funziona, lo apprezzerei.

 jQuery(document).ready(function($) { // the loop trick belong to "alertCount": 4 inside the json, changing that will change the loop counter var alarmData = { "alertCount": 3, "trigger": [{ "id": 47, "status": "active", "create_uid": 1, "create_date": "2018-04-19 01:38:39.59", "region": null, "acknowledge_by": "Hashmat", "write_uid": 1, "write_date": "2018-04-23 03:35:04.745", "date": "2018-04-19", "serial": null, "sim": null, "acknowledge_date": "2018-04-19", "station_id": null, "station_alerts": 72, "sound_triggered": null }, { "id": 48, "status": "active", "create_uid": 1, "create_date": "2018-04-19 01:38:39.59", "region": null, "acknowledge_by": "Hashmat", "write_uid": 1, "write_date": "2018-04-23 03:35:04.745", "date": "2018-04-19", "serial": null, "sim": null, "acknowledge_date": "2018-04-19", "station_id": null, "station_alerts": 72, "sound_triggered": null }, { "id": 49, "status": "active", "create_uid": 1, "create_date": "2018-04-19 01:38:39.59", "region": null, "acknowledge_by": "Hashmat", "write_uid": 1, "write_date": "2018-04-23 03:35:04.745", "date": "2018-04-19", "serial": null, "sim": null, "acknowledge_date": "2018-04-19", "station_id": null, "station_alerts": 72, "sound_triggered": null }, { "id": 50, "status": "active", "create_uid": 1, "create_date": "2018-04-19 01:38:39.59", "region": null, "acknowledge_by": "Hashmat", "write_uid": 1, "write_date": "2018-04-23 03:35:04.745", "date": "2018-04-19", "serial": null, "sim": null, "acknowledge_date": "2018-04-19", "station_id": null, "station_alerts": 72, "sound_triggered": null } ] }; var audioElements = document.getElementsByTagName('audio'); $.each(alarmData.trigger, function(index, alart_value) { // update the status // once the sounds are played (once for each alarm), then update the status for each alarm triggered var countAlert = alarmData.alertCount; if (alart_value.sound_triggered == null || alart_value.sound_triggered === false) { audioElements[index].play(); // play the alert for first time audioElements[index].onended = function() { // once finished, then play it according the number of alerts from backend(for jsfiddle purpose we use local data source) if (index < --countAlert) { this.play(); } }; } }); // close foreach loop for alertData.trigger }) 

JSFIDDLE https://jsfiddle.net/Hashmat_Waziri/9t0sexo2/