Chuang Ye

在Hexo博客中添加音乐

2019-02-22 hexo
Word count: 556 | Reading time: 2min

【痴迷音乐】

为我GEM疯狂打call

方案一

直接到音乐网站中生成外链播放器,就有自动生成如下标签,直接放进md文件中即可。

1
2
3
4
5
6
7
8
9
<iframe 
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width=0
height=0
src="http://streamoc.music.tc.qq.com/M800101A9o5D1EWzyd.mp3?vkey=496F425FDC1F092E0924D5ADD6BA7AA6837C8528BF0696B09AE2DC0FCB8B1CCDCFBFABB6C0EDC11B17B69138025492940BF54F6EA14B310A&guid=MS&fromtag=8&uin=0">
</iframe>

把width=和height设置为0,在网页中看不见,但可以自动播放,有点像网页背景音乐。点击此处查看具体效果!

方案二【个人推荐】

使用Hexo插件APlayer!!!

首先在 git bash中使用命令

1
npm install hexo-tag-aplayer

使用leancloud

lencloud可以完美解决图片与音乐外链问题。在leancloud官网注册后,可以选择个人用户开发版,这是免费的!然后在class中找到_File上传自己的音乐和图片,后面会有它的链接,直接copy就行。

在md文件中具体添加音乐

【添加一首歌】

1
{% aplayer "岩石里的花" "邓紫棋" "http://192.168.127.151/cache/3/05/streamoc.music.tc.qq.com/f16436618361cfecc79153b3ba1db01a/M800101A9o5D1EWzyd.mp3?vkey=22981DFD3050B42FAB4296D2E56960739E671E4B24A1F2247633AF232692011F5FC6F16E87CF59F9A26E6DBD50592C9FCE4C15A033F29612&guid=MS&fromtag=8&uin=0" "http://lc-vslfihiq.cn-n1.lcfile.com/9facbadc02822c7cf86c.png" "autoplay" %}

【添加歌曲列表】

1
2
3
4
{% aplayerlist %}{"narrow": false,"autoplay": true,"showlrc": 3,"mode": "random","music": [
{"title": "岩石里的花","author": "邓紫棋","url": "http://192.168.127.151/cache/3/05/streamoc.music.tc.qq.com/f16436618361cfecc79153b3ba1db01a/M800101A9o5D1EWzyd.mp3?vkey=22981DFD3050B42FAB4296D2E56960739E671E4B24A1F2247633AF232692011F5FC6F16E87CF59F9A26E6DBD50592C9FCE4C15A033F29612&guid=MS&fromtag=8&uin=0","pic": "http://lc-vslfihiq.cn-n1.lcfile.com/9facbadc02822c7cf86c.png","lrc": ""},
{"title": "睡皇后","author": "邓紫棋","url": "http://lc-vslfihiq.cn-n1.lcfile.com/38e7079c52024b425a12.mp3","pic": "http://lc-vslfihiq.cn-n1.lcfile.com/5910fa54d1d1eb90c1cf.png","lrc": ""},
{"title": "倒数","author": "邓紫棋","url": "http://lc-vslfihiq.cn-n1.lcfile.com/ee98d8bf7cf6311dc37d.mp3","pic": "http://lc-vslfihiq.cn-n1.lcfile.com/f48f7bc8811115acce16.jpg","lrc": ""}]}{% endaplayerlist %}

效果如下:

< PreviousPost
便捷存放
NextPost >
身份证信息识别