您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

解决iphone下无法自动播放音乐问题

时间：02-02来源：作者：点击数：19

由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio，下面两种方法均可实现自动播放，但多少都有些不完美，根据场景自己选择。

方法一：

如果是微信内置浏览器下访问，可借助微信的js接口方法，iOS和Android都适用。完美实现

废话不多说，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,height=device-height,maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>
<audio id="audio" autoplay="autoplay" loop="loop" ><source src="js/summer.mp3"></audio>
<div class="main">
<div class="content">
  <div>自动播放背景音乐：微信客户端访问，适用IOS和Android（直接用Safari访问可能无效）</div>    
</div>
</div>
</body>
<script>
	var media = document.getElementById("audio");
	wx.config({
		//如果没有必要实现微信接口相关处理，下面配置可设置为空（必须要有）；如果有微信接口相关实现，自己补充完整，不会冲突
		debug: false, //false
		appId: '',
		timestamp:'',
		nonceStr: '',
		signature: '',
		jsApiList: ''
	});

	wx.ready(function () {
		media.play();	//利用wx.ready方法初始化时，播放音乐，可绕过iOS的限制
	});
</script>
</html>

方法二：（转）

ake auto play html audio in iOS Safari the right way

由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio.

这个坑相信大家都已经踩过了, 在 iOS 9 没出现以前, 这样的 hack 方案还是妥妥的.

但 iOS 9 出现后, 发现这个方案"失效"了.

没有办法, 看来是时候升级一下 hack 方案了, 于是仔细看了下 audio 的事件.

对于能够自动播放时事件的顺序如下

loadstart -> loadedmetadata -> loadeddata -> canplay -> play -> playing

对于不能自动播放时触发的事件因系统版本不同而不同

* iPhone5 iOS 7.0.6 loadstart

* iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay

最终发现相比原来的 hack 方案, 对于 iOS 9 还需要额外的 load 一下, 否则直接 play 不能让 audio 开始播放.

audioEl.load(); // iOS 9

audioEl.play(); // iOS 7/8 仅需要 play 一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Fake auto play html audio in iOS Safari the right way</title>
</head>
<body>
    <h1>在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式</h1>
    <p>核心原理: 通过一个用户交互事件来主动 play 一下 audio</p>
    <br>
    <br>
    <br>
    <audio id="bgmusic" autoplay preload loop controls></audio>
    <script>
    (function() {
        function log(info) {
            console.log(info);
            // alert(info);
        }
        function forceSafariPlayAudio() {
            audioEl.load(); // iOS 9   还需要额外的 load 一下, 否则直接 play 无效
            audioEl.play(); // iOS 7/8 仅需要 play 一下
        }

        var audioEl = document.getElementById('bgmusic');

        // 可以自动播放时正确的事件顺序是
        // loadstart
        // loadedmetadata
        // loadeddata
        // canplay
        // play
        // playing
        // 
        // 不能自动播放时触发的事件是
        // iPhone5  iOS 7.0.6 loadstart
        // iPhone6s iOS 9.1   loadstart -> loadedmetadata -> loadeddata -> canplay
        audioEl.addEventListener('loadstart', function() {
            log('loadstart');
        }, false);
        audioEl.addEventListener('loadeddata', function() {
            log('loadeddata');
        }, false);
        audioEl.addEventListener('loadedmetadata', function() {
            log('loadedmetadata');
        }, false);
        audioEl.addEventListener('canplay', function() {
            log('canplay');
        }, false);
        audioEl.addEventListener('play', function() {
            log('play');
            // 当 audio 能够播放后, 移除这个事件
            window.removeEventListener('touchstart', forceSafariPlayAudio, false);
        }, false);
        audioEl.addEventListener('playing', function() {
            log('playing');
        }, false);
        audioEl.addEventListener('pause', function() {
            log('pause');
        }, false);

        // 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
        // 因此我们通过一个用户交互事件来主动 play 一下 audio.
        window.addEventListener('touchstart', forceSafariPlayAudio, false);

        audioEl.src = 'http://www.cdsy.com.cn/i/song.mp3';
    })();
    </script>
</body>
</html>