Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 811
Pintu Francis Avatar asked Dec 05 '12 05:12

Pintu Francis


2 Answers

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;  
}
like image 82
Pintu Francis Avatar answered Nov 17 '22 13:11

Pintu Francis


This works for me:

var movie_audio = document.getElementById('movie_audio');  
movie_audio.addEventListener('ended', function(){  
   movie_audio.load(); 
});
like image 1
Le chat du rabbin Avatar answered Nov 17 '22 13:11

Le chat du rabbin