NexT主题添加音乐

2024-05-19 11:01:35

在Hexo博客中添加音乐，有三种方式可以插入音乐

预览效果：https://donlex.cn/archives/bda67445.html

一、使用html标签

写法如下：

<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>

二、使用网易云外链

网易云音乐的外链很好用，不仅有可以单曲，还能有歌单，有兴趣的自己去网易云音乐找首歌尝试。但是有一些音乐因为版权原因放不了，还有就是不完全支持 https，导致小绿锁不见了。

网易云歌曲外链接获取方法

首先找到你要下载的歌曲用网页版打开复制链接中的歌曲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

三、安装插件

安装插件可以完美的解决上面的问题，并且用插件，有显示歌词功能，也美观，建议使用这种方法。

安装插件

首先在站点文件夹根目录安装插件：

所在目录：~/blog/

npm install hexo-tag-aplayer --save

使用

方法一

在文章中的写法：

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

标签参数

title : 曲目标题
author: 曲目作者
url: 音乐文件 URL 地址
picture_url: (可选) 音乐对应的图片地址
narrow: （可选）播放器袖珍风格
autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
width:xxx:(可选) 播放器宽度(默认: 100%)
lrc:xxx: (可选）歌词文件 URL 地址

实例

{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

方法二

除了使用标签 lrc 选项来设定歌词，你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中：

{% aplayerlrc "title" "author" "url" "封面(选填)" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}

更多详细使用方法参考文档：hexo-tag-aplayer

获取歌词

歌词的获取，可以直接找到各层次文件，或者可以直接在网易云上通过以下方法获取

http://music.163.com/api/song/media?id=863046037

其中id为网易云歌曲的id，打开链接之后，可以把"lyric"字段的值复制下来，再删除\n就可以直接放到aplayerlrc标签中了，这样就可以有歌词出现

NexT主题添加音乐相关推荐

Hexo-Fluid主题添加音乐页面
效果预览:https://bynote.cn/playlist/ 如果你想使用音乐页面,很多人都会推荐安装hexo-tag-aplayer这款插件. 这款插件通过Hexo独有的标签外挂,我们可以很方便 ...
hexo yilia主题添加音乐
又无法发布,到底为什么,我的个人博客:http://www.lookk.cn/2017/12/09/heox-%E6%B7%BB%E5%8A%A0%E9%9F%B3%E4%B9%90%E6%B5%8B ...
php加本地音乐代码,WordPress添加音乐播放器（纯代码实现）
一.前言为WordPress网站添加一个音乐播放器,网上大部分的教程都是使用各种插件,有的插件还需要花钱买授权,用着不爽.本文用纯代码为网站添加音乐播放器,安全可靠,可以任意修改. 二.效果图三. ...
如何给一小段视频添加音乐
最近很多人应该都在追知否知否,小编作为一个只爱看偶像剧和宫廷剧的代表,最后也被这剧吸引了,相较很多电视剧,它的时代背景有些不同,里面的大娘子可谓是整部剧的笑点,当我们看到搞笑的片段是不是都有想录制截取 ...
怎么给微信动态视频添加音乐
最新版本的微信做了很大的改变,很多用户都很兴奋,终于可以添加动态视频了,而且可以设置音乐,但是如果带的音乐不喜欢怎么办呢,今天小编就带大家看一看怎么给微信动态视频添加音乐吧! 1.首先打开微信,在&q ...
hexo博客fluid主题添加aplayer组件
aplayer是一个非常漂亮好用的HTML5音乐播放器,和dplayer师出同门.我用的主题是fluid,记录一下添加音乐插件的过程. 我的HEXO博客安装aplayer npm和github两种方 ...
博客园添加背景音乐以及播放器或在左下方固定位置添加音乐播放器给你的博文锦上添花，增姿添彩
官方教程:https://aplayer.js.org/#/zh-Hans/ 一.第一种样式这种你想添加多少音乐就添加多少音乐! 将下方代码复制到博客侧边栏! 话不多说! 上代码! <!-- ...
如何给一小段视频添加音乐 1
最近很多人应该都在追知否知否,小编作为一个只爱看偶像剧和宫廷剧的代表,最后也被这剧吸引了,相较很多电视剧,它的时代背景有些不同,里面的大娘子可谓是整部剧的笑点,当我们看到搞笑的片段是不是都有想录制截取 ...
hexo博客中添加音乐播放器
1. 简介本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法,无需安装任何额外插件. 2.安装步骤在网易云音乐中打开你想要插入的音乐页面,点击生成外联播放器. 在网页中 ...
mc服务器音乐文件夹在哪,添加自定义音乐图文教程我的世界怎么添加音乐
来源:游戏园日期:2019-04-29 04:03:06 添加自定义音乐图文教程我的世界怎么添加音乐.那我的世界游戏也是有游戏音乐的,那肯定会有玩家想要在玩游戏的时候一边玩游戏,一边听自己喜欢的歌, ...

最新文章

热门文章