In diesem Tutorial wird hauptsächlich die neuen Ergänzungen zu HTML5 gezeigt
Das obige Bild ist die UI -Schnittstelle dieses Audio -Players, die auch eine Wiedergabeliste von Songs verbirgt. Mit Ausnahme des Porträtbildes auf dem großen Hintergrund und der Sternenbewertung des Songs verwendet die Benutzeroberfläche des gesamten Spielers das Bild und wird von CSS und Schriftart gezeichnet. Die einzigen Dinge, die schwierig erscheinen, sind die Produktion von CDs und Discs. Wenn das Lied gespielt wird, haben sowohl CDs als auch Discs einen Animations -Interaktionseffekt. Dies wird im späteren Teil erklärt. Klicken Sie auf die CD des Players, um die Wiedergabeliste zu öffnen ~
Da dieses Tutorial hauptsächlich die Verwendung der DOM -API des neuen <Audio> -Tag- und Audio -Elements, das HTML5 hinzugefügt wurde, zeigt, wird hier die Auslosung der Player -UI nicht im Detail erläutert. Wenn Sie Fragen haben, können Sie die Kommentare der CSS -Datei des Falls selbst anzeigen oder eine Nachricht unten hinterlassen.
Hauptfunktionen:1. Spielen, Pause, Vorgänger, nächster Lied, Lautstärkeerhöhung und Abnahme
2. Klicken Sie auf die CD, um die Wiedergabeliste zu öffnen und zu schließen
3.. Sie können die lokale Musikdatei zum Playback zum Player ziehen.
HTML -Struktur
Kopieren Sie den Code