JavaScript实现简单音乐播放器


Posted in Javascript onApril 17, 2020

该篇文章会教你通过JavaScript制作一个简单的音乐播放器。包括播放、暂停、上一曲和下一曲。

阅读本文章你需要对HTML、CSS和Javascript有基本的了解。

话不多说,先上图。

JavaScript实现简单音乐播放器JavaScript实现简单音乐播放器JavaScript实现简单音乐播放器

这样看起来有点单调。

我们把它加在网页上试试。

JavaScript实现简单音乐播放器

具体效果可以去我的个人网站查看http://tcxqq.top

好了,成品已经展示了接下来,开干吧!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/music.css">
</head>
<body>
<audio src="" id="mymusic"></audio>
<div class="music">
 <div class="pic_div"> <img src="images/music/pictures/disc.png" alt="" class="disc"> <img src="images/music/pictures/default.jpg" alt="" id="music_pic"> <span class="dot"></span>
 <div class="music_program">
 <div id="prograss"></div>
 </div>
 <div class="time">
 <p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p>
 </div>
 <div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div>
 </div>
</div>
</body>
<script src="js/music.js"></script>
</html>

先建好基本的HTML框架。

<audio src="" id="mymusic"></audio>为我们的音频
<div class="music">...</div>里面的部分为音乐的控件以及进度条,图片等。
<img src="images/music/pictures/disc.png" alt="" class="disc">为旋转的碟片
<img src="images/music/pictures/default.jpg" alt="" id="music_pic">为音乐专辑图片
<span class="dot"></span>为 碟片中间的小圆点
<div class="music_program"><div id="prograss"></div></div>
我们通过DIV嵌套一个div来作为音乐的进度条(图片红色部分),第一个div固定宽度,第二个div用%来设置宽度。
<p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p> 为时间显示 播放时长和总时长
<div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div>
控制菜单按钮 上一曲 播放/暂停 下一曲

下面是具体的css代码

@charset "utf-8";
/* CSS Document */
.music {
 height: 150px;
 width: 150px;
 background:rgba(98,91,91,0.9);
}
.pic_div {
 position: relative;
}
.dot {
 width: 15px;
 height: 15px;
 background: #464545;
 position: absolute;
 border: 2px solid white;
 border-radius: 50%;
 top: 40px;
 left: 85px;
}
.disc {
 width: 100px;
 position: absolute;
 right: 5px;
 transform: rotate(30deg);
}
#music_pic {
 width: 100px;
 position: absolute;
}
.music_program {
 height: 2px;
 width: 100px;
 background: #555;
 position: relative;
 top: 100px;
}
.music_program div {
 height: 100%;
 width: 0%;
 background: red;
}
.time {
 width: 100px;
 height: 20px;
 position: relative;
 top: 85px;
 overflow: hide;
}
.time p {
 padding-left: 33px;
}
.time p span:nth-of-type(2) {
 padding: 0 5px;
}
.music_menu {
 width: 150px;
 height: 25px;
 position: relative;
 top: 85px;
}
.music_menu span {
 width: 30px;
 height: 25px;
 display: inline-block;
 cursor: pointer;
}
.music_menu span:nth-of-type(1) {
 margin-left: 8px;
 background: url(../images/music/pictures/back.png) no-repeat 7px;
}
.music_menu span:nth-of-type(2) {
 margin-left: 14px;
 background: url(../images/music/pictures/play.png) no-repeat 10px;
}
.music_menu span:nth-of-type(3) {
 margin-left: 14px;
 background: url(../images/music/pictures/forward.png) no-repeat 7px;
}

至于图片资源的话,博主是在站长素材下载的

链接?http://sc.chinaz.com/psd/130622574580.htm

接下来是最重要的Js部分!

