Este tutorial es principalmente para mostrar las nuevas incorporaciones a HTML5
La imagen de arriba es la interfaz UI de este reproductor de audio, que también oculta una lista de reproducción de canciones. Excepto por la imagen del retrato en el gran fondo y la calificación estelar de la canción, la interfaz de usuario de todo el jugador usa la imagen y es dibujada por CSS y Font-Face. Las únicas cosas que parecen difíciles son la producción de CD y discos. Cuando se reproduce la canción, tanto los CD como los discos tienen un efecto de interacción de animación. Esto se explicará en la parte posterior. Haga clic en el CD del reproductor para abrir la lista de reproducción ~
Debido a que este tutorial es principalmente para mostrar el uso de la API DOM de la nueva etiqueta <audio> y el elemento de audio agregado a HTML5, el sorteo de la interfaz de usuario del reproductor no se explicará en detalle aquí. Si tiene alguna pregunta, puede ver los comentarios del archivo CSS del caso usted mismo o dejar un mensaje a continuación.
Funciones principales:1. Reproducir, pausa, canción anterior, siguiente canción, aumento del volumen y disminución
2. Haga clic en el CD para abrir y cerrar la lista de reproducción
3. Puede arrastrar el archivo de música local al reproductor para su reproducción.
Estructura html
Copiar el código