HTML5 javascript实现音乐播放器
2024-05-10 22:45:23
准备毕业了，感觉好多东西都没学会，太多太多想学的知识，有种求知若渴的状态。
四年的大学就剩下一个多月了，无论将来多么困难，这条路是自己选的，走就要走的精彩！
自学了一点javascript、php，做了一个web app，我将其取名为Youlike随心听，就如我的信念一样，自己的人生自己掌控，做自己喜欢的事情，自由的生活！
使用javascript实现音乐播放操作，实现歌词解析，并动态放映歌词效果。
1 $(function(){
2 //初始化测试
3 //alert();
4 //开启歌词动态监听
5 scrollBar();
6 //播放结束后监听
7 Player().addEventListener('ended', function () {
8 //alert('over');
9 nextMusic();
10 });
11 $("#play").bind("click", function() {
12 // current_lyric = data.next_mid;
13 if(Player().paused){
14
15 //修改按钮图标
16 //$("#play").attr("src","../images/on_play_but.png");
17 $("#play").removeClass("play");
18 $("#play").addClass("onplay");
19
20 if(Player().src == ""){
21 //获取歌曲文本信息
22 playMusic();
23 }else{
24 Player().play();
25 }
26 //playMusic();
27 //Player()
28 }else{
29
30 $("#play").removeClass("onplay");
31 $("#play").addClass("play");
32 Player().pause();
33 }
34 });
35
36 $("#next").bind("click",function(){
37 nextMusic();
38 });
39 $("#back").bind("click",function(){
40 //nextMusic();
41 if(play_history_position == 0){
42 return ;
43 }
44 });
45
46
47 $("#play").removeClass("play");
48 $("#play").addClass("onplay");
49 playMusic();
50 //非播放器脚本///
51 $(".nav ul li").bind("click",function(){
52 location.href=$(this).find("a").attr("href");
53 });
54
55 });
56 //var 全局
57 var played = 0;
58 var play_history_list = [];
59 var play_history_position = 0;
60
61
62
63
64
65 //获取播放器audio对象
66 function Player(){
67 var player = document.getElementById("MyPlayer");
68 return player;
69 }
70 /**************************** 音乐播放控制 start ****************************/
71 function nextMusic(){
72
73 $.post(root_url + "/index.php/Home/Index/find_music",{channel:current_play_music_channel},function(data){
74 //更改当前曲目标识符
75 //alert("");
76 current_play_music_mid = data.mid;
77 //加载歌词前进行清空
78 lyric_time = [];
79 lyric_text = [];
80 lyric_flag = 0;
81 loadLyric();
82 //设置曲目信息
83 $("#channel_name").html(current_play_music_channel);
84 //专辑
85 //$("#album_image").attr("src",""+ root_url+"/download.php?type=image&mid="+data.mid +"");
86 var album_canvas = document.getElementById("album_canvas");
87 var context = album_canvas.getContext("2d");
88 var image = new Image();
89 image.src = ""+ root_url+"/download.php?type=image&mid="+data.mid +"";
90 //image.src = public_url+"/images/205798.jpg";
91 image.onload = function(){
92 context.drawImage(image,0,0,300,150);
93 }
94
95 //曲目名称
96 $("#music_name").html("《"+data.real_name+"》");
97 //演唱者
98 $("#music_singer").html(data.singer);
99 Player().src = root_url+"/download.php?type=music&mid="+data.mid;
100 //播放状态
101 Player().play();
102 //alert(data);
103 },"json");
104 }
105 function playMusic(){
106 //alert(current_play_music_channel);
107 if(current_play_music_channel == null || current_play_music_channel == ""){
108 current_play_music_channel = "随便听听";
109 }
110 if(played == 0){
111 mPlay();
112 played = 1;
113 }
114 if (Player().src == "") {
115 $.post(root_url + "/index.php/Home/Index/find_music",{channel:current_play_music_channel},function(data){
116 //更改当前曲目标识符
117 //alert("");
118 current_play_music_mid = data.mid;
119 //加载歌词前进行清空
120 lyric_time = [];
121 lyric_text = [];
122 lyric_flag = 0;
123 loadLyric();
124 //设置曲目信息
125 $("#channel_name").html(current_play_music_channel);
126 //专辑
127 //$("#album_image").attr("src",""+ root_url+"/download.php?type=image&mid="+data.mid +"");
128 var album_canvas = document.getElementById("album_canvas");
129 var context = album_canvas.getContext("2d");
130 var image = new Image();
131 //image.src = ""+ root_url+"/download.php?type=image&mid="+data.mid +"";
132 image.src = public_url+"/images/205798.jpg";
133 //context.drawImage(image,0,0);
134 image.onload = function(){
135 context.drawImage(image,0,0,300,150);
136 }
137 //曲目名称
138 $("#music_name").html("《"+data.real_name+"》");
139 //演唱者
140 $("#music_singer").html(data.singer);
141 Player().src = root_url+"/download.php?type=music&mid="+data.mid;
142 //播放状态
143 Player().addEventListener("canplay", function(){
144 Player().play();
145 });
146 /*Player().play();*/
147 //alert(data);
148 },"json");
149
150 }else{
151 Player().pause();
152 }
153 }
154
155 /**************************** 音乐播放控制 end ****************************/
156
157 /**************************** 歌词动态效果实现 start *****************************/
158 //歌词播放进度标识
159 var scrollh = 0;
160
161 //每行的高度20px;
162 function display_lyric(time){
163
164 //清空容器
165 /*if(){
166
167 }*/
168 $("#lyric_div").html("");
169 //歌词有两种状态
170 //1.播放过程中，歌词不在最后一行
171 //2.播放过程中，歌词到最后一行
172 if(time < lyric_time[lyric_time.length-1]){
173 for(var k=0 ; k<lyric_text.length ; k++){
174 if(lyric_time[k] <= time && time < lyric_time[k+1]){
175 scrollh = k*22;
176 $("#lyric_div").html($("#lyric_div").html() + "<font style='color:#eae211;font-size:22px;'>" + lyric_text[k] + "<font><br/>");
177 }else{
178 $("#lyric_div").html($("#lyric_div").html() + lyric_text[k] + "<br/>");
179 }
180 }
181 }else{
182 for(var j=0 ; j<lyric_text.length-1 ; j++)
183 $("#lyric_div").html($("#lyric_div").html() + lyric_text[j] + "<br/>");
184 $("#lyric_div").html($("#lyric_div").html() + "<font style='color:red;'>" + lyric_text[lyric_text.length-1] + "<font><br/>");
185 }
186
187
188 }
189 //根据歌词进度，，动态自动滚动行号
190 function scrollBar()//设置滚动条的滚动
191 {
192 //判断进度
193 if(document.getElementById("lyric_div").scrollTop<=scrollh-50)
194 //调整行号
195 document.getElementById("lyric_div").scrollTop+=1;
196 if(document.getElementById("lyric_div").scrollTop>=scrollh+50)
197 document.getElementById("lyric_div").scrollTop-=1;
198 //调整跨度
199 window.setTimeout("scrollBar()",50);
200 }
201
202 function mPlay()//开始播放
203 {
204 var ms_100 = parseInt(getSeconds());
205 if (isNaN(ms_100))
206 display_lyric(0);
207 else
208 display_lyric(ms_100);
209 window.setTimeout("mPlay()", 100)
210 }
211 function getSeconds()//得到当前播放器播放位置的时间
212 {
213 var t = Player().currentTime;
214 var s = parseFloat(t) * 100.0;
215 return parseInt(s);
216 }
217 /**************************** 歌词动态效果实现 end *****************************/
218
219
220 /***************************歌词解析 start ***************************/
221 var lyric_time = []; //保存歌词的时间整数 100ms级；
222 var lyric_text = []; //保存对应上述时间的歌词文本信息；
223 var lyric_flag = 0; //歌词保存位置标识
224
225 //ajax访问获取歌词
226 //url :
227 //参数 : mid
228 //响应函数 :
229 function loadLyric(){
230 $.post(root_url+"/download.php",{type:"lyric",mid:current_play_music_mid},function(data){
231 //alert(data);
232 parseLyric(data);
233 },"text");
234 /*alert($.ajax({
235 url: "__ROOT__/download.php",
236 async: false
237 }).responseText);*/
238 }
239
240 //歌词分解
241 function parseLyric(lyric_string){
242 //alert(lyric_string);
243 //按行进行划分
244 var row_string = lyric_string.split("\n");
245
246 //正则表达式
247 var regular_context_start = /^.\d.+/;
248
249 //歌词内容开始下标
250 var lyric_context_index = 0;
251
252 //遍历寻找歌词内容开始部分
253 for(var i=0 ; i<row_string.length ; i++){
254 if(regular_context_start.test(row_string[i])){ //匹配成功
255 lyric_context_index = i;
256 break;
257 }
258 }
259 //alert("0");
260 //歌词数据转换并存入数组
261 for(var k=lyric_context_index ; k<row_string.length ; k++){
262 textFormat(row_string[k]);
263 }
264 //alert("1");
265 //歌词内容数组排序
266 sortLyricArray();
267 //alert("2");
268 //将歌词渲染到容器内
269 var lyric_list_string = "";
270 for(var n=0 ; n<lyric_flag; n++){
271 lyric_list_string = lyric_list_string + lyric_text[n] + "<br/>";
272 }
273 $("#lyric_div").html(lyric_list_string);
274 }
275
276 //歌词数据转换类
277 //[00:12.64]我有必要相信地球也能是个可爱迪士尼
278 //1.判断时间标识符个数N
279 //2.时间转换 [00:12.64] => 1264
280 //3.歌词内容部分写入
281 function textFormat(text){
282 //0 验证
283 if(text == null || text == ""){
284 return ;
285 }
286 //1
287 var char_number = 0;
288 for(var i=0 ; i<text.length ;i++){
289 if(text.charAt(i) == '['){ //统计
290 char_number++;
291 }
292 }
293 if(char_number == 0){ //检测
294 return ;
295 }
296 //alert(char_number);
297 for(var k=0 ; k<char_number ; k++){
298
299 var lyric_tmp_time= parseTime(text.substring(k*10+1,k*10+9));
300
301 lyric_text[lyric_flag] = text.substring((char_number)*10);
302 lyric_time[lyric_flag] = lyric_tmp_time;
303 lyric_flag++;
304 }
305 }
306
307
308 //时间格式化 01:12.45 => 1*60*100+12*100+45;
309 function parseTime(time_string){
310 var m = time_string.substring(0,time_string.indexOf(":"));
311 var s = time_string.substring(time_string.indexOf(":") + 1);
312 var total_time = parseInt(parseInt(m) * 60 *100 + parseFloat(s) * 100.0);
313 //检测
314 if(isNaN(total_time)){
315 total_time = 0;
316 }
317 return total_time;
318 }
319
320
321 //数组排序（根据时间）
322 function sortLyricArray(){
323 //选择排序 lyric_time[]
324 for(var i=0 ; i<lyric_time.length-1 ; i++){
325 var min = i;
326 for(var j=i ; j<lyric_time.length ; j++){
327 if(lyric_time[min] > lyric_time[j]){
328 min = j;
329 }
330 }
331 //数据交换
332 var tmp_time = lyric_time[i];
333 var tmp_text = lyric_text[i];
334 lyric_time[i] = lyric_time[min];
335 lyric_time[min] = tmp_time;
336 lyric_text[i] = lyric_text[i];
337 lyric_text[min] = tmp_text;
338 }
339 }
340 /***************************歌词解析 end ***************************/转载于:https://www.cnblogs.com/helingfeng/p/4460662.html
HTML5 javascript实现音乐播放器相关推荐
- html实现音乐界面设计,基于HTML5技术的音乐播放器的设计与实现.doc
基于HTML5技术的音乐播放器的设计与实现 基于HTML5技术的音乐播放器的设计与实现 常志强 刘正余 杨劲楠 皖西学院电子与信息工程学院 X 关注成功! 加关注后您将方便地在 我的关注中得到本文献的 ...
- web html5音乐播放器设计与实现,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11Nov.2017 赤峰学院学报(自然科学版) Journal of Chifeng University (Natural Science Edition )第33卷第11期(下 ...
- JavaScript(JS) 音乐播放器
代码块中有注释 可以阅读一下 图片和音乐路径不同所以需要自己找一个合适的 播放模式支持:列表播放(默认).循环播放.随机播放 能控制音量大小.上一曲.下一曲.暂停.播放.播放节奏状态.查看播放列表.删 ...
- 基于html的音乐播放设计,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11 Nov.2017 赤峰学院学报(自然科学版) JournalofChifengUniversity(NaturalScienceEdition) 第 33 卷第11 期(下) ...
- html音乐播放器论文,基于HTML5技术的音乐播放器的设计与实现.docx
基于HTML5技术的音乐播放器的设计与 实现 常志强刘正余杨劲楠 皖西学院电子与信息工程学院 摘要: 本文采用IITML5技术,设计了一款音乐播放器,可以实现在线播放音乐,也可 以加载终端里存储的音乐 ...
- html5在线音乐列表播放器,简洁的html5 mp3列表音乐播放器代码
特效描述:简洁的html5 mp3列表 音乐播放器代码.html5网页音乐播放器,mp3播放器,简洁音乐播放器 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 标题歌手 00:00/0 ...
- discuz自动添加兼容html5标签的音乐播放器
关于在discuz中mp3附件自动添加Windows Media播放器插件的方法的文章网上有很多,只要修改./templates/default/discuzcode.htm文件就可以了,但是毕竟不是 ...
- HTML5移动端音乐播放器（启蒙篇）
这段时间公司一直在做一个PC的教育类单页应用,庞大复杂,涉及非常多H5的知识,音频就是其中的一部分.前些天偷台风的闲暇时写了一个移动端音乐播放器,作为练手项目. 在线地址:请猛击这里 源码:请猛击这里 ...
- 10款Flash和Javascript网页音乐播放器
关联:9 Fresh jQuery Media Players 10款音乐播放器, 有基于javascript的网页 音乐播放器,也有基于Flash的音乐播放器.赶快挑一款,分享你喜爱的音乐吧! 1. ...
最新文章
- linux 压缩 解压 命令大全
- js如何使浏览器允许脚本异步加载
- decimal函数python_decimal数据类型
- OpenCV+yolov3实现目标检测(C++,Python)
- 《思科数据中心I/O整合》一2.11 活动-活动连接（Active-Active）
- 微软职位内部推荐-Senior Software Engineer_HPC
- 通过正则格式化url查询字符串
- 2018年python工作好找吗-2018年排名前20的数据科学Python库
- Python代码Linux
- oracle磁盘满了怎么办,ORACLE磁盘空间占满解决
- excel 文件过大 瘦身
- Devise Gem简介
- DELL 笔记本 - Windows 10 恢复 / 重置此电脑
- Device disconnected
- 重生之我是赏金猎人-SRC漏洞挖掘(十三)-攻防对抗/梦中绝杀X脖代理商
- 耳机——AKG K450 及 Beats Solo2 对比
- Struts2注解配置之@Action（二）
- SASS的概念和使用
- 正版授权|Charles 4 网络封包分析调试工具软件
- 软件测试之黑盒测试用例的四种设计方法