Javascript 音频循环

Question

我想在后台播放音频 3 次，3 次后音频将自动停止。 我已经尝试过这段代码，但它没有用。 HTML 代码：

<audio id='beep' controls>
<source src="beep-02.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

JAVASCRIPT：

var count = 1
document.getElementById('beep').addEventListener('ended', function(){
   this.currentTime = 0;
   if(count <= 3){
      this.play();
   }
   count++;
}, false);

谢谢。

Answer 1

您可以尝试使用 onended： 参考：http://www.w3schools.com/tags/av_event_ended.asp 或者您可能需要在再次调用 play() 之前增加计数

var count = 1;
var audio = document.getElementById('beep');
audio.onended = function() {
    if(count <= 3){
      count++;
      this.play();
   }
};

Answer 2

试试这个：

var count = 0;
document.getElementById('beep').addEventListener('ended', function(){
   if(count <= 3){
      this.play();
      count++;
   }
}, false);

Answer 3

1) 如果您确实想在后台播放，您还需要添加 autoplay 属性。

<audio id='beep' controls autoplay>
  <source src="beep-02.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

2) 这应该与您编写的一样工作，但在某些浏览器中，如果您愿意，可能需要重置播放头：this.currentTime = 0

JAVASCRIPT：

var count = 0
document.getElementById('beep').addEventListener('ended', function(){
  count++;
  if (count < 3) {
    this.currentTime = 0; // may be needed in some browsers to reset
    this.play();
  }
}, false);

为了记录，我之前建议使用loop 属性并在ended 触发3 次后停止，但是当我测试它时，loop 阻止ended 永远触发。

示例 http://jsfiddle.net/jorw3yfn/

Answer 4

jQuery(document).ready(function($) {
  // the audio loop trick is "alertCount" value, try playing around with it
  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

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<audio controls id="audio">
    <source src="http://soundbible.com/grab.php?id=1599&type=mp3" type="audio/mpeg">
</audio>

注意：忽略错误