【Hugo】APlayer +PJAX 引入音乐播放放器并实现音乐不中断功能

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 【custom.html】 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<div id="aplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: []
});
</script>

1
2
3
4
5

const ap = new APlayer({
    ...,
    // 吸底模式
    fixed: true
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

const staticDir = {{ .Site.Home.Permalink }}
const ap = new APlayer({
    ...,
    lrcType: 3,
    audio: [
        {
             name: 'name', // 歌名
             artist: 'artist', // 歌手
             url: 'url.mp3', // 歌曲路径
             cover: 'cover.jpg', // 封面路径
             lrc: 'lrc.lrc', // 歌词路径
        },
        {
            // 本地路径引入写法（有子目录就在staticDir后面继续拼接）
            name: 'name',
            artist: 'artist',
            url: staticDir + 'url.mp3',
            cover: staticDir + 'cover.jpg',
            lrc: staticDir + 'lrc.lrc',
        }
    ]
});

1
2
3
4
5

/**
 * 【custom.scss】
 */
@import "aplayer-light.scss";
@import "aplayer-dark.scss";

1
2
3

<!-- custom.html -->
...
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"> -->

 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

<!-- 【custom.html】 -->
...
<script>
    ...
    /**
     * 页面销毁前监听
     */
    window.onbeforeunload = () => {
        // 将播放信息用对象封装，并存入到localStorage中
        const playInfo = {
            index: ap.list.index,
            currentTime: ap.audio.currentTime,
            paused: ap.paused
        };
        localStorage.setItem("playInfo", JSON.stringify(playInfo));
    };

    /**
     * 页面加载后监听
     */
    window.onload = () => {
        // 从localStorage取出播放信息
        const playInfo = JSON.parse(localStorage.getItem("playInfo"));
        if (!playInfo) {
            return;
        }
        // 切换歌曲
        ap.list.switch(playInfo.index);
        // 等待500ms再执行下一步(切换歌曲需要点时间，不能立马调歌曲进度条)
        setTimeout(() => {
            // 调整时长
            ap.seek(playInfo.currentTime);
            // 是否播放
            if (!playInfo.paused) {
                ap.play()
            }
        }, 500);
    };
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- 【custom.html】 -->
...
<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script>
<script>
	var pjax = new Pjax({
	  selectors: [
	    ".main-container"
	  ]
	})
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- 【custom.html】 -->
...
<script>
    ...
    pjax._handleResponse = pjax.handleResponse;
    pjax.handleResponse = function(responseText, request, href, options) {
        if (request.responseText.match("<html")) {
            if (responseText) {
                // 将新页面的html字符串解析成DOM对象
                let newDom = new DOMParser().parseFromString(responseText, 'text/html');
                // 获取新页面中body的className，并设置回当前页面
                let bodyClass = newDom.body.className;
                document.body.setAttribute("class", bodyClass)
                // 放行，交给pjax自己处理
                pjax._handleResponse(responseText, request, href, options);
            }
        } else {
            // handle non-HTML response here
        }
    }
</script>

1
2
3
4
5
6
7
8
9

<!-- 【custom.html】 -->
...
<script>
    ...
    document.addEventListener('pjax:complete', () => {
        // Stack脚本初始化
        window.Stack.init();
    })
</script>

 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

/** 
 * 【search.tsx】
 * 记得把window.addEventListener('load' ...这部分代码注释掉
 * 初始化工作交给Stack.init()处理了，不需要这个了
 */  
...
function searchInit() {
    let search = document.querySelector('.search-result');
    if (search) {
        const searchForm = document.querySelector('.search-form') as HTMLFormElement,
            searchInput = searchForm.querySelector('input') as HTMLInputElement,
            searchResultList = document.querySelector('.search-result--list') as HTMLDivElement,
            searchResultTitle = document.querySelector('.search-result--title') as HTMLHeadingElement;

        new Search({
            form: searchForm,
            input: searchInput,
            list: searchResultList,
            resultTitle: searchResultTitle,
            resultTitleTemplate: window.searchResultTitleTemplate
        });
    }
}

export {
    searchInit
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/**
 * 【main.ts】
 */
...
import { searchInit } from "ts/search";
let Stack = {
    init: () => {
        ...
        // 调用search脚本初始化方法
        searchInit();
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/**
 * 【search.tsx】
 */
private async doSearch(keywords: string[]) {
    ...
    /* 
    方法末尾，让pjax重新解析文档数据，识别动态渲染的数据
    虽然当前文件没有pjax对象，但最后静态页面会生成一个整体的js文件
    pjax对象那时就能识别到，就可成功调用
    */
    pjax.refresh(document);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- custom.thml -->
...
<script>
    var pjax = new Pjax({
        selectors: [
            ...
            ".js-Pjax"
        ]
    })
</script>
<div class="js-Pjax">
    <script>
        // TODO: 判断当前是否是文档，且是否开启评论功能
        (function() {
            let script = document.createElement('script');
            // 将对应评论的脚本内容填进去
             script.setAttribute('key', 'value');
            ...
            // 寻找合适的元素，添加脚本进去
            document.querySelector('xxx').appendchild(script)
        })(document)
    </script>
<div>

 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

<!--custom.html-->
...
{{ with resources.Get "js/topbar.min.js" }}
    <!-- 引入本地JS脚本 -->
    <script src={{ .Permalink }}></script>
{{ end }}
<script>
    // 修改进度条颜色
    topbar.config({
        barColors: {
            '0': 'rgba(255,  255, 255, 1)', // 进度0%白色
            '1.0': 'rgba(0, 149, 234,  1)' // 进度100%蓝色
        }
    })
	
    document.addEventListener('pjax:send', () => {
        // 显示顶部进度条
        topbar.show();
    })
	
    document.addEventListener('pjax:complete', () => {
        ....
        // 隐藏顶部进度条
        topbar.hide();
    })
</script>