文章目录

在使用phonegap开发一个应用时需要使用到HTML5的Audio来播放一个提示音,但是在有的Android手机发现只能播放器一次,后台测试多个机器后确定BUG在Android 4.0.4中发生。

1
2
3
4
5
6
7
8
<audio src="res/ding.mp3" preload="auto" id='ding_audio'></audio>
<button onclick='play()'>播放提示音</button>
<script type="text/javascript">
var audio = document.getElementById('ding_audio');
function play(){
audio.play();
}
</script>

以上代码在4.0.4中点击按钮第一次会有声音,但是之后屏幕点碎也不会有声音了。

这是Android 4.0.4中webkit内核本身的一个BUG,如果要兼容Android4.0.4我们的解决办法就是,重新load音频资源,或重新创建一个新的Audio对象。

将以上代码改造下,每次播放的时候就去重新load一次。
1
2
3
4
5
6
7
8
9
10
11
12
13
<audio src="res/ding.mp3" preload="auto" id='ding_audio'></audio>
<button onclick='play()'>播放提示音</button>
<script type="text/javascript">
var audio = document.getElementById('ding_audio');
function play(){
if($.os.android && $.os.version=='4.0.4'){//这里可以做一下判断,通过UA来判断是否是androi4.0.4,判断可以用正则,我这里是使用的zepto提供的属性。
audio.load();//重新载入资源
audio.play();
}else{
audio.play();
}
}
</script>
第二种方法就是重新创建Audio,界面实际上原理和上面的方法一样
1
2
3
4
5
6
7
function play(){
var audio = new Audio(); // HTML5支持直接构造Audio对象
audio.src = 'res/ding.mp3';
audio.play();
}
$('#playbtn').on('click',play);

上面两种方法都是重新去load了歌曲资源,所以每次load都会有个网络请求过程,如果是用来播放提示音有时候可能会有延迟,所以这个只是个补丁,不是最好的解决办法,如果你是用phonegap或cordova之类的可以使用他们提供的Media插件。

此文是本站原创,转载请标注作者和链接出处!