html5 audio不能自动播放,HTML5 audio标签在ios系统上不能正常自动播放如何解决

本篇教程探讨了HTML5 audio标签在ios系统上不能正常自动播放如何解决，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

由于 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 一下

html>

Fake auto play html audio in iOS Safari the right way

在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式

核心原理: 通过一个用户交互事件来主动 play 一下 audio

(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.w3school.com.cn/i/song.mp3‘;

})();

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！