H50081：背景音乐按钮创建

1，

    <!-- 音乐按钮 -->
    <div class="bgmusic generalF"></div>
    <!-- 音乐模块 -->
    <audio id="myAudio" hidden="true" autoplay="autoplay" loop="loop" preload="auto" controls="controls" src="home/res/bg.mp3"></audio>

2，

.bgmusic {
    z-index: 2;
    width: 5vh;
    height: 5vh;
    bottom: 2vh;
    left: calc(2vh);
    background-image: url("../images/musN.png");
    /* background-color: green; */
}
.bgmusic.active {
    background-image: url("../images/musA.png");
}

3，

        // 创建音频
        // var aud1 = document.createElement("audio");
        // aud1.id = "myAudio", 
        // aud1.src = "page/res/audio.mp3", 
        // aud1.controls = "controls",
        // aud1.autoplay = "autoplay",
        // aud1.loop = "loop",
        // aud1.style.display = "none",
        // document.body.appendChild(aud1);



        // // 背景音乐模块
        // $(".modMus").on("click", function (e) {
        //     if ($first(".modMus").classList.contains("active")) {
        //         $first(".modMus").classList.remove("active");
        //         document.getElementById("myAudio").pause();
        //     } else {
        //         $first(".modMus").classList.add("active");
        //         document.getElementById("myAudio").play();
        //     }
        // });

标签：背景音乐,aud1,H50081,modMus,background,按钮,active,document,first
来源： https://www.cnblogs.com/eliteboy/p/15993228.html