Javascript audio loop

问题

I want to play an audio in background 3 times and after 3 times the audio will stop automaticlly. I've tried this code and it did not work. HTML CODE:

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

Thanks.

回答1:

You could try using onended: Reference: http://www.w3schools.com/tags/av_event_ended.asp or it could be you need to increment your count before you call play() again

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

回答2:

Try this:

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

回答3:

1) If you do want to to play in the background you'll need to add an autoplay attribute as well.

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

2) This should work pretty much as you authored but in some browsers may require resetting the playhead if you will: 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);

For the record I had previously proposed using the loop attribute and simply stopping after ended fired 3 times, but when I tested it, loop prevents ended from ever firing.

Example http://jsfiddle.net/jorw3yfn/

回答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>

Note: Ignore the error

来源：https://stackoverflow.com/questions/34930534/javascript-audio-loop