伏龙阁资源网

运用js教你轻松制作html音乐播放器
站长资源 2024/11/27 佚名
2 0

用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="/UploadFiles/2021-04-02/jquery-2.1.1.min.js">


下面是js代码：





 $(document).ready(function(){ 
 //音乐播放器需要，播放器对象player，音乐对象，用play去播放music对象 
// 创建music对象,用于保存音乐的属性 
 function Music(){ 
 
 } 
 Music.prototype.src="/UploadFiles/2021-04-02/"; 
 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="/UploadFiles/2021-04-02/" + 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(); 
  
  
 }); 
 
 
 })





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接