在Hexo博客中添加音樂,有三種方式可以插入音樂
預(yù)覽效果:https://donlex.cn/archives/bda67445.html
一、使用html標(biāo)簽
寫法如下:
<audio src="https://什么什么什么.mp3" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the audio tag.</audio>
二、使用網(wǎng)易云外鏈
網(wǎng)易云音樂的外鏈很好用,不僅有可以單曲,還能有歌單,有興趣的自己去網(wǎng)易云音樂找首歌嘗試。但是有一些音樂因?yàn)榘鏅?quán)原因放不了,還有就是不完全支持 https,導(dǎo)致小綠鎖不見了。
網(wǎng)易云歌曲外鏈接獲取方法
首先 找到你要下載的歌曲 用網(wǎng)頁版打開 復(fù)制鏈接中的歌曲ID 如:
SHAUN - Way Back Home
https://music.163.com/#/song?id=863046037
ID就是863046037
然后將ID替換到下面的鏈接中
http://music.163.com/song/media/outer/url?id= .mp3
如:
http://music.163.com/song/media/outer/url?id=863046037.mp3
三、安裝插件
安裝插件可以完美的解決上面的問題,并且用插件,有顯示歌詞功能,也美觀,建議使用這種方法。
安裝插件
首先在站點(diǎn)文件夾根目錄安裝插件:
所在目錄:~/blog/
npm install hexo-tag-aplayer --save
使用
方法一
在文章中的寫法:
{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}
標(biāo)簽參數(shù)
- title : 曲目標(biāo)題
- author: 曲目作者
- url: 音樂文件 URL 地址
- picture_url: (可選) 音樂對(duì)應(yīng)的圖片地址
- narrow: (可選)播放器袖珍風(fēng)格
- autoplay: (可選) 自動(dòng)播放,移動(dòng)端瀏覽器暫時(shí)不支持此功能
- width:xxx:(可選) 播放器寬度(默認(rèn): 100%)
- lrc:xxx: (可選)歌詞文件 URL 地址
實(shí)例
{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面圖.jpg" "lrc:https://歌詞.lrc" %}
方法二
除了使用標(biāo)簽 lrc 選項(xiàng)來設(shè)定歌詞,你也可以直接使用 aplayerlrc 標(biāo)簽來直接插入歌詞文本在博客中:
{% aplayerlrc "title" "author" "url" "封面(選填)" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}
更多詳細(xì)使用方法參考文檔:hexo-tag-aplayer
獲取歌詞
歌詞的獲取,可以直接找到各層次文件,或者可以直接在網(wǎng)易云上通過以下方法獲取
http://music.163.com/api/song/media?id=863046037
其中id為網(wǎng)易云歌曲的id,打開鏈接之后,可以把"lyric"字段的值復(fù)制下來,再刪除\n就可以直接放到aplayerlrc標(biāo)簽中了,這樣就可以有歌詞出現(xiàn)
最后
更多內(nèi)容,歡迎訪問我的個(gè)人主站:https://donlex.cn
或者關(guān)注公眾號(hào):Python綠洲