HTML5新增了video元素和audio元素,替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法。这次的一个项目,产品经理要求手机加载开始时播放音乐,想到播放音乐,又是在ios和android平台,那audio元素必然是首选。
audio:标签定义声音,比如音乐或其他音频流。
接下来测试了,
测试一:
<audio autoplay="autopaly" loop="loop" src="1.mp3"></audio>
发现在chrome跑的很欢,但是部署到线上手机访问就懵逼了,等啊等的,老半天没有声音了……
测试二(加段JS试试看):
<script>
(funtion(){
var $audio = new Audio();
$audio.src = '1.mp3';
$audio.play();
})();
</script>
在chrome跑的很欢,Android平台上也跑的很欢,于是乎有点小傲娇了,用ios跑下……猜的不错懵逼了,几个意思几个意思……
终于在https://alexgibson.github.io/offlinewebaudio/上面找到答案了(^_^)(^_^)
连苹果的官方文档网页都搜出来了,不能自动播放。网上虽然有很多办法例子绕过去,不过都不一定有用。还是加在页面的touchstart上一次,好,也符合苹果规定
触屏即播,整个html都是播放按钮,在用户看来几乎等于立即播放。
(firsttaped = 0 用来标记第一次触屏未发生。)
var audio = document.getElementById('pageaudio');
audio.oncanplay = playmusic();
var firsttaped = 0;
function playmusic(){
$('html').on('touchstart',function(){
if(firsttaped == 0){
audio.play();
firsttaped = 1;
}
});
};
或者
$('html').one('touchstart',function(){
audio.play();
});
$("body").one("touchstart",
audio.play();
});