HTML(6)简易音乐播放器

最新推荐文章于 2024-02-15 21:09:53 发布

什么都不会…

最新推荐文章于 2024-02-15 21:09:53 发布

阅读量476

点赞数 9

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/qq_52187093/article/details/135502192

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html >
<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">
    <style type="text/css">
    body{

        background-color: rgb(92, 86, 86);/*颜色灰度*/
    }
    div{
        text-align: center;
        margin: 10px;
    }
    #CDImage img{
        border-radius: 50%;  /*圆形设置*/
    }
    .box{
        width: 350px;
        height: 500px;
        margin: 10px auto;
        background-color: blanchedalmond;
    }
    button{
        background: transparent;
        border: 0; 
    }

    </style>
    <title>音乐播放器设计与实现</title>
</head>
<body>
    <div class="box">
        <h3>简单音乐播放器</h3>
        <hr/>
        <audio id="audio" src="music/月光下的云海.mp3" preload><!--   初始的音乐 -->
        浏览器不支持
        </audio>
        <div id="CDImage">
            <img src="image/sky.jpg" alt=""> <!--  音乐的封面 -->
        </div>
        <!-- 音量调节 -->
        <div>
            <input id="volume" type="range" min="0" max="100" step="10" onchange="setVolume()"/>  <!-- 0-100 滑动一下为10 触发事件 SETVOLUME -->
        </div>
        <!-- 歌曲名字 -->
        <div>
            当前正在播放：<span id="title">小夜曲</span>
        </div>
        <!-- 播放控制 -->
        <div>
            <button onclick="lastMusic()"><img src="./image/previous.png" width="50px"></button>
            <button id="toggleBtn" onclick="toggleMusic()"><img src="./image/play.png" width="50px"></button>
            <button onclick="nextMusic()"><img src="./image/next.png" width="50px"></button>    <!-- 设置三个按钮的图片 -->
        </div>
        <script>
            var music = document.getElementById("audio");
            var volume = document.getElementById("volume ");
            var toggleBtn=document.getElementById("toggleBtn");
            var list = new Array("music/Serenade.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="./image/pause.png" width="50px">';
                }
                else
                {
                    music.pause();
                    toggleBtn.innerHTML='<img src="./image/play.png" width="50px">';
                }  //设置暂停键形状变化
                 
            }
            function nextMusic(){
                if(i==list.length-1)
                     i=0;   //最后一首换到第一首
                else
                    i++;        
                music.pause();
                music.src=list[i];
                title.innerHTML=titleList[i];
                music.play();
                toggleBtn.innerHTML='<img src="./image/pause.png" width="50px">';
            }
            function lastMusic(){
                if(i==0)
                    i=list.length-1;
                else
                    i--;
                music.pause();
                music.src=list[i];    //歌曲的地址
                title.innerHTML=titleList[i];  //显示歌曲的名字
                music.play();
                toggleBtn.innerHTML='<img src="./image/pause.png" width="50px">';
            }
        </script>
    </div>
</body>
</html>

运行结果：