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

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. — Ehtesh Choudhury, Dec 05 '12 at 05:46
@Shurane i have added w3schools HTML5 Audio tryout link. I hope it will be helpful to check the issue i have mentioned. — Pintu Francis, Dec 05 '12 at 06:05
Have you considered using some player library that has fallbacks for this cases? like http://mediaelementjs.com/ — eric.itzhak, Dec 05 '12 at 06:28
@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. — Pintu Francis, Dec 05 '12 at 06:59
@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) — eric.itzhak, Dec 05 '12 at 07:22
@eric.itzhak i think the coming android versions will not support flash (Jelly bean).http://www.zdnet.com/blog/open-source/no-flash-for-android-4-1-jelly-bean-users/11433 — muhammed basil, Dec 05 '12 at 08:35
@eric.itzhak and the current chrome in ICS has stopped support for Flash. — Pintu Francis, Dec 05 '12 at 08:38

Pintu Francis · Accepted Answer · 2014-03-27T04:43:04.240

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

score 1 · Answer 2 · answered Aug 28 '13 at 12:15

1

This works for me:

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

answered Aug 28 '13 at 12:15

Leto III

303
2
8

score 0 · Answer 3 · answered Dec 17 '12 at 04:14

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.

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

3 Answers3

Linked