首页
所有分类
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 相关文章推荐
javascript 鼠标拖动图标技术
Feb 07 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
JavaScript实现Excel表格效果
Feb 07 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
延时任务(1) Get(1) 条码(1) 太阳码(1) 日志(1) Word(2) 二维码(2) openGauss(1) Post(1) 目录管理(1)
You might like
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
document.createElement()用法
2013/03/13 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
详解Node 定时器
2018/02/26 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
Python读取csv文件实例解析
2019/12/30 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
python requests库的使用
2021/01/06 Python
物业保安员岗位职责
2014/03/14 职场文书
施工员岗位职责
2014/03/16 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
庆元旦主持词
2015/07/06 职场文书