Why won't my HTML5 audio loop?
问题：
|
|
The site is up at: http://ajf.me/stuff/eva at the time of writing. The source code is this:
<!DOCTYPE html>?
<html style="height: 100%;">?
<head>?
<title>eva</title>?
</head>?
<body style="background-color: black; background-image: url('eva.png'); background-repeat: no-repeat; background-position: center center; height: 100%; margin: 0px; padding: 0px;">?
<audio autoplay loop>?
? ? <source src="eva.mp3" type="audio/mpeg" />?
? ? <source src="eva.ogg" type="audio/ogg" />?
? ? <source src="eva.wav" type="audio/wav" />?
</audio>?
</body>?
</html>?
The audio plays fine in Chrome, IE9, and Firefox, but does not loop in the latter. The audio file can't be malformed, as it was produced by Audacity. Is there any other explanation for why it doesn't loop?
|
回答：
in Chrome, IE9? You can just do this
<audio autoplay loop>
Firefox has not yet implemented loop. I would check that you have the newest version of Firefox, but I believe this is still the case. You can check whether or not it is supported with:
if (typeof new Audio().loop == 'boolean')?
If that evaluates to true, then loop is implemented in the browser. If false, then it is not. Add that to your javascript, put an id tag on your audio and use that if statement to check for loop.
if !(typeof new Audio().loop == 'boolean') {?
? ? audioToLoop = document.getElementById('audio_id_here');?
? ? audioToLoop.addEventListener('ended', function () {?
? ? ? ? this.currentTime = 0;?
? ? ? ? this.play();?
? ? }, false);?
}?
Then it should loop even in unsupported browsers。