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

212 阅读 0 评论 140 点赞

我是靠谱客的博主勤劳自行车，这篇文章主要介绍运用js教你轻松制作html音乐播放器，现在分享给大家，希望可以做个参考。

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

效果图：

源码：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"> 
   
 
  </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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<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(); 
   
   
  }); 
  
 
 })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
$(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(); 
   
   
  }); 
  
 
 })