首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现简单音乐播放器

- Author -

本该如此

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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
vue-esign(1) pdfkit(1) 结构体(1) WeUI(1) 指针(1) Pillow(2) map(4) 蒙特卡罗(1) bufio(1) 微信小程序(9)
You might like
桌面中心(一)创建数据库
2006/10/09 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
electron 安装，调试，打包的具体使用
2019/11/06 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python机器学习之神经网络（三）
2017/12/20 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
康拓普公司Java笔面试
2016/09/23 面试题
《春到梅花山》教学反思
2014/04/16 职场文书
留学推荐信范文
2014/05/10 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
如何做好工作总结！
2019/04/10 职场文书
推荐六本经典文学奖书籍：此生必读
2019/08/22 职场文书
导游词之江西赣州
2019/10/15 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript