解决html5 audio iphone,ipd，safari不能自动播放问题

html audio 在iPhone，ipd,safari浏览器不能播放是有原因滴(在safri on ios里面明确指出等待用户的交互动作后才能播放media，也就是说如果你没有得到用户的action就播放的话就会被safri拦截)找了很多资料都没有解决，不过最终在国外网站通过翻译解决问题，希望能帮到没有解决此问题的童鞋附带源码如下：黑色部分表...

adknuf1202

1556人浏览 · 2015-01-08 21:02:00

adknuf1202 · 2015-01-08 21:02:00 发布

html audio 在iPhone，ipd,safari浏览器不能播放是有原因滴
(在safri on ios里面明确指出等待用户的交互动作后才能播放media，也就是说如果你没有得到用户的action就播放的话就会被safri拦截)

找了很多资料都没有解决，不过最终在国外网站通过翻译解决问题，希望能帮到没有解决此问题的童鞋

附带源码如下：黑色部分表示重点突出

var g_audio = window.g_audio = new Audio(); //创建一个audio播放器
var g_event = window.g_event = new
function() {
    var events = ['load', 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'mediachange'];
    g_audio.loop = false;
    g_audio.autoplay = true;
    g_audio.isLoadedmetadata = false;
    g_audio.touchstart = true;
    g_audio.audio = true;
    g_audio.elems = {};
    g_audio.isSupportAudio = function(type) {
        type = type || "audio/mpeg";
        try {
            var r = g_audio.canPlayType(type);
            return g_audio.canPlayType && (r == "maybe" || r == "probably")
        } catch(e) {
            return false;
        }
    };
    g_audio.push = function(meta) {
        g_audio.previousId = g_audio.id;
        g_audio.id = meta.song_id;
        g_audio.previousSrc = g_audio.src;
        g_audio.previousTime = 0.00;
        g_audio.src = g_audio.currentSrc = meta.song_fileUrl;
        g_audio.isLoadedmetadata = false;
        g_audio.autobuffer = true;
        g_audio.load();
        g_audio.play();
        if (g_audio.previousSrc !== g_audio.src) {
            g_audio.play();
        }
    };
    for (var i = 0,
    l = events.length; i < l; i++) { (function(e) {
            var fs = [];
            this[e] = function(fn) {
                if (typeof fn !== 'function') {
                    for (var k = 0; k < fs.length; k++) {
                        fs[k].apply(g_audio);
                    }
                    return;
                }
                fs.push(fn);
                g_audio.addEventListener(e,
                function() {
                    fn.apply(this);
                });
            };
        }).apply(this, [events[i]]);
    }
    this.ended(function() { //播放结束
    });
    this.load(function() { //加载
        this.pause();
        this.play();
    });
    this.loadeddata(function() {
        this.pause();
        this.play();
    });
    this.loadedmetadata(function() {
        this.isLoadedmetadata = true;
    });
    this.error(function() { //请求资源时遇到错误
    });
    this.pause(function() { //歌曲暂停播放
    });
    this.play(function() { //歌曲播放
    });
};
$$$$(document).ready(function() {
    if (/i(Phone|P(o|a)d)/.test(navigator.userAgent)) {
        $$$$(document).one('touchstart',
        function(e) {
            g_audio.touchstart = true;
            g_audio.play();
            g_audio.pause();
            return false;
        });
    }
});
audio使用: $$$$("#main").unbind("click").bind("click",
function() {
    //gid 表示歌曲id,只是一个表示，没有值不影响播放
    //song_fileUrl :播放歌曲地址，不能为空，有效地址
    g_audio.elems["id"] = gid;
    g_audio.push({
        song_id: gid,
        song_fileUrl: json.URL
    });
}); //绑定事件

方式二：

版权归作者所有，任何形式转载请联系作者。
作者：U_U（来自豆瓣）
来源：https://www.douban.com/note/527250492/

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.w3school.com.cn/i/song.mp3';
    })();
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/interdrp/p/4211883.html

华为开发者联盟HarmonyOS专区

鸿蒙生态一站式服务平台。

更多推荐

【grafana】使用教程

华为开发者联盟HarmonyOS专区

【PX4-AutoPilot教程-开发环境】使用VMware虚拟机安装Ubuntu系统并搭建PX4开发环境（ROS+mavros+jMAVSim+gazebo+QGC+QT）

学习PX4开发需要先配置好开发环境，对于新手推荐使用VMware虚拟机搭建Ubuntu系统，并下载PX4源码，配置好编译环境和工具链（ROS操作系统+mavros通信包+jMAVSim仿真+gazebo仿真+QGC地面站+QT开发平台）。教程中使用的是Ubuntu18.04系统（官方推荐使用版本），PX4固件版本为v1.13.0，飞控板为pixhawk2.4.8版本。