坑爹的H5 audio一直有兼容性问题,特别是微信端ios和android自动播放问题,ios不能自动播放。我之前的解决方案是使用trigger 模拟用户点击实现ios也能自动播放。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>微信端音频自动播放</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> </head> <style type="text/css"> *{ margin: 0; padding: 0; } body{ overflow:hidden; } </style> <body> <audio src="http://mp3.haoduoge.com/s/2017-03-28/1490672173.mp3" loop="" id="audio"></audio> </body> <script type="text/javascript"> // 微信端控制播放音乐 document.addEventListener('WeixinJSBridgeReady',function(){//这里相当于加载音频文件 audio.play(); audio.pause(); }); setTimeout(function(){//模拟ajax完成后播放音乐 audio.play(); console.log('请带上您的耳机...'); },2000) //如果是PC端直接调用audio.play()即可播放音乐 </script> </html>
欢迎分享本文,转载请保留出处:前端ABC » 解决微信IOS不能自动播放音频问题