技术

添加音乐控件

之前的新番本来想多写一点，但整音乐控件就整了半天，现在总结一下。

一开始使用的是官方的插件hexo-tag-cplayer，安装，之后在页面添加代码

1
2
3
4
5
{% cplayer false json %}
[
  419238089 # 网易云音乐ID
]
{% endcplayer %}

按照文档的说法，json里面可以是一个确定的音乐对象，也可以是网易云音乐的ID，但单纯的添加了ID后，播放器读不出音乐的信息，并提示错误：Cannot read property 'poster' of undefined。对照demo后，再添加一个音乐的对象，就可以了。
1
2
3
4
5
6
7
8
9
10
11
{% cplayer autoplay json %}
[
  {
    "name": "チルドレンレコード",
    "artist": "96猫,伊東歌詞太郎",
    "poster":"https://cplayer.js.org/801422833716a4f0f96ff6dff1f77dfe.jpg",
    "src":"https://cplayer.js.org/8af423669c27d265bb129d04a927044f.mp3"
  },
  27955597
]
{% endcplayer %}

结合报错判断可能云音乐这里的处理有点问题，于是查看了一下源码，发现在只传网易ID的时候，新建cplayer对象的时候，playlist是空数组。
1
2
3
4
5
6
7
window.cplayerList[${JSON.stringify(targetID)}] = new cplayer({
  element: document.getElementById(${JSON.stringify(targetID)}),
  playlist: ${JSON.stringify(resPlaylist)},
  generateBeforeElement: true,
  deleteElementAfterGenerate: true,
  autoplay: ${JSON.stringify(autoplay)}
});

之后又查看了一下cplayer的官网，playlist这里没有要求不能为空，反复尝试不成功后，只能改一下插件本身了。

为了便于之后修改，在根目录下新建一个scripts文件夹，hexo会自动载入这个文件夹下的js，之后按照原本插件的结构，把文件复制过来。然后就可以修改插件了。

初步思路就是，在初始化cplayer对象之前，把网易的音乐信息先读取出来，参照原本插件的方法，修改读取网易音乐的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
function get163Obj(id){
  return fetch("https://music.huaji8.top/?id=" + id).then(function(res){return res.json()}).then(function(data){
    let obj = {
      name: data.info.songs[0].name,
      artist: data.info.songs[0].ar.map(function(ar){ return ar.name }).join(','),
      poster: data.pic.url,
      lyric: data.lyric.lyric,
      sublyric: data.lyric.tlyric,
      src: data.url.url
    }
    return obj;
  })
}

之后修改初始化cplayer对象的方法，同时还要考虑到这里读取音乐信息是一个异步操作，需要修改一下代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var playlist = ${JSON.stringify(resPlaylist)};

(async ()=>{
${
add163.map((a) => {
  return `tmp = await get163Obj(${JSON.stringify(a)}),playlist.push(tmp)`
}) || ''
}
window.cplayerList[${JSON.stringify(targetID)}] = new cplayer({
  element: document.getElementById(${JSON.stringify(targetID)}),
  playlist: playlist,
  generateBeforeElement: true,
  deleteElementAfterGenerate: true,
  autoplay: ${JSON.stringify(autoplay)}
});
})();

保存后查看效果，音乐数据可以读取出来了，但是无法播放，调试通过music.huaji8.top获取的音乐信息，发现音乐地址这里是空的，可能已经失效了。

搜索了一下，发现一个可以使用的网易外链地址，修改了一下get163Obj方法。

1
src: "http://music.163.com/song/media/outer/url?id=" + id + ".mp3" //data.url.url

测试没有问题了，效果不错。