Claws Garden

用metingJS在hexo博客中插入音乐

插入QQ音乐歌单

使用SAKURA主题时,可以用meting插件在歌单页中添加自己喜欢的音乐。但是这里需要填一个歌单的ID插件才能工作。博主常用的是QQ音乐,这里就把获得QQ音乐歌单ID的方法分享出来以供参考。

客户端分享的歌单连接中没办法找到ID的信息,需要用到网页版QQ音乐:https://y.qq.com/

进入我的音乐中,找到自己想用的歌单,点击分享键,然后选择复制链接。这个时候查看剪贴板,发现这个链接里面就含有歌单的ID了。例如" https://y.qq.com/n/m/detail/taoge/index.html?id=4172638112" 这个链接里ID就是4172638112。

然后在meting模板中填写server=“tencent”,type=“playlist”,ID=“4172638112"即可。

1<meting-js
2  server="tencent"
3  type="playlist"
4  id="2015887451"
5  mutex="true">
6</meting-js>

注意在文章主题部分写入代码时一定要用{% raw %}和{% endraw %}来包裹要插入的源代码(代码上面加一行raw,下面加一行endraw即可),否则会被编译的时候放入p标签内,音乐播放器就没了。

metex表示的意思是:如果该页面有其他的声音播放,就把原来的停下来播这个,避免混响。

还有很多其他的参数,可以参考官方说明

插入网易云单曲

获得网易云里单曲id的方法十分无脑,直接网页点进去,看地址栏id=后面就是歌曲id。比如我们进入单曲的网址是https://music.163.com/#/song?id=33911781,那么id就是33911781。

记得把type设置为song:

1<meting-js
2  server="netease"
3  type="song"
4  id="33911781"
5  mutex="true">
6</meting-js>

插入QQ音乐单曲

一开始尝试也从分享链接里获得id,结果失败了。吸取了网易云音乐的经验,结果发现直接从网页链接里获得id居然成功了。。。

比如有这个单曲的网址:https://y.qq.com/n/yqq/song/003ceA8v07IL1k.html,那么003ceA8v07IL1k就是单曲id。

1<meting-js
2  server="tencent"
3  type="song"
4  id="003ceA8v07IL1k"
5  mutex="true">
6</meting-js>

如果是在QQ音乐里需要付费听的音乐就算成功插入了也还是听不成啊。

插入自己的单曲

如果是付费音乐,上面直接白嫖QQ音乐和网易云的方法就不行了。可以通过如下的方法加入自己在CDN中放好的音乐。

 1<meting-js
 2	name="rainymood"
 3	artist="rainymood"
 4	url="https://rainymood.com/audio1110/0.m4a"
 5	cover="https://rainymood.com/i/badge.jpg"
 6    mutex="true">
 7    <!--把歌词lrc中的内容拷贝到下面的标签中-->
 8	<pre hidden>
 9		[00:00.00]This
10		[00:04.01]is
11		[00:08.02]lyric
12	</pre>
13</meting-js>

目前歌词的插入除了这种插入歌词的方法,还没有找到其他方便的途径。也试过使用Aplayer的接口放一个lrc文件的url在上面,但是总是失败,就先暂时放弃了。

附上MetingJS的官方链接:官方GitHub项目连接

#Hexo