效果

HTML代码

<!--播放器-->
<div id="player"><!--播放控件--><div id="playerControl"><div class="playerImg"><img src="../images/demo3/1.jpg" alt="" width="150" height="150"><audio id="audio"><source src="../video/1.mp3"></audio></div><div id="pcontrol" class="clearfix"><button class="prev" title="上一曲"></button><button id="play" class="play1" title="播放"></button><button class="next" title="下一曲"></button><button class="stop" title="停止"></button></div></div><!--播放进度--><div id="progrees"><div id="curProgrees"></div></div><!--播放时间--><div id="playTime"><span id="presentTime">00 : 00</span><span>/</span><span id="totalTime">00 : 00</span></div><!--音频列表--><div id="playerList"><ul><li class="active"><span class="mr10">1</span><span>Mascara</span><span>-</span><span>G.E.M. 邓紫棋</span></li><li><span class="mr10">2</span><span>西安人的歌</span><span>-</span><span>范炜与程渤智</span></li><li><span class="mr10">3</span><span>往后余生</span><span>-</span><span>李贰叁</span></li></ul></div>
</div>

Css代码

*{margin:0; padding:0;}
.bd{border:1px solid red;}
.fl{float: left}
.fr{float:right}
.mr10{margin-right:10px;}
ul{list-style: none;}
.clearfix:after{content: ""; height:0; line-height: 0; visibility: hidden;display: block; clear:both;}
body{background:#262626; padding:50px 0; color:#fff; }#player{width:600px; height:400px; background:#130519de;margin:0 auto;}
#playerControl{position:relative;height:200px;}
#playerControl .playerImg{padding:25px; box-sizing: border-box;}/*播放控制界面*/
#pcontrol{position: absolute;left:300px; top:85px;}
#pcontrol button{float:left;margin:0 10px;border:0;outline: none; width:28px; height:28px;background:url("../../images/demo3/player.png") no-repeat}/*暂停*/
#pcontrol .play1{background-position: -8px -8px}
#pcontrol .play1:hover{background-position: -49px -8px}/*播放*/
#pcontrol .play2{background-position: -8px -49px}
#pcontrol .play2:hover{background-position: -49px -49px}/*上一曲*/
#pcontrol .prev{background-position: 0 -112px}
#pcontrol .prev:hover{background-position: -30px -112px}/*下一曲*/
#pcontrol .next{background-position: 0 -141px}
#pcontrol .next:hover{background-position: -30px -141px}
/*停止播放*/
#pcontrol .stop{background-position: 0 -84px}
#pcontrol .stop:hover{background-position: -30px -84px}/*播放列表*/
#playerList{padding:20px 0px}
#playerList ul li{padding:10px 20px; }
#playerList ul li.active,#playerList ul li:hover{background:rgba(0, 0, 0, .4);color:#665975;cursor: pointer}/*播放进度*/
#progrees{width:550px; height:5px; background:#ccc; margin:0 auto;}
#curProgrees{width:0px; height:100%; background:darkolivegreen;}/*播放时间*/
#playTime{padding:10px 25px 0px; text-align: right;}

Js功能代码

window.onload = function (ev) {//获取元素var play = document.querySelector("#play");//播放按钮var audio = document.querySelector("#audio");//音频文件var next = document.querySelector(".next");//下一曲var prev = document.querySelector(".prev");//上一曲var stop = document.querySelector(".stop");//停止var playerListLi = playerList.querySelectorAll("li")//播放列表livar totalTime = document.querySelector("#totalTime");//总时间var presentTime = document.querySelector("#presentTime");//当前时间//歌曲地址var playerMusic = ["../video/1.mp3","../video/2.mp3","../video/3.mp3"];//1. 点击播放歌曲，再次点击播放暂停play.addEventListener("click",startPlay);//2.点击切换下一曲next.addEventListener("click",theNext);//3.点击切换上一曲prev.addEventListener("click",thePrev);//4.点击停止播放stop.addEventListener("click",stopPlay);//定义播放函数//1.1 定义标杆，判断是否播放歌曲var flag = true;function startPlay(){if(flag){play.className="play2";play.title = "暂停";audio.play();//播放进度playProgress();//播放时间playTime();}else{play.className="play1";play.title = "播放";audio.pause();}flag = !flag;}//定义下一曲var n = 0;//定义歌曲索引function theNext(){n++;if(n == playerMusic.length){n = 0;}audio.src = playerMusic[n];//歌曲播放flag = true;startPlay();//切换列表switchList();}//定义下一曲function thePrev(){n--;if(n < 0){n = playerMusic.length - 1;}audio.src = playerMusic[n];//歌曲播放flag = true;startPlay();//切换列表switchList();}//切换列表function switchList(){for(var i=0; i<playerListLi.length; i++){playerListLi[i].className = "";}playerListLi[n].className = "active";}//停止播放function stopPlay(){//设置当前播放时间为0;,并暂停播放audio.currentTime = 0;flag = false;startPlay();}//播放进度function playProgress(){//定义计时器var timer = null;if(flag){//开启计时器timer = setInterval(function(){if(audio.currentTime >= audio.duration){curProgrees.style.width = progrees.offsetWidth + "px";clearInterval(timer);theNext();}else{curProgrees.style.width = (audio.currentTime/audio.duration)*progrees.offsetWidth + "px";}},30);}else{//关闭计时器clearInterval(timer);}}//播放时间function playTime(){//当前时间var timer2 = null;if(flag){timer2 = setInterval(function(){//总时间setTime(audio.duration,totalTime);setTime(audio.currentTime,presentTime);},1000)}else{clearInterval(timer2)}}//设置时间function setTime(audioTime,obj){//总时间allMinute = Math.floor(audioTime/60);if(allMinute<10){allMinute = "0" + allMinute;}allSecond = Math.floor(audioTime%60);if(allSecond<10){allSecond = "0" + allSecond;}var allTime = allMinute + " : " + allSecond;obj.innerHTML = allTime;}
}

JavaScript 实现音乐播放器相关推荐

JavaScript(JS) 音乐播放器
代码块中有注释可以阅读一下图片和音乐路径不同所以需要自己找一个合适的播放模式支持:列表播放(默认).循环播放.随机播放能控制音量大小.上一曲.下一曲.暂停.播放.播放节奏状态.查看播放列表.删 ...
10款Flash和Javascript网页音乐播放器
关联:9 Fresh jQuery Media Players 10款音乐播放器, 有基于javascript的网页音乐播放器,也有基于Flash的音乐播放器.赶快挑一款,分享你喜爱的音乐吧! 1. ...
HTML5 javascript实现音乐播放器
准备毕业了,感觉好多东西都没学会,太多太多想学的知识,有种求知若渴的状态. 四年的大学就剩下一个多月了,无论将来多么困难,这条路是自己选的,走就要走的精彩! 自学了一点javascript.php,做 ...
使用JavaScript创建音乐播放器的案例详解
英文 | https://www.geeksforgeeks.org/create-a-music-player-using-javascript/?ref=leftbar-rightbar 翻译 | ...
JavaScript制作音乐播放器
对于制作网页来说,我们不但要把网页效果制作的美观能对浏览着有吸引眼球的效果,而且系在的网站还加如了背景音乐的效果,或者是播放列表的效果,就像各种空间.163邮箱里的音乐播放器一样,它不但能让用户在使用 ...
JavaScript + Audio API自制简易音乐播放器（详细完整版、小白都能看懂）
JavaScript + Audio API自制简易音乐播放器(详细完整版) ** 音乐播放器的功能清单如下: ** 1.点击暂停按钮,歌曲暂停 2.点击播放按钮,歌曲播放 3.单曲循环与取消单曲循环 ...
音乐播放器制作 (HTML + CSS + JavaScript）
作者:浪子花梦,一个有趣的程序员 ~ HTML.CSS.JS 方面的内容也学了许多,我也写了相关的文章在博客之中,需要学习两个小项目巩固一下知识所学的知识,在此作一个分享,资料源于B站,链接如下所示: ...
JavaScript 音乐播放器
JavaScript 音乐播放器主要功能:快进.快退.暂停.上下一首.禁音.鼠标控制音量.自动下一首.显示歌名 <html> <head>@*不提供音频*@<meta ...
javascript音乐播放器
背景国内所有的音乐平台隐私收集严重,现有开源的播放器暂未发现功能丰富程度.易用性.修改难度等方面都做的比较均衡的. 介绍仅基于javascript的开源网页音乐播放器,界面仿百度音乐播放器,支持所 ...

JavaScript 实现音乐播放器

效果

HTML代码

Css代码

Js功能代码

JavaScript 实现音乐播放器相关推荐

最新文章

热门文章