Ajouter une fonction de lecteur de musique Web pour le blog
Télécharger
Cliquez pour accéder au code source d'Aplayer: GitHub Aplayer . Téléchargez sur le local, distcopiez le dossier dans le themes\next\sourcedossier après la décompression .
music.js
Nouveau themes\next\source\dist\music.jsfichier, ajouter du contenu:
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',
}
]
});Les explications des paramètres correspondants dans le code source sont disponibles ici: Documentation Aplayer Chinese
audioLe fichier correspondant est le fichier audio, de sorte que la musique que le lecteur de musique doit lire doit configurer les informations associées (telles que les liens des chansons, les paroles, la couverture, etc.) par elle-même. Mettez un site Web de liens de musique mp3 ici: http://up.mcyt.net/ , recherchez la musique correspondante, puis copiez urlet cliquez avec le bouton droit sur le lien de l'image de couverture et collez-le à l'emplacement correspondant.
Remarque: Puisqu'il n'y a pas de lien de paroles sur le site Web externe, je ne l'ai pas configuré ici, donc le lecteur n'affiche pas les paroles lorsqu'il clique sur les paroles lors de la lecture de la musique.
_layout.swig
Ouvrez le themes\next\layout\_layout.swigfichier et remplacez
<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>Ajoutez-le <body itemscope ...>simplement à l' arrière, qui est à l' <body></body>intérieur.
Régénérez, visitez la page, vous pouvez voir le lecteur de musique dans le coin inférieur gauche.
