Javascript音频循环

Javascript audio loop

本文关键字：循环 音频 Javascript      更新时间：2023-09-26

我想在后台播放音频 3 次，3 次后音频将自动停止。我试过这段代码，但它不起作用。网页代码：

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

谢谢。

你可以尝试使用 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();
   }
};

试试这个：

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

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/

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>

注意：忽略错误

相关文章：