Hexo插入音乐视频

2,165 阅读3分钟
原文链接: wongzhen.com

随着自己在重新整理自己博客的探索中越来越深入,各种有趣的小功能越来越让我感到有趣,所以我整理了一下在文章中插入视频音乐的方法

安装插件

安装hexo-tag-aplayer和hexo-tag-dplayer插件

进入站点文件夹根目录,之后安装插件

cd blog
npm install hexo-tag-aplayer --save
npm install hexo-tag-dplayer --save

Hexo音乐插件详细信息:hexo-tag-aplayer中文文档
真.源码:APlayer
Hexo视频插件纤细信息:hexo-tag-dplayer文档
在文章中的用法:
当开启 Hexo 的 文章资源文件夹 功能时,可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中,然后直接引用:

{% aplayer "Caffeine" "Jeff Williams"  "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

示例:

单独歌曲
插入文章代码:

{% aplayer "See You Again" "Wiz Khalifa" "http://olfa3o6q1.bkt.clouddn.com/See%20You%20Again.mp3" "lrc:http://olfa3o6q1.bkt.clouddn.com/See%20You%20Again.lrc" %}

效果:

See You Again - Wiz Khalifa

速度与激情-see you again

演唱:Wiz Khalifa;Charlie Puth

歌词by:漫天飞羽

It's been a long day without you my friend

And I'll tell you all about it when I see you again

We've come a long way from where we began

Oh I'll tell you all about it when I see you again

When I see you again

Damn who knew all the planes we flew

Good things we've been through

That I'll be standing right here

Talking to you about another path

I know we loved to hit the road and laugh

But something told me that it wouldn't last

Had to switch up look at things

different see the bigger picture

Those were the days hard work forever pays

Now I see you in a better place (Now I see you in a better place)

ah~

How could we not talk about family

when family's all that we got?

Everything I went through

you were standing there by my side

And now you gonna be with me for the last ride

It's been a long day without you my friend

And I'll tell you all about it when I see you again

We've come a long way from where we began

Oh I'll tell you all about it when I see you again

When I see you again

First you both go out your way

And the vibe is feeling strong and what's

Small turn to a friendship a friendship

Turn into a bond and that bond will never

Be broke and the love will never get lost (Be broke and the love will never get lost)

And when brotherhood come first then the line

Will never be crossed established it on our own

When that line had to be drawn and that line is what

We reach so remember me when I'm gone

How could we not talk about family

when family's all that we got?

Everything I went through you

were standing there by my side

And now you gonna be with me for the last ride

Let the light guide your way hold every memory

As you go and every road you

take will always lead you home

Hoo~

It's been a long day without you my friend

And I'll tell you all about it when I see you again

We've come a long way from where we began

Oh I'll tell you all about it when I see you again

When I see you again

Again

When I see you again see you again

When I see you again

- 00:00 / 00:00

歌单
插入文章代码:

{% aplayerlist %}
{
    "narrow": false,                          // (可选)播放器袖珍风格
    "autoplay": true,                         // (可选) 自动播放,移动端浏览器暂时不支持此功能
    "mode": "random",                         // (可选)曲目循环类型,有 'random'(随机播放), 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放), 默认:'circulation' 
    "showlrc": 3,                             // (可选)歌词显示配置项,可选项有:1,2,3
    "mutex": true,                            // (可选)该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
    "theme": "#e6d0b2",	                      // (可选)播放器风格色彩设置,默认:#b7daff
    "preload": "metadata",                    // (可选)音乐文件预载入模式,可选项: 'none' 'metadata' 'auto', 默认: 'auto'
    "listmaxheight": "513px",                 // (可选) 该播放列表的最大长度
    "music": [
        {
            "title": "CoCo",
            "author": "Jeff Williams",
            "url": "caffeine.mp3",
            "pic": "caffeine.jpeg",
            "lrc": "caffeine.txt"
        },
        {
            "title": "アイロニ",
            "author": "鹿乃",
            "url": "irony.mp3",
            "pic": "irony.jpg"
        }
    ]
}
{% endaplayerlist %}

效果:

歌曲名 - 歌手名

Not available

- 00:00 / 00:00
  1. 1 歌曲名
  2. 2 歌曲名

音乐的外链本来想用网易云的外链,结果发现自己喜欢的歌都因为版权无法使用外链,所以我决定使用七牛云储存音乐以及歌词

视频
插入文章代码:

{% dplayer "url=http://olfa3o6q1.bkt.clouddn.com/%5B4K-60FPS%5D%20Avengers%20-%20Infinity%20War%20%7C%20Official%20Trailer%20%7C%202018.mp4" "api=https://api.prprpr.me/dplayer/" "id=" "loop=false" %}

效果:

0:00 / 0:00 Speed Loop Show danmaku Unlimited danmaku Opacity for danmaku