我有一个mp3文件,我想在打开网站时自动播放。在同一页面上,有一个按钮(图标),如果点击它,“剪切”声音(实际上暂停它),如果你再次点击它,声音就会播放(从它停止的地方),依此类推……
HTML页面:
<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;
//}
}在Windows中,在所有主要浏览器(IE、FF、Chrome、Opera和Safari)上,打开网站时一切正常:要播放的歌曲会自动开始播放,并且可以听到(无需任何其他操作)。
相反,在Android上,无论是在操作系统的隐含浏览器上,还是在FF和Chrome上,我都面临着以下情况:我必须点击按钮(就像我想停止声音一样),然后再次点击(就像我想再听一次),这样歌曲才能开始播放。
我不明白为什么,尤其是为什么这种情况只发生在Android上。如果Android不支持mp3格式,我认为什么也听不到(尽管上面描述了一些小“技巧”)。
有没有黑客入侵?我是否遗漏了什么,或者我可以做些什么来解决这个问题?
非常感谢。
PS。你认为直接在javascript中创建和操作元素会有帮助吗?-尽管我也不知道如何做到这一点……
发布于 2016-03-14 02:54:45
原因是,移动浏览器的构建方式是,它们只允许在用户操作上播放声音或其他通过JS控制的东西,而不是自动。
有一个解决这个问题的方法,你可以使用一个库,例如"Howler.js“,它使用了声音精灵。所以你可以在一开始创建一个无声的声音文件。让用户点击一个按钮来访问应该在其上播放声音的网站。通过点击按钮,你可以“初始化”声音文件。您可以使用Howler播放声音精灵的一秒钟静音。此时,声音的播放是用户操作,您现在可以在所需长度的任何位置启动声音sprite文件,并且它仍然被识别为用户操作。
我希望我能解释一下,这样你就能明白我的意思了。
https://stackoverflow.com/questions/35970168
复制相似问题