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