运用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(); 
  
  
 }); 
 
 
 })

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

Javascript 相关文章推荐
jquery select选中的一个小问题
Oct 11 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
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
You might like
用Flash图形化数据(一)
2006/10/09 PHP
Git命令之分支详解
2021/03/02 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
Django中的Signal代码详解
2018/02/05 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
机修工岗位职责
2013/11/24 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
晚会开幕词
2015/01/28 职场文书
语文教师求职信范文
2015/03/20 职场文书
法制教育观后感
2015/06/17 职场文书
小王子读书笔记
2015/06/29 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书