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

Question

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

Somatology

I got the same issue in my project. – Ringent

Me too had a similar issue, hope the community could help. – Lamothe

Wouldn't it be in your best interest to also post a demo url to the HTML5 app so others can test it? At least until someone is able to answer it. It's a bit hard to reproduce otherwise. – Merrymaker

@Shurane i have added w3schools HTML5 Audio tryout link. I hope it will be helpful to check the issue i have mentioned. – Somatology

Have you considered using some player library that has fallbacks for this cases? like mediaelementjs.com – Speech

@Speech i tried the link. But it also fails to replay. – Ringent

@eric.itzhak, I also tried playing mediaelementjs in both tablets (Android 4.0.4 and 4.0.3) but issue remains the same in tablet with Android 4.0.4. Playing audio the first time only.Need to refresh page to replay it. – Somatology

@muhammedbasil i believe you can force flash fallback with mediaelementjs, you might try use flash for versions u find broken ( i assume flash is supported in android) – Speech

@Speech i think the coming android versions will not support flash (Jelly bean).zdnet.com/blog/open-source/… – Ringent

@Speech and the current chrome in ICS has stopped support for Flash. – Somatology

Answer 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;  
}

Somatology

Answer 2

This works for me:

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

Podium

Answer 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.

Somatology