關(guān)于
在個(gè)人的站點(diǎn)上昌犹，如果有音樂播放的功能锡垄，那么讀者可以一遍閱讀文章，一邊欣賞音樂祭隔，是一件很愉快的事情货岭。下面就以本站點(diǎn)為案例路操，分享增加音樂播放功能的步驟。
具體操作
1.先上效果圖
2.準(zhǔn)備
APlayer千贯，下載github壓縮包屯仗，解壓后把dist文件夾復(fù)制到\themes\next\source目錄中。
在dist目錄里搔谴，新建music.js文件魁袜，并把如下代碼粘貼進(jìn)去。
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: false,
audio: [
{
name: "你一定要幸福",
artist: '簡弘亦',
url: 'http://www.ytmp3.cn/down/51689.mp3',
cover: 'http://img.ytmp3.cn/image/52.jpg',
},
{
name: '一百萬個(gè)可能(Live)',
artist: '摩登兄弟',
url: 'http://www.ytmp3.cn/down/52772.mp3',
cover: 'http://img.ytmp3.cn/image/53.jpg',
},
{
name: 'The Rose',
artist: 'Westlife',
url: 'http://www.ytmp3.cn/down/56694.mp3',
cover: 'http://img.ytmp3.cn/image/51.jpg',
},
{
name: 'In The Eyes',
artist: '江映東',
url: 'http://www.ytmp3.cn/down/53053.mp3',
cover: 'http://img.ytmp3.cn/image/10.jpg',
}
]
});
3.在\themes\next\layout_layout.swig文件中敦第，<body>里新增如下代碼：
<!-- 音頻播放 -->
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
重新發(fā)布就可以看到效果了峰弹。
4.補(bǔ)充
Aplayer 中文文檔
mp3音樂外鏈網(wǎng)站
