JavaScript实现音乐播放器
更新时间:2022年08月14日 15:28:19 作者:时小浅
这篇文章主要为大家详细介绍了JavaScript实现音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现音乐播放器的具体代码,供大家参考,具体内容如下
效果
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")//播放列表li var 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; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
这篇文章主要介绍了bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法,需要的朋友可以参考下2017-02-02JS基于Location实现访问Url、重定向及刷新页面的方法分析
这篇文章主要介绍了JS基于Location实现访问Url、重定向及刷新页面的方法,结合实例形式分析了javascript使用Location进行URL访问、重定向、页面刷新等操作相关原理、操作技巧与注意事项,需要的朋友可以参考下2018-12-12
最新评论