// JavaScript Document
var music=document.getElementById("mymusic");
 var prograss=document.getElementById("prograss");
 var curtxt=document.getElementById("currenttime");
 var duration=document.getElementById("duration");
 var music_pic=document.getElementById("music_pic");
 var deg=0;//旋转角度
 var disctimer,prograsstimer;//碟片计时器,进度条计时器
 var musicindex=0;//音乐索引
 var musics=new Array("nicengshishaonian.mp3","huanian.mp3","chunfengshili.mp3");//音乐数组
 var music_pics=new Array("000002","000001","000001");
 
 
 //旋转碟片
 var disc=document.getElementsByClassName('disc');
 
 //音乐时间显示
 function curtime(txt,misic)
 {
 if(music.currentTime<10)
 {
  txt.innerHTML="0:0"+Math.floor(music.currentTime);
 }else
 if(music.currentTime<60)
 {
  txt.innerHTML="0:"+Math.floor(music.currentTime);
 }
 else
 {
  var minet=parseInt(music.currentTime/60);
  var sec=music.currentTime-minet*60;
  if(sec<10)
  {
  txt.innerHTML="0"+minet+":"+"0"+parseInt(sec);
  }
  else
  {
  txt.innerHTML="0"+minet+":"+parseInt(sec);
  }
 }
 }
 
 //播放暂停
 function playPause()
 {
 var btn=document.getElementById("playbtn");
 if(music.paused)
 {
  music.play();
  clearInterval(disctimer);//清除碟片的定时器
  btn.style.background="url(images/music/pictures/pause.png) no-repeat 10px";//改变播放暂停键的图标
  disctimer=setInterval(function(){
  disc[0].style.transform="rotate("+deg+"deg)";
  deg+=5;
  
  //每秒设置进度条长度
  },100);
  prograsstimer=setInterval(function(){
  prograss.style.width=(music.currentTime)*100 / (music.duration)+"%";
  curtime(curtxt,music);
  if(music.currentTime>=music.duration-1)//片尾跳转下一曲
  {
  musicindex++;//音乐索引加一
  if(musicindex>=musics.length)//如果音乐索引超过长度,将音乐索引清零
  {
  musicindex=0;
  }
  getMusic();
  music.play();//重载音乐后进行播放
  }
  },1000);
 }
 else
 {
  music.pause();//停止音乐
  btn.style.background="url(images/music/pictures/play.png) no-repeat 10px";
  clearInterval(disctimer);//清除碟片滚动的定时器
  clearInterval(prograsstimer);//清除进度条的定时器
 }
 }
 
 //下一曲
 function nextMusic()
 {
 musicindex++;//音乐索引加一
 if(musicindex>=musics.length)//如果音乐索引超过长度,将音乐索引清零
 {
 musicindex=0;
 }
 getMusic();
 music.play();
 }
 
 //上一曲
 function backMusic()
 {
 musicindex--;
 if(musicindex<0)//如果索引小于0,将索引变为最大值
 {
 musicindex=musics.length-1;
 }
 getMusic();
 music.play();
 }
 
 //读取音乐
 function getMusic()
 {
 music.src="images/music/"+musics[musicindex];//改变音乐的SRC
 music_pic.src="images/music/pictures/"+music_pics[musicindex]+".jpg";
 if(music.readyState="complete")
 {
  setTimeout(function(){
  duration.innerHTML=parseInt(music.duration/60)+":"+parseInt(music.duration%60);
  },1000);//一秒后读取音乐的总时长
  
 }
 }
 
 
 window.onload=function(){
 getMusic();
 
 }

这次博主接受批评,对代码进行了大量的注释,方便大家阅读。

So 这里就不过多介绍了,这里用的三首歌都是博主喜欢的。

由于博主的网站不支持中文!所以改成拼音了。

第一首是SHE的我曾是少年(喜欢SHE的基本都20+了吧),还有鹿先森乐队的两首。

歌曲自己喜欢什么就加什么吧!

OK,这就是一个完整的播放器了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 #Javascript
微信小程序自定义toast的实现代码
Nov 16 #Javascript
vue实现简单的星级评分组件源码
Nov 16 #Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 #Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 #Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 #Javascript
layDate插件设置开始和结束时间
Nov 15 #Javascript
You might like
php常用文件操作函数汇总
2014/11/22 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
axios简单实现小程序延时loading指示
2018/07/30 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python 默认参数相关知识详解
2019/09/18 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
办理护照介绍信
2014/01/16 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
校庆标语集锦
2014/06/25 职场文书
市场营销工作计划书
2014/09/15 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python