如何chrome页面下音乐自动播放问题

最新推荐文章于 2024-03-21 14:55:27 发布

G018_star sky♬

最新推荐文章于 2024-03-21 14:55:27 发布

阅读量516

点赞数 1

分类专栏： JS 文章标签： javascript html5 chrome

本文链接：https://blog.csdn.net/qq_42526440/article/details/113919815

版权

JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<audio id="a1" controls="controls" loop="loop">
    <source src="music/Blue%20Sky%20Athletics.mp3">
</audio>
<script>
    window.onload=function () {
        let oA=document.querySelector("#a1");
        let timer=null;
        function autoPlay() {
            if (oA.paused) { //如果暂停
                oA.paused=false;//设为不暂停
                oA.volume=0.5;//设置自动播放的初始音量
                oA.play();//调用play（）方法播放
            }else {//如果未暂停
                clearInterval(timer);//清掉定时器
            }
        }
        timer=setInterval(autoPlay,1);//用定时器触发autoplay自动播放
    }
</script>
</body>
</html>

ctrl+cv即可使用。

无报错版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onLoad=function () {
        let music = document.getElementById("vd");//获取ID
        console.log(music);
        console.log(music.paused);
    function toggleSound() {
        /*let music = document.getElementById("vd");//获取ID*/
        /*console.log(music);
        console.log(music.paused);*/
        if (music.paused) { //判读是否播放
            music.paused=false;
            music.play(); //没有就播放
        }else
            {//如果未暂停
            clearInterval();//清掉定时器
        }
    }
    setInterval(toggleSound,1);
    }
</script>
<!--<script>
    var audio = document.querySelector('audio');
    audio.play();
</script>-->
<!--<iframe src="/music/Blue Sky Athletics.mp3" allow="autoplay" style="display:none" id="iframeAudio"></iframe>-->

<audio id="vd" controls="controls" loop="loop" autoplay="autoplay">

    <source src="music/Blue Sky Athletics.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。

</audio>
<!--<video id="videos" muted="muted" width="636" height="432" src="music/Blue Sky Athletics.mp3" autoplay="autoplay" loop></video>-->

<!--<embed src="music/Blue Sky Athletics.mp3" width="100%" height="100%" loop="true" autostart="true">-->
</body>
</html>

选择框版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio和video在Chrome下的自动播放解决方案</title>

    <style>
        /*模态框的样式*/
        .modal {
            position: fixed;
            font-family: Arial, Helvetica, sans-serif;
            top:0;
            right:0;
            bottom:0;
            left:0;
            background:rgba(0,0,0,0.8);
            z-index:99999;
            opacity:1;
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: auto;
        }
        .none{
            opacity: 0;
            pointer-events: none;
        }
        .modal > div {
            width:400px;
            position: relative;
            margin:10% auto;
            padding:5px 20px 13px 20px;
            border-radius:10px;
            background:#fff;
            background: -moz-linear-gradient(#fff, #999);
            background: -webkit-linear-gradient(#fff, #999);
            background: -o-linear-gradient(#fff, #999);
        }
        .yes,.no {
            background:#606061;
            color:#FFFFFF;
            line-height:25px;
            position: absolute;
            right: -12px;
            text-align: center;
            top: -10px;
            width:24px;
            text-decoration: none;
            font-weight: bold;
            -webkit-border-radius:12px;
            -moz-border-radius:12px;
            border-radius:12px;
            -moz-box-shadow:1px 1px 3px #000;
            -webkit-box-shadow:1px 1px 3px #000;
            box-shadow:1px 1px 3px #000;
        }
        .no{
            right: 24px;
        }
        .yes:hover, .no:hover{ background:#00d9ff;}
    </style>

    <script>
        window.onload=function () {
            let oA=document.querySelector("#a1");

            let oModal=document.querySelector("#modal");
            let oYes=document.querySelector("#yes");
            let oNo=document.querySelector("#no");

            let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

            //chrome下的判断
            if (userAgent.indexOf("Chrome") > -1){//判断是否是Chrome浏览器
                //alert("我是 Chrome");
                oModal.className="modal";
                oYes.onclick=function () {//选择是
                    oModal.className="none";//隐藏模态框
                    /* let timer=null; */
                    function autoPlay() {//自动播放函数
                        if (oA.paused) { //判读是否暂停
                            oA.paused=false;
                            /* oA.volume=0.1; */
                            oA.play();
                        }else {
                            clearInterval(/* timer */);
                        }
                    }
                    timer=setInterval(autoPlay,1);//执行自动播放
                };
                oNo.onclick=function () {//选择否
                    oModal.className="none";//隐藏模态框，无自动播放
                }
            }
        }
    </script>
</head>
<body>
<!--音频-->
<audio id="a1" controls="controls" autoplay="autoplay" src="music/Blue Sky Athletics.mp3"></audio>

<!--模态框-->
<div id="modal" class="none">
    <div>
        <a id="yes" href="#" title="YES" class="yes">是</a>
        <a id="no" href="#" title="NO" class="no">否</a>
        <h2>提示信息：</h2>
        <p>是否允许本页中的音/视频自动播放？</p>
    </div>
</div>

</body>
</html>