Shengbin Yu's Blog

博客增加音乐播放器页面

发表于 更新于 分类于 | 评论数:

在Hexo博客中，如果是插入音频的话，方便的方法是直接使用html5中国的audio标签，但是有很多局限，不美观。稍微兼容两者的是使用插件hexo-tag-aplayer，有显示歌词功能，确实很不错。但是本人想创建一个音乐收藏夹的页面，可以播放自己喜欢的音乐，如果是使用aplayer插件的话，总感觉页面不过美观。我也找过酷狗、网易云和QQ等网易播放器，觉的QQ网页音乐播放器的非常棒。然后也发现网上有人已经做过这种网页播放器。

Krryblog | Lily_music 网页音乐播放器

这篇博客中已经把自己做的这个项目讲的很细致，并缺附带解释了一下如何实现歌词联动播放，而且他已经把源代码发布在github上，在此十分感谢。也是站在大神的肩膀上，才省了自己很多力气。

Github | Lily_music

改造思路

拿到代码的第一反应应该看看其结构（省略号省略了我不需要关心和修改的文件）

这个结构很一目了然。然后就是用浏览器打开这个网页，发现其是加载不了的。源代码中是使用的QQ音乐的api来导入歌曲。这个就是我需要解决的问题的关键，本人其实想过使用网易云或者QQ音乐的api来导入。但是怕不稳定，而且自己收藏的歌曲不一定在其中一个中都能找到，所以还不如直接导入本地的数据更好。所需要的文件不过就是专辑封面、歌词和歌曲文件，歌曲稍微大一点，便使用外链，其他的就需要自己慢慢整理了，痛并快乐着😂。最后再结合到自己的博客页面里面去，稍作改进，不用Hexo进行渲染即可。

具体操作

使用ajax导入本地音乐

首先先找到代码在在哪里导入音乐的，发现是在js文件夹中的list_function.js的中，有一个indexSong函数 list_function.js 

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
/* 默认首页是qq音乐热歌榜，处理返回的json数据用了一点es6的语法 */
function indexSong(){
	var count = 1;
	loading("加载中-QQ音乐热歌榜...",500);
	$.ajax({
-		url: 'https://api.hibai.cn/api/index/index',
+	  	url: './source/music.json',
-		type: 'POST',
+	 	type: 'GET',
-		data: {"TransCode":"020337","OpenId":"Test","Body":{}},
+	 	dataType: 'json',
		success:function(data){
-			var NECsongs = data.Body; //是个数组对象，存放多个json数据
+		 	var NECsongs = data; //是个数组对象，存放多个json数据

			var length = NECsongs.length;
			var html = `<div class="listitems list-head">
		                    <span class="music-album">时长</span>
		                    <span class="auth-name">歌手</span>
		                    <span class="music-name">歌曲</span>
		                </div>`;
			for(var vals of NECsongs){
				var ctime = krAudio.format(vals.time);
				html += `<div class="list-item" data-url="${vals.url}" data-pic="${vals.pic}" data-lrc="${vals.lrc}">
	                    <span class="list-num">${count}</span>
	                    <span class="list-mobile-menu"></span>
-	                    <span class="music-album">${ctime}</span>
+	                    <span class="music-album">${vals.time}</span>
	                    <span class="auth-name">${vals.author}</span>
	                    <span class="music-name">${vals.title}</span>
	                </div>`;
                count++;
			}
			html += `<div class="list-item text-center" title="全部加载完了哦~" id="list-foot">全部加载完了哦~</div>`;
			//添加到列表中
			mainList.html(html);
			// 播放列表滚动到顶部
			listToTop();
			tzUtil.animates($("#tzloading"),"slideUp");//加载动画消失
			//刷新播放列表的总数
			krAudio.allItem = mainList.children('.list-item').length-1; //减去最后一个提示框
			//更新列表小菜单
			appendlistMenu();
			//移动端列表点击播放
			mainList.find(".list-item").click(mobileClickPlay);
			//移动端列表右边信息按钮的点击
			$(".list-mobile-menu").click(mobileListMenu);
		}
	});
}

我了解到ajax也可以用来导入本地的数据，接下来的事情就是需要准备好一个json文件来提供你需要载入的音乐的信息，大概需要的信息是这样的

需要注意json的文件格式，特别是逗号的使用，不要出现中文的标点符号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[
    {
      "title": "嬉闹江湖",
      "author": "刘美麟",
      "time": "02:57",
      "url": "./source/src/嬉闹江湖-刘美麟.mp3",
      "pic": "./source/picture/嬉闹江湖-刘美麟.jpg",
      "lrc": "./source/lrc/嬉闹江湖-刘美麟.lrc"
    },
    {
      "title": "老街",
      "author": "李荣浩",
      "time": "05:22",
      "url": "./source/src/老街-李荣浩.mp3",
      "pic": "./source/picture/老街-李荣浩.jpg",
      "lrc": "./source/lrc/老街-李荣浩.lrc"
    }
 ]

然后把对应的资源放在对应的路径中即可，这个json文件很重要，如果音乐就此在载入进去就好了；如果没有，要仔细检查看看，同时通过浏览器来查看它是否被浏览器导入，浏览器的信息很重要。

这里还有另外一个小问题，那就是请求得到封面、歌词和歌曲文件的方式需要采用GET方式，而代码中请求歌词的方式是POST方式，所以需要修改一下。要不然会浏览器会说找不到或者提示405错误。 ./js/lyric.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 歌曲加载完后的回调函数
// 参数：歌词源文件
function lyricCallback(url) {
    
    $.ajax({  //异步请求获取歌词
        url:url,
-      type:"post",
+      type:"get",
        success:function(data){

            if(data == '暂无歌词') {
                lyricTip('乐诗、悦动你的生活');
                return false;
            }

            lyricText = parseLyric(data);    // 解析获取到的歌词

播放器加入博客页面中

之后的问题的就是如何讲这个播放器插入自己的博客中的，一开始我以为Hexo会默认把main.css去渲染整个博客文章，后来发现Hexo其实有一个很人性化的方式，那就在博客文件夹中的配置文件中可排除一些文件夹不去渲染它。 _config.yml

1
2
3
4
5
6
7
8
9
10
   # Directory
 	source_dir: source
	public_dir: public
	tag_dir: tags
	archive_dir: archives
	category_dir: categories
	code_dir: downloads/code
	i18n_dir: :lang
-	skip_render: 
+	skip_render: music/**

然后就是创建一个music页面，这个我在这就不细说了。然后在博客文件夹的source文件夹中会多一个music文件夹，里面只有一个index.md文件。你可以直接把它删除，然后将之前修改完后的代码一起拷贝过来，文件夹的顺序不要乱。最后你看看音乐播放器的页面在你的博客中是不是正常显示。

最后

当然，最后还需要修改一点，例如，我把搜索框去掉了，而且代码中我也没有启用它。在音乐页面中加入菜单栏，方便切换到博客其他页面中。会点Html和Css的知识即可，用浏览器一点一点的去进行微调。致此，特别感谢Krry写的代码，我只是把他做的播放器融入到自己的博客而已。如果对这样的播放器的写法很感兴趣，可以去网易云课堂听李江南老师讲的《从零玩转jQuery原理和Ajax》免费课程，里面就有编写一个QQ网页播放器的实战教学，感觉很不错。