js 背景音乐

最新推荐文章于 2024-01-08 10:49:58 发布

往者不可谏, 来者犹可追

最新推荐文章于 2024-01-08 10:49:58 发布

阅读量1.4k

点赞数 4

分类专栏： html文件文章标签： javascript

本文链接：https://blog.csdn.net/qdcainiao/article/details/109585533

版权

html文件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js "></script>
</head>

<body>
    <div>
        <p class="open_music_div" style="display: none"><a href="javascript:void(0)" onclick="openmusic()"
                class="f85">开启音乐 </a></p>
        <p class="close_music_div"><a href="javascript:void(0)" onclick="pauseAuto()" class="f85">关闭音乐
            </a></p>
        <audio style="display:none; height: 0" id="bg-music" preload="auto"
            src="https://sucai.suoluomei.cn/sucai_zs/video/20191106172238-xiaoguojiang.mp3" loop="loop"></audio>
    </div>
</body>
<script>
    // 存在问题：在微信上可以自动播放，但在chrome浏览器上不能自动播放
    // 原因是Chrome 66为了避免标签产生随机噪音禁止没有交互前使用js进行播放
    
    //音乐自动播放
    $(document).ready(function () {
        autoPlayMusic();
        audioAutoPlay();
    });


    // 开启音乐
    function openmusic() {
        autoPlayMusic();
        audioAutoPlay();
        $(".close_music_div").css({
            "display": "block"
        });
        $(".open_music_div").css({
            "display": "none"
        });
    }

    // 关闭音乐
    function pauseAuto() {
        var audio = document.getElementById('bg-music');
        audio.pause();
        $(".close_music_div").css({
            "display": "none"
        });
        $(".open_music_div").css({
            "display": "block"
        });
    }

    function audioAutoPlay() {
        var audio = document.getElementById('bg-music');
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    // 音乐播放
    function autoPlayMusic() {
        // 自动播放音乐效果，解决浏览器或者APP自动播放问题
        function musicInBrowserHandler() {
            musicPlay(true);
            document.body.removeEventListener('touchstart', musicInBrowserHandler);
        }
        document.body.addEventListener('touchstart', musicInBrowserHandler);
        // 自动播放音乐效果，解决微信自动播放问题
        function musicInWeixinHandler() {
            musicPlay(true);
            document.addEventListener("WeixinJSBridgeReady", function () {
                musicPlay(true);
            }, false);
            document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
        }
        document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
    }

    function musicPlay(isPlay) {
        var media = document.querySelector('#bg-music');
        if (isPlay && media.paused) {
            media.play();
        }
        if (!isPlay && !media.paused) {
            media.pause();
        }
    }
</script>

</html>

往者不可谏, 来者犹可追

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
js 背景音乐

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js "></script></head><body>
复制链接

扫一扫

专栏目录