audio自动播放遇到的问题

最新推荐文章于 2024-08-24 11:08:43 发布

vvvjack7

最新推荐文章于 2024-08-24 11:08:43 发布

阅读量530

点赞数

分类专栏： php laravel 文章标签： php laravel

本文链接：https://blog.csdn.net/vvvjack7/article/details/121406289

版权

php 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

laravel

5 篇文章 0 订阅

订阅专栏

audio自动播放遇到的问题

ios限制了自动播放视频、自动播放音频，必须有用户行为才可以播放

像背景音乐可以这样添加事件监听，在页面初始化后就可以自动播放

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 

document.addEventListener("WeixinJSBridgeReady", function () {
    document.getElementById('audio').play();
}, false)

但是像语音直播，在页面动态增加audio标签，这种情况无法控制在ios中自动播放。

后续找到方法再补充。

自己写的测试代码，一进入页面播放音频

浏览器模拟手机端可以用;

浏览器不行提示Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD;

ios可以;

安卓可以;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="description" content="test">
    <meta name="keywords" content="test">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="{{ asset('assets/admin/js/jquery.min.js') }}"></script>
</head>
<body>
    <div>
        <audio controls id="test_audio">
            <source src="{{asset('/uploadfile/2544457-nbound_1.wav')}}">
        </audio>
    </div>

    <script>
        $(function (){
            var testAudio = document.getElementById('test_audio');
            testAudio .play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                document.getElementById('test_audio').play();
            }, false)
        })
    </script>
</body>
</html>