网页背景音乐（图片+音乐）

萌神想

已于 2023-05-20 00:31:57 修改

阅读量124

点赞数 2

文章标签： javascript html css

于 2023-05-20 00:31:15 首次发布

本文链接：https://blog.csdn.net/sxwwudi/article/details/130775884

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放</title>
    <style>
        #music-icon {
            width: 50px;
            height: 50px;

            /* 这里放你的图片的地址 */
            background-image: url('./img/tb.png');
            
            background-size: cover;

            /* pointer是鼠标(英语：cursor)在图标上的状态为可点击状态 */
            cursor: pointer;

            /* 动画效果:旋转 周期时间:10s 速度方式:线性(匀速) 周期数：无限*/
            animation: rotate 10s linear infinite;

            /* 控制动画的播放状态，实现暂停和恢复动画 */
            /* （一开始是暂停的所以是paused） */
            animation-play-state: paused;
            /* 将图片旋转结束时的状态保持不变 */
            animation-fill-mode: forwards;

        }

        #music-icon.play {
            /* 添加图片旋转 */
            animation-play-state: running;
        }

        @keyframes rotate {

            /* 转个圈0°→360° */
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <!-- 图片放在<div>中是一件很爽的事情，方便设置样式和布局 -->
    <!-- 因为如果你用<img>元素的话，在css里面你还要为每个图片单独设置样式和布局属性 -->
    <!-- 放在<div>里面可以使用css的background-image属性设置背景图片，既可以让你随便调这张图片风格什么什么的，也方便交互效果 -->
    <!-- 省流：图片放<div>比较方便，不太麻烦 -->
    <div id="music-icon"></div>

    <!-- 插入音乐方式很多钟，具体的自己查资料，这里loop是播放后再播放的意识 -->
    <!-- src里放你的音乐地址 -->
    <!-- loop是播放完再播放（单曲循环） -->
    <audio id="music" src="./music/I Really Want to Stay at Your House - Samuel Kim,Lorien.mp3" loop></audio>

    <h1>这是一个背景音乐示例</h1>
    <p>在这里添加你的网页内容</p>

    <script>
        //图标控制
        var musicIcon = document.getElementById("music-icon");
        //音乐控制
        var music = document.getElementById("music");
        //转动/播放（开始是停止的）
        var isPlaying = false;
        //音量设置为0.2(volume取值:0~1)
        music.volume = 0.2

        //鼠标点击监听器
        musicIcon.addEventListener("click", function () {
            if (isPlaying) {
                //音乐暂停（js自带的函数）
                music.pause();
                //更新isPlaying为停止
                isPlaying = false;
                //移除 图标旋转类
                musicIcon.classList.remove("play");
            } else {
                //音乐播放（js自带的函数）
                music.play();
                //更新isPlaying为播放
                isPlaying = true;
                //添加 图标旋转类
                musicIcon.classList.add("play");
            }
        });

    </script>
</body>

</html>

效果图（实际你操作起来其实是有音乐的哈，这里我只是展示一下）：