0%

Hexo | Adding music

Posted on Edited on In

通过音乐平台实现

由于版权问题，网上音视频资源基本都无法获取源文件地址，可以使用内联框架<iframe>嵌入外部资源 (然鹅有些歌曲版权限制到连这种引用都没法QAQ)。<iframe>使用也非常简单，最重要的是src属性，用于指向资源，除此之外还可调整宽度高度边框等属性。多媒体网站一般都会提供<iframe>代码，直接将相应代码插入md文件中即可，一般无需额外设置。

示例1

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=430 src="//music.163.com/outchain/player?type=0&id=2551764474&auto=0&height=430"></iframe>

示例2

1
2
3
4
5
6
7
<div>
   <center>
       <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width= 330 height=86
           src="https://music.163.com/outchain/ player?type=2&id=33856282&auto=0&height=66">
       </iframe>
   </center>
</div>

此外还可以使用Hexo内置的iframe标签插件

1
{% iframe url [width] [height] %}

在网页中添加网易云/虾米/百度音乐

效果图

步骤

  1. 用浏览器打开虾米播播网址
    虾米播播网址

  2. 这里可以制作三款应用，分别是歌曲播放器列表，唱片墙，歌曲播放器（单曲）；这些都可以，这里只介绍第一种歌曲播放器列表。
    点击下方的立即制作，进入制作页面：
    虾米

  3. 自行添加音乐，然后下面就会出现播放器的代码：
    复制中间的HTML代码到Markdown文档中:
    虾米

  4. 重新生成网页以查看效果。

    1
    2
    3
    hexo clean
    hexo g
    hexo s

在侧边栏中添加虾米音乐

效果图

虾米

步骤

  1. 将上面步骤3中得到的HTML代码添加到Hexo主题的sidebar.swig文件中, 文件路径（\themes\next\layout_custom）:
    虾米

  2. 以记事本的方式打开该目录下的sidebar.swig文件，这就是NEXT主题的侧边栏文件，打开之后应该是空白文件，我们把上面复制的HTML代码粘贴到这里面就好了；

  3. 重新生成网页以查看效果。

    1
    2
    3
    hexo clean
    hexo g
    hexo s

通过APlayer

  1. 通过npm安装APlayer音乐播放器插件
    1
    npm install --save aplayer
  1. 在Markdown文件中指定播放器需要的APlayer.min.css和APlayer.min.js.
    1
    2
    <link rel="stylesheet" href="/assets/css/APlayer.min.css">
    <script src="/assets/js/APlayer.min.js"></script>

同一网页添加两个播放器

注意

  1. 不同的播放器要用不同的容器装

    1
    2
    3
    ...
    <div id="aplayer1" class="aplayer"></div>
    ...

  2. 然后新生成一个播放器，用var, 而不是const

    1
    2
    3
    4
    ...
    <script>
    var app = new APlayer({
    ...

  3. 新生成的播放器所在的容器要对应

    1
    2
    3
    ...
    container: document.getElementById('aplayer1'),
    ...

  4. 记得添加mutex参数，使得两个播放器不会同时播放

    1
    2
    3
    ...
    mutex: true,
    ...

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
---
title: Music-test-1
date: 2018-12-17 04:07:48
top: 20181210
tags:
description: Music-test

---

<!--more-->

<!-- ======================== -->
<!-- 设置播放器宽度 -->
<style>
    #aplayer {
        width: 100%;
        margin: 0 auto;
    }
    @media screen and (max-device-width: 400px) {
        #aplayer {
            width: 100%;
        }
    }
</style>

<!-- 设置 div 容器并引css和 js -->
<link rel="stylesheet" href="/assets/css/APlayer.min.css">
<script src="/assets/js/APlayer.min.js"></script>

<!-- =========== 第一个播放器 ============= -->
<div id="aplayer1" class="aplayer"></div>
<!-- 设置歌曲列表 -->
<script>
var app = new APlayer({
    container: document.getElementById('aplayer1'), 
    mutex: true,          
    audio: [
        {
            name: '最美的期待',                   
            artist: '周笔畅',                    
            url: 'https://warmshawn-music.oss-cn-beijing.aliyuncs.com/%E5%91%A8%E7%AC%94%E7%95%85-%E6%9C%80%E7%BE%8E%E7%9A%84%E6%9C%9F%E5%BE%85.mp3',     
            cover: 'http://warmshawn.oss-cn-beijing.aliyuncs.com/Singer/%E5%91%A8%E7%AC%94%E7%95%85_1_400x400.png?x-oss-process=style/style1',   
            theme: '#46718b'               
            },
        {
            name: 'Far away from home',
            artist: 'Groove Coverage',
            url: 'https://warmshawn-music.oss-cn-beijing.aliyuncs.com/Far%20Away%20From%20Home%20-%20Groove%20Coverage.mp3',
            cover: 'https://warmshawn.oss-cn-beijing.aliyuncs.com/Singer/Groove%20Coverage_520x520.png?x-oss-process=style/style1',
            theme: '#46718b'
        }]
});
</script>

把艰辛的劳动看作是生命的必要；即使没有收获的指望，也心平气静地继续耕种。

<!-- =========== 第二个播放器 ============= -->
<div id="aplayer2" class="aplayer"></div>
<!-- 设置歌曲列表 -->
<script>
var app = new APlayer({
    container: document.getElementById('aplayer2'),
    mutex: true,           
    audio: [
        {
            name: '最美的期待',                   
            artist: '周笔畅',                    
            url: 'https://warmshawn-music.oss-cn-beijing.aliyuncs.com/%E5%91%A8%E7%AC%94%E7%95%85-%E6%9C%80%E7%BE%8E%E7%9A%84%E6%9C%9F%E5%BE%85.mp3',     
            cover: 'http://warmshawn.oss-cn-beijing.aliyuncs.com/Singer/%E5%91%A8%E7%AC%94%E7%95%85_1_400x400.png?x-oss-process=style/style1',   
            theme: '#46718b'               
            },
        {
            name: 'Far away from home',
            artist: 'Groove Coverage',
            url: 'https://warmshawn-music.oss-cn-beijing.aliyuncs.com/Far%20Away%20From%20Home%20-%20Groove%20Coverage.mp3',
            cover: 'https://warmshawn.oss-cn-beijing.aliyuncs.com/Singer/Groove%20Coverage_520x520.png?x-oss-process=style/style1',
            theme: '#46718b'
        }]
});
</script>

最后，有什么问题，都知道在 github 的地址了，直接上去提 issue 啊，比直接来知乎靠谱多了

Reference

阿木大叔mu
GitHub: MoePlayer/hexo-tag-aplayer
GitHub: MoePlayer/APlayer
APlayer中文文档