html-----简易版音乐播放器

html-----音乐播放器

1.功能要求:设计一款基于HTML5音频技术的音乐播放器,要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换。
2.界面设计要求:

  • 仿CD图像
  • 音量调节进度条
  • 歌曲名称显示
  • 音乐播放器的相关按钮

2.1 仿CD图像:利用border-radius设置圆边角(这张图片必须是正方形图片不然不会是圆形的图片)

#CDimage img{
	border-radius:50%;
}

2.2音量调节:使用input可以调节音量

<!--音量调节进度条-->
<div>
<input type="range" min="0" max="10" step="1" />
</div>

function setVolume() {
    music.volume = volume.value;
}

2.3歌曲名称显示

<!--显示歌曲名称-->
<div>
当前正在播放: <span id="title">小夜曲</span>
</div>

2.4音乐播放器的相关按钮

播放/暂停按钮功能实现

<button id="toggleBtn" onclick="toggleMusic()">
<img src="image/play.png" width="50" height="50"/>
</button>
//音乐播放/暂停切换方法
function toggleMusic() {
     if (music.paused) {
          music.play();//播放音乐
     } else {
          music.pause();//暂停音乐
     }
}

3.代码如下:

<!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()"/>
        </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>

在这里插入图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值