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

运用js教你轻松制作html音乐播放器

Posted in Javascript onApril 17, 2020

用HTML做了个音乐播放器，可以循环播放，选择歌曲，以及自动播放下一首，运用了js和json知识，下面是效果图和源码，有兴趣的可以试试哦

效果图：

运用js教你轻松制作html音乐播放器

源码：html

<span style="color:#999999;"><!DOCTYPE html> 
<html> 
 
 <head> 
 <meta charset="utf-8" /> 
 <title>音乐播放器</title> 
 <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script> 
 <script src="js/music.js" type="text/javascript" charset="utf-8"></script> 
 <style> 
 * { 
 margin: 0 auto; 
 padding: 0; 
 } 
 
 .page { 
 position: absolute; 
 width: 100%; 
 height: 100%; 
 } 
 
 .header { 
 width: 100%; 
 height: 44px; 
 background: lightcoral; 
 position: relative; 
 } 
 
 .title { 
 font-size: 20px; 
 color: white; 
 float: left; 
 margin: 7px 10px; 
 } 
 
 .search { 
 float: right; 
 width: 30px; 
 margin: 7px 10px; 
 } 
 
 .earch { 
 float: right; 
 width: 30px; 
 margin: 7px 10px; 
 } 
 .musicBox{ 
 width: 100%; 
 position: absolute; 
 top: 44px; 
 bottom: 50px; 
 background:url(音乐播放器资源/img/bg.jpg); 
 background-size:100% 100%; 
 /*内容超出范围部分滚动*/ 
 overflow: scroll; 
  
 } 
 /*定义一条音乐的列表,每行的样式 在js中动态加载到音乐列表每一行的div上*/ 
 .music{ 
 width: 100%; 
 height: 60px; 
 border-bottom: 2px solid gray; 
 margin: 10px 20px; 
  position: relative; 
 } 
 .music img{ 
 width: 40px; 
 height: 40px; 
 margin: 10px 20px; 
 
 } 
 .music p{ 
 color: goldenrod; 
 position: absolute; 
 left: 85px; 
 top: 10px; 
  
 } 
 /*音乐播放时所对应的行的样式*/ 
 .musicPlay{ 
 background: rgba(120,10,60,0.4); 
  
 } 
 .musicPlay p{ 
 color: red; 
 } 
 /*设置footer 的样式*/ 
 .footer{ 
 width: 100%; 
 height: 50px; 
 position: absolute; 
 bottom: 0px; 
 background: lightcoral; 
 } 
 .range{ 
 width: 100%; 
 position: absolute; 
 top: -3px; 
 left: 0px; 
  
 } 
 .pic{ 
 width: 30px; 
 height: 30px; 
 position: absolute; 
 left: 10px; 
 top: 12px; 
 border-radius: 15px; 
 animation: picAn 2s infinite linear; 
  
 } 
 @keyframes picAn{ 
 from{} 
 to{transform: rotate(360deg);} 
 } 
 /*控制按钮的样式*/ 
 .play{ 
 width: 20px; 
 height: 20px; 
 position: absolute; 
 left: 45%; 
 top: 10px; 
 } 
 .pre{ 
 width: 30px; 
 height: 30px; 
 position: absolute; 
 left: 0px; 
 top: 5px; 
  
 
 } 
 .next{ 
 width: 30px; 
 height: 30px; 
 position: absolute; 
 right: 0px; 
 top: 5px; 
 } 
 .love{ 
 position: absolute; 
 right: 5px; 
 top: 15px; 
 width: 20px; 
 height: 30px; 
  
 } 
 .musicControls{ 
 position: absolute; 
 width: 50%; 
 left: 25%; 
 top: 10px; 
 } 
 </style> 
 </head> 
 
 <body> 
 <div class="page"> 
 <audio id="audio"></audio> 
 <div class="header"> 
 <h3 class="title">我的音乐</h3> 
 <img class="search" src="音乐播放器资源/img/search.png" /> 
 <img class="earch" src="音乐播放器资源/img/earch.png" /> 
 </div> 
 <!--显示音乐类表--> 
 <div class="musicBox"> 
 <!--内容要通过读取json文件来获得 音乐列表--> 
 
 </div> 
 <!--控制台--> 
 <div class="footer"> 
 <!--进度条--> 
 <input type="range" class=" range" /> 
 <img src="音乐播放器资源/img/deng.jpg" class="pic" /> 
 <!--控制按钮--> 
 <div class="musicControls"> 
  <img src="音乐播放器资源/img/pre.png" class="pre" /> 
  <img src="音乐播放器资源/img/play.png" class="play" /> 
  <img src="音乐播放器资源/img/next.png" class="next" /> 
 </div> 
 <img src="音乐播放器资源/img/shoucang.png" class="love" /> 
 </div> 
 </div> 
 
 </body> 
 
