音乐播放器的设计与实现 功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示
本地资源在谷歌浏览器上是无法快进的。这个是重点!!!有很多解决方法，我直接用火狐就ok了
https://www.gaitubao.com/# 改图宝链接 用于修改歌曲头像 大小标准显示才正常 我用的大小为300，300
我用的图标全都来自iconfont Iconfont-阿里巴巴矢量图标库
贴上代码 每一行都有注释 包括命名 有问题 欢迎评论 或者询问 QQ1099256274
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.musicPlayer{
width: 670px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: 2px #006558 solid;
border-radius: 20px;
}
.musicInfo{ /*进度条上面一块的区域*/
height: 200px;
text-align: center;
}
.musicImg{
width: 200px;
height: 200px;
border: 2px #fff solid;
text-align: center;
margin:0 auto; /*// text-align: center;margin:0 auto; 搭配实现居中*/
overflow: hidden;
border-radius: 100%;
top: 20px;
animation: aidemolizhuanquanquan 180s infinite linear; /*爱的魔力转圈圈*/
}
@keyframes aidemolizhuanquanquan {
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
.musicName{
color: black;
text-align: center;
}
.musicName div{ /*写这个是为了 让当前播放（这几个字固定的） ： 后面的名字 （是要更改的）*/
display: inline-block;
}
.time{
margin-top: 10px;
font-size: 14px;
line-height: 1.50;
color: black;
}
.jdt-left{
float: left;
}
.jdt-right{
float: right;
}
.jdt{
margin-left: 30px;
margin-right: 30px;
}
.jdt_1{
width: 100%;
height: 8px;
border-radius: 10px;
background-color: #ccc;
margin-top: 5px;
overflow: hidden;
}
.jdt_color{
height: 10px;
width: 30%;
pointer-events: none;
background-color: #709a70;
}
.vol{
position: absolute;
width: 100px;
height: 4px;
top: 50%;
right: 55px;
margin-top: -2px;
border-radius: 10px;
background-color: #ccc;
}
.vol>img{
width: 25px;
height: 25px;
margin-left: -135px;
margin-top: -30px;
}
.vol_color{
width: 100%;
height: 4px;
background-color: #709a70;
margin-top: -17px;
pointer-events: none;
}
.vol_blok{
position: absolute;
width: 7px;
height: 7px;
background-color: #709a70;
border-radius: 100%;
left: 100%;
top: 50%;
pointer-events: none;
margin-top: -3.5px;
}
.text{
color: black;
position: absolute;
right: 10px;
top:50%;
margin-top: -8px;
}
.ctrls{
text-align: center;
margin-top: 10px;
position: relative;
}
.nextBtn,.preBtn,#bofang,#zanting {
display: inline-block;
width: 30px;
height: 30px;
}
.yipai div{
width: 30px;
height: 30px;
display: inline-block;
}/*让按钮站到一排去*/
</style>
</head>
<body>
<!--音乐播放器-->
<div class="musicPlayer">
<div class="musicInfo"><!--进度条上面一块的区域-->
<div class="musicImg" id="musicImg"> <!--歌曲图片-->
<img src="./music/sky.jpg" id="musicpic">
</div>
</div>
<!--进度条-->
<div class="jdt">
<span class="jdt-left time" id="jdtLeft">00:00</span>
<span class="jdt-right time" id="jdtRight">00:00</span>
<div class="clears"></div>
<div class="jdt_1" id="gequJDBar">
<div class="jdt_color" id="gequjd">
</div>
</div>
<!--进度条 end-->
<!--控制按钮-->
<div class="musicName">
<div>当前正在播放:</div> <div><h1 id="sname">歌曲名称</h1></div>
</div>
<div class="ctrls" id="ctrls">
<div class="yipai"><!--这个诡异的命名是为了让前进后退暂停三个图片在同一排 拼音一排哈哈哈-->
<div> <img class="preBtn" id="preBtn" src="music/后退%20(1).png"></div>
<div> <img id="bofang" onclick="play()" src="music/暂停.png" alt="">
<img id="zanting" onclick="pause()" src="music/暂停%20(1).png" alt=""></div>
<div> <img class="nextBtn" id="nextBtn" src="music/前进.png"></div>
</div>
<!--音量控制-->
<div class="vol" id="volJd">
<img src="music/音量.png">
<div class="vol_color" id="volColor"></div>
<div class="vol_blok" id="volBlok"></div>
</div>
<!--音量控制 end-->
<!--音量显示百分比-->
<div class="text" id="text">
100%
</div>
<!--音量显示百分比 end-->
<!--控制按钮 end-->
</div>
<audio src="#" id="music"></audio>
</div>
<!--音乐播放器 end-->
<script >
//找标签
let music=document.getElementById("music");
let preBtn=document.getElementById("preBtn");
let nextBtn=document.getElementById("nextBtn");
let sname=document.getElementById("sname");
let musicpic=document.getElementById("musicpic");
let jdtRight=document.getElementById("jdtRight"); //进度条的左右
let jdtLeft=document.getElementById("jdtLeft");
let gequjd=document.getElementById("gequjd");// 歌曲进度
let gequJDBar=document.getElementById("gequJDBar");
let volJd=document.getElementById("volJd"); //音量进度
let volColor=document.getElementById("volColor"); //音量颜色
let volBlok=document.getElementById("volBlok");
let musicImg=document.getElementById("musicImg");
let text=document.getElementById("text");
var bf= document.getElementById('bofang');
var zt =document.getElementById('zanting');
//歌曲 用自己的路径和图片就好啦
let songs=[{
mp3:"./music/Serenade.mp3",
name:"Serenade",
img:"./music/sky.jpg",
},
{
mp3:"./music/月光下的云海.mp3",
name:"月光下的云海",
img:"./music/1.jpg",
},
{
mp3:"./music/EndlessHorizon.mp3",
name:"EndlessHorizon",
img:"./music/sky.jpg",
}];
//切歌函数
let changeMusic=function (index) {
music.src=songs[index].mp3;//换歌曲
musicpic.src=songs[index].img;//换图片
sname.innerHTML=songs[index].name;//换名称
gequjd.style.width=0;//切歌时进度归0
};
//默认加载第一首歌
let index=0;//当前播放歌曲索引
changeMusic(index);
//播放按钮
pause();
// 暂停 播放 按钮切换
function play () {
music.play();
bf.style.display='none';
zt.style.display="block"}
function pause () {
music.pause();
zt.style.display='none';
bf.style.display="block"}
//切歌
preBtn.addEventListener("click",function (event) {
index--;
if(index<=-1){
index=songs.length-1;
}
changeMusic(index);
});
nextBtn.addEventListener("click",function (event) {
index++;
if(index>songs.length-1){
index=0;
}
changeMusic(index);
});
//转换时间
function setTime(x, times) {
if (times < 10) {
x.innerHTML = "0:0" + Math.floor(times);
} else if (times < 60) {
x.innerHTML = "0:" + Math.floor(times);
} else {
let minute = parseInt(times / 60);
let second = times - minute * 60;
if (second < 10) {
x.innerHTML = "0" + minute + ":" + "0" + parseInt(second);
}
else {
x.innerHTML = "0" + minute + ":" + parseInt(second);
}
}
}
//歌曲事件
//元数据加载，显示总时长 duration 属性获得当前视频的长度：
music.addEventListener("loadedmetadata",function (event) {
let times = music.duration;
setTime(jdtRight, times);
});
//当歌曲可以播放的。切歌的时候就能播放
music.addEventListener("canplay",function (event) {
music.play();
});
//时间更新事件，歌曲顺利播放的时候，更新进度条和当前的时间
music.addEventListener("timeupdate",function (event) {
let jd=music.currentTime/music.duration;//0-1的小数
let bfb=jd*100+"%";
gequjd.style.width=bfb;
let times = music.currentTime;
setTime(jdtLeft, times);
});
//歌曲进度条拖动
gequJDBar.addEventListener("click",function (event) {
let x=event.offsetX;//获取鼠标所在位置
let bfb=x/610*100;
gequjd.style.width=bfb+"%";
music.currentTime=music.duration*+bfb/100;
});
//音量控制拖动
let setVol=function(event){
let x=event.offsetX;//获取音量当前的位置
console.log(x); // 打印输出当前音量值
let bfb=x/100*100;
volColor.style.width=bfb+"%";
volBlok.style.left=bfb+"%";
text.innerHTML = bfb+"%" ;
music.volume=bfb/100; //volume 属性设置或返回音频的音量，从 0.0 (静音) 到 1.0 (最大声)。
};
volJd.addEventListener("click",function (event) {
setVol(event);
});
volJd.addEventListener("mousedown",function (event) {
volJd.addEventListener("mousemove",setVol);
});
volJd.addEventListener("mouseup",function (event) {
volJd.removeEventListener("mousemove",setVol);
});
// 播放完毕，自动下一首
music.addEventListener("ended",function(){
nextBtn.click();
});
</script>
</body>
</html>