admin管理员组文章数量:1568433
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>
版权声明:本文标题:html-----简易版音乐播放器 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1725774888a1041826.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论