【直接使用】前端音乐播放控制小按钮现成案例

mukeycn

已于 2024-03-17 16:17:27 修改

阅读量403

点赞数 10

分类专栏：网页开发文章标签： css css3 javascript 前端小程序 jquery

于 2024-03-17 16:15:39 首次发布

本文链接：https://blog.csdn.net/mumucun/article/details/136773603

版权

网页开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript实现一个简单的音乐播放控制功能，包括音乐播放/暂停、图片切换（musicOn.png/musicOff.png）以及在播放时图片的旋转效果。代码示例和下载链接也提供参考。

摘要由CSDN通过智能技术生成

在音乐播放的时候musicOn.png图片选择，点击后音乐停止，图片为musicOff.png，点击musicOff.png后音乐继续播放，并且在音乐播放时musicOn.png图片还可以旋转。如下视频：

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐控制</title>
<style>
    #musicControl {
        cursor: pointer;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 9999; /* 设置 z-index 为一个较大的值 */
    }

    #musicImage {
        transition: transform 0.5s ease-in-out;
    }

    .rotate {
        animation: rotateMusic 2s linear infinite;
    }

    @keyframes rotateMusic {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
</style>
</head>
<body>

<div id="musicControl">
    <img id="musicImage" src="musicOn.png" alt="音乐开启">
</div>

<audio id="audio" controls autoplay loop>
    <source src="your_music_file.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<script>
    var audio = document.getElementById("audio");
    var musicImage = document.getElementById("musicImage");
    var isPlaying = true;

    function toggleMusic() {
        if (isPlaying) {
            audio.pause();
            musicImage.src = "musicOff.png";
            musicImage.classList.remove("rotate");
        } else {
            audio.play();
            musicImage.src = "musicOn.png";
            musicImage.classList.add("rotate");
        }
        isPlaying = !isPlaying;
    }

    audio.addEventListener("pause", function() {
        musicImage.classList.remove("rotate");
    });

    document.getElementById("musicControl").addEventListener("click", toggleMusic);

    window.addEventListener("load", function() {
        audio.play();
        musicImage.classList.add("rotate");

        // 将音频控制器移动到屏幕之外,这样就在屏幕上只显示播放按钮了
        audio.style.position = 'absolute';
        audio.style.left = '-9999px';
        audio.style.top = '-9999px';
    });
</script>

</body>
</html>

欢迎大家提出宝贵意见互相讨论。

使用案例：https://download.csdn.net/download/mumucun/84127663

mukeycn

关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
【直接使用】前端音乐播放控制小按钮现成案例

在音乐播放的时候musicOn.png图片选择，点击后音乐停止，图片为musicOff.png，点击musicOff.png后音乐继续播放，并且在音乐播放时musicOn.png图片还可以旋转。欢迎大家提出宝贵意见互相讨论。
复制链接

扫一扫