</html></span>

下面是js代码：

$(document).ready(function(){ 
 //音乐播放器需要，播放器对象player，音乐对象，用play去播放music对象 
// 创建music对象,用于保存音乐的属性 
 function Music(){ 
 
 } 
 Music.prototype.src= ""; 
 Music.prototype.img =""; 
 Music.prototype.num=""; 
 Music.prototype.musicName=""; 
 Music.prototype.name=""; 
 //创建player对象 
 function Player(){ 
 
 } 
 Player.prototype.audio = document.getElementById("audio"); 
// 目前播放第几首歌 
 Player.prototype.playIndex=0; 
 Player.prototype.isplay = false; 
// 定义播放器的方法 
 Player.prototype.rangUpdate = function(){ 
 //this.audio.ontimeupdate =function() 音乐播放器播放音乐时监听 
 //把进度条和音乐的时间长度结合起来 
 //音乐每播放一秒进读条就会前进一个单位 this.duration音乐的总长度 
 this.audio.ontimeupdate =function(){ 
  //把进度条的总长度设为音乐的总长度 
 $(".range").attr("max",this.duration); 
  
 //设置进度条的值为播放的时间 
 $(".range").val(this.currentTime); 
 //当一首歌播放完再去播放下一首 
 if (this .currentTime == this.duration ) { 
 player.nextMusic(); 
 } 

  
 } 
 
 }; 
 Player.prototype.playMusic =function(){ 
 //向播放器添加音乐路径 
 $(this.audio).attr("src",musicModels[this .playIndex].src); 
 this .audio.play(); 
 //换音乐图片 
 $(".pic").attr("src",musicModels[this.playIndex].img); 
 //波让其的状态 
 this .isplay= true; 
 
 }; 
 Player.prototype.nextMusic = function(){ 
 
 
 //越界问题 
 if (this .playIndex >= musicModels.length - 1) { 
 this.playIndex = 0; 
  
 }else{ 
 this.playIndex = this .playIndex + 1; 
 } 
 //改变音乐类表的对应项的样式 
 
 this.playMusic(); 
 $(".music").eq(this.playIndex).addClass("musicPlay") 
 .siblings() 
 .removeClass("musicPlay"); 
 
 }; 
 Player.prototype.preMusic =function(){ 
 if (this .playIndex <= 0) { 
 this.playIndex = musicModels.length-1; 
  
 }else{ 
 this.playIndex = this .playIndex - 1; 
 } 
 //改变音乐类表的对应项的样式 
 
 this.playMusic(); 
 $(".music").eq(this.playIndex).addClass("musicPlay") 
 .siblings() 
 .removeClass("musicPlay"); 
 }; 
 Player.prototype.playOrPause = function(){ 
 if(this.isplay){ 
 this.audio.pause(); 
 $(".play").attr("src","音乐播放器资源/img/stop.png"); 
 }else{ 
 this.audio.play(); 
 $(".play").attr("src","音乐播放器资源/img/play.png"); 
 } 
 this.isplay = !this.isplay; 
 }; 
// js文件从此向下 
// 创建音乐数组 
 var musicModels = []; 
 //创建音乐播放器对象 
 var player= new Player(); 
 /*Ajax 目的是在js中实现异步操作 
 * JS是单线程 的，在单线程中模拟java oc 多线程 开辟异步任务，，浏览器的引擎去做一步操作， 
 * 实质上不是开辟一个子线程，而是创建一个异步任务 
 * 优点： 
 * 1.不需要用户等待服务器相应 
 * 在异步派发xmlHTTPRequest 请求后，马上把控制权收回就被返回浏览器空页面 
 * 界面不会出现白板，等待后台服务器得到请求后，再去执行完成方法，在方法中填写界面数据的代码 
 * 2.不需要加载整个页面只需要更新局部数据，节省流量，减轻服务器压力 
 * 
 * 为xmlHTTPRequest 设置一个回调函数，服务器数据到达时触发函数，发送请求时可以带少量的参数 
 * 实现按需去数据 
 * 
 $.ajax(),这是jQuery 对ajax的封装的最基础的函数，通过这个函数可以实现异步通讯功能 
 var configObj= { 
// method:数据提交方式 get OR post 
 URL：请求的网址 
 async：是否异步，默认true 
 data：post请求的参数 
 dataType ：服务器返回的类型，xml string json 
 success:请求成功后的回调方法 
 error ：请求失败后的方法 
 
 } 
 $.ajax(configObj);完成异步请求 
 二、$post()只能采取post请求 
 三、$get() 
 四、$getJSON( url ,完成回调);可以请求本地路径的内容 
 * 
 * 
 * */ 
 $.getJSON("pbl.json",function(data){ 
// console.log(data); 
 for (var i=0;i<data.length;i++) { 
 var music = new Music(); 
 music.src= "音乐播放器资源/" + data[i].src; 
 music.img= "音乐播放器资源/" + data[i].img; 
 music.musicName = data[i].musicName; 
 music.name = data[i].name; 
 music.num = data[i].num; 
 musicModels.push(music); 
  
 } 
 //播放音乐 
 isertData(); 
 player.playMusic(); 
 player.rangUpdate(); 
 $(".music").eq(player.playIndex).addClass("musicPlay") 
 .siblings() 
 .removeClass("musicPlay"); 
 }); 
 function isertData(){ 
 //先要遍历数据源数组 
 /* 
 html5 中添加了一个data-*的方式 来自定义属性 
 用data-前缀，添加到自定义属性名上， 
 这样的结构可以存储少量的数据 
 * */ 
 for (var i=0;i<musicModels.length;i++) { 
// /创建一个DIV元素表示,音乐中的一行,给这个div添加music样式 
//和绑定自定义属性index来记录这个div是列表中的第几行 
 var $musicDiv = $("<div class = 'music' data-index = "+ i +"></div>"); 
// 将这个div添加到musicBox 中 
 $(".musicBox").append($musicDiv); 
// 设计musicdiv中的子元素,子元素有两个,一个是歌曲的图片,歌曲的信息 
// 创建一个img 显示歌曲图片 
 var $img = ( 
 "<img src =" + musicModels[i].img+" />"); 
 $musicDiv.append($img); 
// 创建一个音乐信息的p标签 
 var $musicMsg = $("<p>"+musicModels[i].musicName+" 演唱者：" 
 +musicModels[i].name 
  +"</p>" 
 ); 
 $musicDiv.append($musicMsg); 
  
 } 
 $(".music").click( 
 function(e){ 
  //从被选中的div中读取自定义 index属性 
  
  player.playIndex = $(this ).data("index"); 
  player.playMusic(); 
  //被选中的div设置musicplay样式，该div的兄弟元素要溢出musicplay样式 
  //保证只有一个div有musicplay 
  $(this).addClass("musicPlay").siblings().removeClass("musicPlay"); 
  
  
 } 
 ); 
 } 
 
 $(".play").click(function(){ 
 player.playOrPause(); 
 }); 
 
 $(".next").click(function(){ 
 player.nextMusic(); 
  
  
 }); 
 $(".pre").click(function(){ 
 player.preMusic(); 
  
  
 }); 
 
 
 })

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

