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 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
详解Vue中的watch和computed
Nov 09 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 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
浅析return false的正确使用
2013/11/04 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
jQuery功能函数详解
2015/02/01 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python的高阶函数用法实例分析
2019/04/11 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
荣耀商城:HIHONOR
2020/11/03 全球购物
会计实习自我鉴定
2013/12/04 职场文书
简历的自我评价
2014/02/03 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
经营目标管理责任书
2014/07/25 职场文书
学用政策心得体会
2014/09/10 职场文书
暑期实践个人总结
2015/03/06 职场文书
谢师宴学生致辞
2015/07/27 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript