Ce tutoriel est principalement pour montrer les nouveaux ajouts à HTML5
L'image ci-dessus est l'interface d'interface utilisateur de ce lecteur audio, qui cache également une liste de lecture de chansons. À l'exception de l'image de portrait sur le grand fond et la note d'étoile de la chanson, l'interface utilisateur du joueur entier utilise l'image et est dessinée par CSS et Font-Face. Les seules choses qui semblent difficiles sont la production de CD et de disques. Lorsque la chanson est jouée, les CD et les disques ont un effet d'interaction d'animation. Cela sera expliqué dans la dernière partie. Cliquez sur le CD du lecteur pour ouvrir la playlist ~
Étant donné que ce tutoriel est principalement pour afficher l'utilisation de l'API DOM de la nouvelle balise <faudio> et de l'élément audio ajouté à HTML5, le tirage de l'interface utilisateur du lecteur ne sera pas expliqué en détail ici. Si vous avez des questions, vous pouvez afficher les commentaires du fichier CSS vous-même ou laisser un message ci-dessous.
Fonctions principales:1. Play, pause, chanson précédente, chanson suivante, augmentation du volume et diminution
2. Cliquez sur le CD pour ouvrir et fermer la liste de lecture
3. Vous pouvez faire glisser le fichier musical local vers le lecteur pour la lecture.
Structure HTML
Copier le code