运用js教你轻松制作html音乐播放器

- Author -

一直在路上前行

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

Javascript 相关文章推荐
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
详细分析vue表单数据的绑定
Jul 20 Javascript
浅谈react useEffect闭包的坑
Jun 08 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 #Javascript
聊一聊JS中的prototype
Sep 29 #Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 #Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 #Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 #Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 #Javascript
JSON 对象未定义错误的解决方法
Sep 29 #Javascript
Vite(1) 腾讯云(1) JDK(1) Foreign Key(1) 数据备份(2) queue(1) expdp(1) 云服务器(1) 外键约束(1) 内存池(1)
You might like
PHP邮件专题
2006/10/09 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
微信小程序实现3D轮播图效果（非swiper组件）
2019/09/21 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
JavaScript实现HSL拾色器
2020/05/21 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python安装scipy的方法步骤
2019/06/26 Python
对python中UDP,socket的使用详解
2019/08/22 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
python如何使用腾讯云发送短信
2020/09/17 Python
彪马日本官网：PUMA日本
2019/01/31 全球购物
旅游管理毕业生自荐信范文
2014/03/19 职场文书
转让协议书范本
2014/04/15 职场文书
出售房屋委托书范本
2014/09/24 职场文书
综治工作汇报材料
2014/10/27 职场文书