音乐播放器

最新推荐文章于 2024-09-24 10:17:01 发布

JiaBr006

最新推荐文章于 2024-09-24 10:17:01 发布

阅读量372

点赞数 4

文章标签： html css

本文链接：https://blog.csdn.net/m0_71772930/article/details/136968009

版权

内容

实现音乐播放，以及上一曲或下一曲音乐的切换、显示歌曲名称、音量调节进度条的功能。

源代码

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="音乐播放器.css">

    <title>音乐播放器</title>

</head>



<body>

    <h3>音乐播放器的设计与实现</h3>

    <hr>

    <audio id="audio" src="music/单依纯-爱的回归线(Live).mp3" preload="">对不起，您的浏览器不支持HTML5音频播放</audio>

    <div id="CDimage">

        <img src="images/qq.jpg" alt="">

    </div>

    <!-- 音量调节进度条 -->

    <div>

        <input id="volume" type="range" min="0" max="1" step="0.1" onchange="setVolume()">

    </div>

    <!-- 显示歌曲名称 -->

    <div>当前正在播放：<span id="title">爱的回归线</span></div>

    <!-- 音乐播放器按钮 -->

    <div>

        <button onclick="lastMusic()"><img src="images/previous.png" alt="" width="50" height="50"></button>

        <button id="toggleBtn" onclick="toggleMusic()"><img src="images/play.png" alt="" width="50"

                height="50"></button>

        <button onclick="nextMusic()"><img src="images/next.png" alt="" width="50" height="50"></button>

       

    </div>



    <script>

        var music = document.getElementById("audio");

        var volume = document.getElementById("volume");



        var toggleBtn = document.getElementById("toggleBtn");



        var list = new Array("music/单依纯-爱的回归线(Live).mp3", "music/EndlessHorizon.mp3", "music/月光下的云海.mp3");

        var titleList = new Array("爱的回归线", "无尽的地平线", "月光下的云海");

        var i = 0;



        function setVolume() {

            music.volume = volume.value;

        }

        function toggleMusic() {

            if (music.paused) {

                music.play();

                toggleBtn.innerHTML = '<img src="images/pause.png" width="50" height="50"/>';

            } else {

                music.pause();

                toggleBtn.innerHTML = '<img src="images/play.png" width="50" height="50"/>';

            }

        }

        // 切换下一首歌曲

        function nextMusic() {

            if (i == list.length - 1)

                i = 0;

            else

                i++;

            music.pause();

            music.src = list[i];

            title.innerHTML = titleList[i];

            music.play();



        }

        // 切换上一首歌曲

        function lastMusic() {

            if (i == 0)

                i = list.length - 1;

            else

                i--;

            music.pause();

            music.src = list[i];

            title.innerHTML = titleList[i];

            music.play();



        }

    </script>

</body>



</html>

CSS样式

div {
  text-align: center;
  margin: 10px;
}
#CDimage img{
    border-radius: 50%;
    width: 200px;
    height: 200px;
}
button{
    background: transparent;
    border: 0;
    outline: 0;
}