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

【问题标题】：How to play each audio element on a page (HTML, JQuery, Javascript)如何播放页面上的每个音频元素（HTML、JQuery、Javascript）
【发布时间】：2015-03-15 17:57:23
【问题描述】：

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

编辑：

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

【问题讨论】：

也许你到目前为止的代码示例会很棒。
这听起来像是一个不费吹灰之力的问题。请发布一些代码以证明您对您想要的东西有一个初步的想法，我们无法为您编写代码。

标签： javascript jquery html audio

【解决方案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);

【讨论】：

【解决方案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);          
             }                        
        });


    });
});

我只是盲目地编码。如果有人能详细说明以及为什么会这样，我将不胜感激。

【讨论】：

audioElements 这里是每个 HTML5
@LiamSchauerman 不，哈哈，我明白关于递归的部分（但谢谢）。我想知道为什么它需要这两个功能才能正常工作，即使它们本质上做同样的事情。
所有你需要在你的就绪块中调用的是 playNext(index)

【解决方案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/

【讨论】：