Hack for playing mp3 on Android?
Question
I have a mp3 file that I want to play automatically when opening the website. On the same page, there is a button (icon) that, if clicked on, "cuts" the sound (actually pauses it) and if you click it again, the sound is played (from where it stopped) and so on...
HTML page:
<body>
...
...
<audio id="sound" src="<?php echo $song; ?>" autoplay="autoplay" loop="loop"></audio>
<div id="sound_button" onClick="playpause()"><img id="snd_btn" src="/images/On32.png" /></div>
...
...
JavaScript:
function playpause() {
var snd = document.getElementById("sound");
var snd_btn = document.getElementById("sound_button");
snd.muted = !snd.muted;
//var snd_mut = 0;
if(snd.muted){
snd_btn.innerHTML = "<img src='/images/Off32.png' />";
snd.pause();
}
else {
snd_btn.innerHTML = "<img src='/images/On32.png' />";
snd.play();
}
//if (snd_mut != 0) {
//snd.innerHTML="<embed src='<?php echo $song; ?>' hidden='true' autostart='true' loop=true>";
//snd_mut = 0;
//}
//else {
//snd.innerHTML="<embed src='<?php echo $song; ?>' hidden='true' autostart='false' loop=true>";
//snd_mut = 1;
//}
}
In Windows, on all major browsers (IE, FF, Chrome, Opera and Safari) when opening the website everything works fine: the song that is meant to play starts automatically and can be heard (without any other action).
On Android instead, both on the implicit browser of the OS and on FF and Chrome, I face the following situation: I have to click the button (as if I want to stop the sound) and then click it again (as if I want to hear it again) so that the songs starts.
I do not understand why and especially why this happens only on Android. if Android hadn't supported mp3 formats, I think nothing should be heard (in spite the little "trick" described above)..
Is there any hack? Did I miss anything or what could I do to fix the problem?
Many thanks.
PS. Do you think that creating and manipulating the element directly in javascript could help? - although I do not know very well how to do this, either...
1 answers
solution1
0 2016-03-13 18:54:44
The reason is, that mobile browsers are built in such a way, that they allow such things like playing sounds or other things controlled via JS only on user action not automatically.
There is a hacky way to get around this problem, you could use a library for example "Howler.js" which uses sound sprites . So you could create a sound file with silence in the beginning. Let the user click a button to visit the website on which the sound should be played. And with the click on the button you could "initialize" the sound file. You use Howler to play one silent second of the sound sprite. At this moment the playing of the sound was a user action, with Howler you can now start the sound sprite file at any position for the desired length and it is still recognized as a user action.
I hope I could explain it so you can understand what I mean.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.