音乐播放器的设计与实现功能要求：设计一款基于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>

音乐播放器的设计与实现功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示相关推荐

smoke.js是一款基于HTML5 Canvas的逼真烟雾特效js插件。通过该js插件，可以非常轻松的在页面中制作出各种烟雾效果。...
Smoke.js 是一个浏览器默认警告系统的JavaScript替代品,如果你想要跨浏览器与平台的标准化JavaScript警告窗口,Smoke.js就是你想要的. Smoke.js是一个轻量级且灵活 ...
安卓简单音乐播放器——上一首、下一首、暂停和停止
安卓超简单音乐播放器功能上一首.下一首.暂停和停止歌曲状态控制语句: switch (control){// 播放或暂停case 1:// 原来处于没有播放状态if (status == 0x11 ...
MediaPlayer音乐播放器、上一首、下一首、播放、停止、自动下一首、进度条
本文介绍MediaPlayer的使用.MediaPlayer可以播放音频和视频,另外也可以通过VideoView来播放视频,虽然VideoView比MediaPlayer简单易用,但定制性不如用Med ...
Android Studio实现简单的音乐播放（播放、暂停、停止、上一首、下一首）
Android Studio实现简单的音乐播放(播放.暂停.停止.上一首.下一首) 简要介绍采用Service组件实现后台播放,BroadcastReceiver实现消息传递.BroadcastRe ...
Android简单音乐盒，添加音乐播放的上一首和下一首控制
1.界面布局 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <Linear ...
C#——窗体程序声明一个播放器接口IPlayer，包含5个接口方法：播放、停止、暂停、上一首和下一首。
声明一个播放器接口IPlayer,包含5个接口方法:播放.停止.暂停.上一首和下一首.设计一个窗体程序,在该程序中定义一个MP3播放器类和一个AVI播放器类,以实现该接口,最后创建相应类的实例测试程序 ...
声明一个播放器接口IPlayer，包含5个接口方法：播放、停止、暂停、上一首和下一首。
声明一个播放器接口IPlayer,包含5个接口方法:播放.停止.暂停.上一首和下一首.设计一个Windows应用程序,在该程序中定义一个MP3播放器类和一个AVI播放器类,以实现该接口,最后创建相应类 ...
Vue3+TypeScript实现网易云音乐WebApp（播放界面：播放、暂停、音量控制、播放进度控制(点击/拖拽进度条)、上一首、下一首）
1. 成果展示真实接口地址本项目使用的是真实线上的网易云API 线上演示地址目前只做了每日推荐(需登录)以及排行榜功能,点个star吧大佬们! 项目GitHub地址 main分支是Vue3+Ty ...
Android--MediaPlayer(实现列表选歌，上一首，下一首，清空播放列表，搜索本地音乐文件)...
Android--MediaPlayer(实现列表选歌,上一首,下一首,清空播放列表,搜索本地音乐文件) 下载链接:http://download.csdn.net/detail/zlqqhs/507 ...

音乐播放器的设计与实现功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示

音乐播放器的设计与实现功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示相关推荐

最新文章

热门文章

音乐播放器的设计与实现 功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示

音乐播放器的设计与实现 功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示相关推荐

最新文章

热门文章

音乐播放器的设计与实现功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示

音乐播放器的设计与实现功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示相关推荐