JavaScript实现音乐播放器
更新时间:2022年8月14日 15:54 点击:1105 作者:时小浅
本文实例为大家分享了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; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/qq_36194388/article/details/119174015
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20