如何播放页面上的每个音频元素（HTML，JQuery，Javascript）

Question

好的，我的页面上有多个音频元素。 我正在寻找一种播放每个音频的方法，从第一个开始，等待它完成播放，然后继续播放下一个音频元素，直到最后一个元素。 有什么办法可以做到这一点？ 谢谢！

编辑：

我无法添加代码示例，因为音频元素都是由PHP动态添加的，因此在此之前它是一个空文件。

Answer 1

您可以通过将每个音频元素存储在队列中来实现。 假设您将每个元素存储在一个数组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);

Answer 2

基于@ liam-schauerman的答案，我实际上想出了以下解决方案：

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);          
             }                        
        });


    });
});

我只是盲目地编码了这个。 如果有人要详细说明为什么这样做，我将不胜感激。

Answer 3

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/