Agregar función de reproductor de música web para blog
descargar
Haga clic para acceder al código fuente de Aplayer: GitHub Aplayer . Descargue en el local, distcopie la carpeta a la themes\next\sourcecarpeta después de la descompresión .
music.js
Nuevo themes\next\source\dist\music.jsarchivo, agregar contenido:
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',
}
]
});Las explicaciones de los parámetros correspondientes en el código fuente están disponibles aquí: Documentación china del jugador
audioEl correspondiente es el archivo de audio, por lo que la música que el reproductor de música necesita para reproducir necesita configurar la información relacionada (como enlaces de canciones, letras, portadas, etc.) por sí misma. Coloque un sitio web de enlace de música mp3 aquí: http://up.mcyt.net/ , busque la música correspondiente, luego copie urly haga clic derecho en el enlace de la imagen de la portada y péguelo en la ubicación correspondiente.
Nota: Dado que no hay un enlace de letras en el sitio web externo, no lo configuré aquí, por lo que el reproductor no muestra las letras al hacer clic en las letras al reproducir la música.
_layout.swig
Abre el themes\next\layout\_layout.swigarchivo y reemplaza
<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 ...>Simplemente agréguelo a la parte posterior, que está <body></body>adentro.
Regenera, visita la página, puedes ver el reproductor de música en la esquina inferior izquierda.
