HTML5 audio not playing multiple times in Android 4.0.4 device Native Browser

问题

I am currently working on an HTML5 project.

There is an issue on playing same audio file multiple times in the same page in Android native browser. The issue is specifically noticed on Android ICS 4.0.4 version. In this version the audio will be played once, but when initiated again audio will not be played. The same thing is working perfectly in Android ICS 4.0.3 Version and on the newer 4.1.1 version.

Tested Devices:
Samsung Galaxy Tab (Android 4.0.4): Playing first time only then it doesn't play
HTC One (Android 4.0.4): Playing first time only then it doesn't play
Sony Tab (Android 4.0.3): Perfectly fine, playing audio multiple times
HTC Sensation (Android 4.0.3): Perfectly fine, playing audio multiple times
Samsung Nexus Phone (Android 4.1.1): Perfectly fine, playing audio multiple times

Based on some research on Internet it seems like an issue with Android version 4.0.4

Please help me to find some solution to make it work in all devices.

Please use this W3 Schools HTML5 audio link for try outs

回答1:

I got a working solution..

The problem was in Android 4.0.4 browser when audio is played once(ended) then the seek time will not be reset to starting position, it will stay at the end itself. So by setting currentTime = 0 after the audio ended will reset it to starting position and in this way we can play the same audio as many times as we want with out any page refresh.
Tested working perfectly in all devices.

HTML Code:

<audio id="movie_audio">
  <source src="my_audio_location/movie_audio.mp3" type='audio/mpeg; codecs="mp3"' />
  <source src="my_audio_location/movie_audio.ogg" type='audio/ogg; codecs="vorbis"' />  
</audio>

JavaScript Code:

var movie_audio = document.getElementById('movie_audio');  
movie_audio.addEventListener('ended', function(){  
  movie_audio.currentTime = 0;  
}

回答2:

This works for me:

var movie_audio = document.getElementById('movie_audio');  
movie_audio.addEventListener('ended', function(){  
   movie_audio.load(); 
});

回答3:

If the above solution doesn't work for you, try this one.

audio_element.addEventListener('timeupdate', function() {
 if (audio_element.currentTime >= ( audio_element.duration - 0.3 ) ) {
  audio_element.currentTime = 0;
  audio_element.pause();
 }
}, false);  

Note:We are setting the seekbar to starting position just before the audio end.

来源：https://stackoverflow.com/questions/13716731/html5-audio-not-playing-multiple-times-in-android-4-0-4-device-native-browser