Add web music player function for blog
download
Click to access Aplayer source code: GitHub Aplayer . Download to the local, distcopy the folder to the themes\next\sourcefolder after decompression .
music.js
New themes\next\source\dist\music.jsfile, add content:
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: false,
audio: [
{
name: '风筝误',
artist: '刘珂矣',
url: 'http://up.mcyt.net/?down/46644.mp3',
cover: 'http://oeff2vktt.bkt.clouddn.com/image/96.jpg',
}
]
});The corresponding parameter explanations in the source code are available here: Aplayer Chinese documentation
audioThe corresponding is the audio file, so the music that the music player needs to play needs to configure related information (such as song links, lyrics, cover, etc.) by itself. Put a mp3 music link website here: http://up.mcyt.net/ , search for the corresponding music, then copy urland right-click the cover picture link and paste it to the corresponding location.
Note: Since there is no lyrics link on the external website, I have not configured it here, so the player does not display the lyrics when clicking the lyrics when playing the music.
_layout.swig
Open the themes\next\layout\_layout.swigfile and replace
<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><body itemscope ...>Just add it to the back, which is <body></body>inside.
Regenerate, visit the page, you can see the music player in the lower left corner.
