JavaScript Fun: Baue eine Musik-Player-App!

1. Willkommen beim Kurs!: Hey, willkommen in dieser Klasse. Wenn Sie ein Webentwicklungsanfänger sind und einfach nur einspringen und einige lustige Projekte erstellen möchten, Sie an der richtigen Stelle gekommen. Die Idee hinter dieser Serie ist es, Ihnen zu zeigen, was Sie mit normalem HTML, CSS und JavaScript tun können . Ich werde keine Frameworks, keine Boilerplate, irgendwelche Bibliotheken oder Vorlagen verwenden. Stattdessen werden wir Schritt für Schritt alles komplett von Grund auf aufbauen , um Ihnen zu zeigen, wie diese freien Technologien alle zusammenarbeiten. Während dieses Kurses werden wir verschiedene Songs herunterladen , die wir in unsere Anwendung aufnehmen werden. Dann listen wir die unten unten auf. Sobald der Benutzer auf einen dieser Songs klickt, haben wir dann Zugriff auf alle Steuerelemente oben hier, wir werden auf den Play-Button klicken, können wir pausieren, wir können die Lautstärke anpassen. Wir sehen genau, welcher Song gerade abgespielt wird und wir haben auch diesen Fortschrittsbalken, der über die Dauer des Songs aktualisiert wird. Das ist es, was wir schaffen werden. Wir werden dies komplett von Grund auf mit HTML, CSS erstellen und es vollständig interaktiv mit JavaScript machen. Wir werden auch einige schöne Animationen hinzufügen, wenn wir auf einen Song klicken, diese Kopfhörer auch prallen lassen. Diese Anwendung wird Ihnen eine breite Palette von Fähigkeiten beibringen, einschließlich HTML-Audio, Arbeit mit CSS-Styling und Animationen. Natürlich wird es auch viel JavaScript geben. Wir werden Arrays von Songs haben, die durchlaufen und dann im Browser angezeigt werden. Wir werden Ereignis-Listener hinzufügen, so dass dieser Song aktiviert wird, wenn der Benutzer darauf klickt. Wir arbeiten mit Audio-Steuerelementen zum Abspielen, Anhalten, Neuladen, Lautstärkeregler, Arbeiten mit dem Song-Timing und der Dauer und viel mehr JavaScript-Grundlagen wie Vorlagenzeichenfolgen, Arbeiten mit Funktionen, bedingten Anweisungen, -Konstanten und vieles mehr. Diese Klasse ist für JavaScript-Anfänger konzipiert. Beachten Sie jedoch, dass dies das sechste Projekt in dieser JavaScript-Fun Serie ist Wenn Sie also ein JavaScript-Anfänger sind, würde ich empfehlen, dass Sie die ersten Projekte durchlaufen, um Ihnen eine gute Grundlage für das Erreichen von in dieser Phase. Obwohl, wenn Sie etwas JavaScript-Erfahrung haben könnten Sie einfach direkt zu diesem Projekt springen. Vielen Dank, dass Sie Interesse haben. Ich hoffe, diese Klasse ist angenehm und ich sehe Sie in der ersten Lektion. 2. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen diesen Kurs zu verfolgen , nur um eine weitere Vorlesung abzuhaken. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den Code, den Sie schreiben, zu überprüfen und darüber nachzudenken, wie Sie diese Lösungen selbst angehen könnten . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Du musst dich nicht zu sehr verirren und vom Unterricht ablenken. Sie können sogar einen Schritt zurücktreten , nachdem Sie den Kurs beendet haben und anschließend zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das, was du im Unterricht gelernt hast, praktisch anzuwenden. auch daran, Ihr Projekt 2 hier auf Skillshare zu teilen. Ich werde es mir nicht nur ansehen, sondern es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, der Registerkarte Projekt und Ressourcen wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 3. Wo findet man Audio für die App: Bevor wir mit unserer Musik-Player-Anwendung beginnen, müssen wir auch einige Songs finden, um in unserer App spielen zu können. Wenn Sie also einige MP3-Dateien oder einige Audiodateien haben, die Sie verwenden möchten, können Sie natürlich diese vorhandenen verwenden und diese in einem Ordner namens Lieder ablegen. Hier habe ich sechs Songs bereit, die ich werde diese App verwenden. Alles, was Sie tun müssen, ist, über alle vorhandenen Musikdateien, die Sie haben, zu ziehen und sie in einem Musikordner zu platzieren. Alternativ, wenn Sie keine Songs zur Verfügung haben, gibt es viele Websites, um einige Dateien herunterzuladen. Ich werde die Audiodateien von bensound.com verwenden, und bensound.com ist eine Möglichkeit, einige lizenzfreie Musik herunterzuladen, die Sie in unserer App verwenden können. Wir können die Musik nach verschiedenen Genres auswählen. Wir können alle auswählen. Wir haben auch alle verschiedenen Etiketten oberhalb der oberen hier, wir können durch die Seiten blättern. Sobald Sie ein paar Songs gefunden haben, die wir mögen, können wir auf den Download klicken. Wir sehen, dass wir einige Optionen zum Herunterladen haben. Wir können dies mit einer kostenlosen Lizenz verwenden, wenn wir einige Zuschreibungen zum Angebot bereitstellen. Alles, was wir tun müssen, ist einen Link in unserem Projekt auf die Website zu schreiben. Wenn Sie ein Audio, das auf dieser Website ist, mögen, gehen Sie vor und laden Sie einige davon herunter und legen Sie sie in den Musikordner. Es gibt auch eine Pro-Lizenz zum Kauf. Dies ist, wenn wir keine Zuordnung zur Verfügung stellen wollen. Gehen Sie weiter und laden Sie einige Musik herunter, die Sie verwenden möchten. Legen Sie sie in den Musikordner, und wir beginnen, dies im nächsten Video zu erstellen. 4. HTML-Struktur und Audio abspielen: Sie sollten jetzt einen Song-Ordner bereit mit etwas Musik, die Sie in dieser Anwendung abspielen möchten. Um zu beginnen, wird dies das Projekt sein, das wir aufbauen werden. Es wird eine Musik-Player-Anwendung sein, die es uns ermöglicht, einige Audiodateien zu unserem Projekt hinzuzufügen und sie dann innerhalb dieser App abzuspielen. Wir werden alle Songs innerhalb unseres Projektordners durchlaufen , der unten unten angezeigt wird. Wir können dann auf einen dieser Songs klicken. Wir werden eine kleine Puls-Animation mit dem Header sehen, und unser Song wird jetzt abgespielt. Wir haben auch einige benutzerdefinierte Audio-Steuerelemente, wir haben die Schaltfläche „Play“. Wir haben die Schaltfläche „Pause“, und wir können auch die Lautstärke unten steuern. Dies wird auch einen Audio-Fortschrittsbalken haben, so dass wir sehen können, wie weit durch diesen Song wir tatsächlich sind. Ich bin sicher, Sie sind begierig, mit diesem Projekt zu beginnen. Lassen Sie uns einen neuen Ordner auf dem Desktop erstellen. Wir werden das den Musik-Player nennen. Ziehen Sie über unseren Song-Ordner. Dann können wir dies in Visual Studio Code öffnen. Das erste, was wir tun müssen, ist, eine Indexseite innerhalb unseres Musik-Players zu erstellen . Lassen Sie uns auf eine neue Datei klicken, und das ist die index.html. Sie haben auch die Möglichkeit, das gleiche Kopfhörerbild zu verwenden, das ich hier verwendet habe. Oder Sie können auch Ihre eigenen herunterladen. Wenn Sie genau den gleichen Kopf über das gleiche GitHub-Repository verwenden möchten , das wir während dieses Kurses verwendet haben, gehen Sie in die Musik-Player-Anwendung, und dann sehen wir eine headphones.svg. Wenn wir darauf klicken, können wir dann auf das Symbol „Code“ klicken, das uns dann den gesamten SVG-Code gibt, den wir unserem Projekt hinzufügen müssen. Lassen Sie uns all diesen Code greifen und dann eine neue Datei in der Seitenleiste erstellen. Ich möchte meine neue headphones.svg aufrufen. Fügen Sie unseren Inhalt ein und speichern Sie diese Datei. Wir werden in einem Moment darauf zurückkommen, wenn wir zu dieser Phase in unserem HTML kommen. Aber vorerst müssen wir unsere HTML-Struktur mit der Emmet-Verknüpfung erstellen, die HTML5 ist. Drücken Sie „Enter“. Dann können wir unseren Dokumententitel in „Music Player“ ändern. Die Benutzeroberfläche für dieses Projekt ist relativ unkompliziert. Wir werden nur damit beginnen, unser Bild ganz oben zu erstellen, innerhalb eines Hauptcontainers. Dann unten wird dieser unseren Audio-Player haben. Ich werde die Lieder auflisten. Wir werden auch die Standard-Audio-Steuerelemente nur für den Moment verwenden, und dann werden wir diese im kommenden Video überschreiben. Zunächst werden wir innerhalb des Body-Abschnitts ein div erstellen, das der Wrapper für unser vollständiges Projekt ist. Dieses div wird die Klasse des Spielers haben. Dies ist nur so, dass wir einige CSS Styling in einem kommenden Video hinzufügen können. Das Bild wird das Bild sein, das Sie gerade von GitHub heruntergeladen haben, oder Sie können Ihr eigenes verwenden, wenn Sie es bevorzugen. An der Quelle ist meins die „headphones.svg“, nur ALT-Text zu. Lassen Sie uns überprüfen, dass dies funktioniert, indem Sie unsere Index-Seite innerhalb des Browsers öffnen. Kopieren Sie den Pfad. Fügen Sie dies ein und es gibt unsere SVG auf dem Bildschirm. Das nächste, was zu tun ist, ist immer noch innerhalb dieses Haupt-div-Abschnitts, ist, tatsächlich unseren Audio-Player zu erstellen , der unsere Songs abspielen wird. HTML hat ein Audio-Elemente. Fügen wir das hier hinzu. Dies hat das öffnende und das schließende Tag. Geben Sie uns eine Vorstellung von Spielern, damit wir dies später in JavaScript verwenden können. Dann müssen wir eine Audioquelle zur Verfügung stellen, mit der der Audioplayer arbeiten wird. Wir verwenden dies mit dem Quellelement. Dies ist ein selbstschließendes Element, so dass wir kein schließendes Tag haben müssen. Auch für die Zwecke von JavaScript, später geben wir uns eine Vorstellung von Quelle, so dass wir dies dynamisch aus unserem Skript setzen können. Dies benötigt auch eine Quellattribute. Von hier aus können wir jeden unserer Songs übergeben, sich innerhalb unserer Lieder-Ordner befindet. Wir können eine von diesen auswählen. Es spielt momentan keine Rolle, nur für unsere Testzwecke. Wir haben unseren Audio-Player und auch eine Quelle. Dann werden wir kurz danach etwas Text hinzufügen, der Audio nicht unterstützt wird. Nun, der Audio-Player gibt es schon eine Weile, aber wenn sie es verwenden, es einen wirklich alten Browser oder einen Browser, der kein Audio unterstützt. Dieser Text wird auf dem Bildschirm an Ort und Stelle angezeigt. Nach dem Audioplayer können wir dann mit der Erstellung unserer Songliste mit einer Level-2-Überschrift meiner Songs arbeiten . Unsere Liedliste wird innerhalb eines div mit einer ID der Songliste eingewickelt werden. Moment werden wir eine ältere Liste anzeigen, die zur Ausgabe gegangen ist. Die Namen aller Songs innerhalb unserer Lieder Ordner. Unser erster Listeneintrag wird der erste Song sein, der sich in unserem Song-Ordner befindet. Lasst uns das öffnen. Dann müssen wir einen Song genau so eingeben, wie er im Inneren von hier erscheint. Die erste ist von der Erweiterung „bensounds-clapandyell.mp3". Ich benutze hier sechs verschiedene Songs, die alle mit Bensound beginnen. Ich werde das noch fünf Mal duplizieren. Der zweite ist „Tanz“. Das dritte, „Funky Element“. Dann „Glück“. „ Happy Rock.“ Dann ist der letzte „The Lounge“. Wir können entweder den Browser aktualisieren oder wir können auch den Live-Server nutzen. Ich gehe zum Befehl „Ansicht“ und gebe die Befehlspallete ein und suche dann nach dem Live-Server. Öffnen Sie diese dann mit dem Live-Server. Jetzt im Browser haben wir unser Kopfhörerbild. Wir haben auch unsere Liste von Songs, aber momentan sehen wir nichts, was mit unserem Audioplayer zu tun hat. Dies liegt daran, dass wir die Steuerelemente hinzufügen müssen, damit dies auf dem Bildschirm angezeigt wird. Dies ist ein Attribut und dies wird sicherstellen, dass unser Audioplayer im Browser angezeigt wird und alle notwendigen Steuerelemente enthält, die wir benötigen, um unsere Songs zu steuern, das heißt Wiedergabe, ein Lautstärkeregler und auch die Zeitdauer des Songs. Da wir die Quelle bereits als einer unserer Songs eingestellt haben, können wir nun im Browser „Play“ drücken. Unser Song wird nun das Spiel starten. Dies ist die Grundlagen unseres HTML und auch ein Standard Standard Standard HTML 5 Audio Player. Allerdings werden wir diesen Audio-Player nicht für unser Projekt verwenden. Wir werden jetzt zum nächsten Video übergehen, wo wir einen benutzerdefinierten Audioplayer erstellen werden. 5. Benutzerdefinierte Audio-Bedienelemente: Wie wir im vorherigen Video gesehen haben, haben wir jetzt Steuerelemente, die die Standard-Audio-Steuerelemente sind , die mit dem HTML5-Audioplayer zur Verfügung gestellt werden. Wir werden jetzt unsere eigenen Steuerelemente für dieses Projekt erstellen , das die Wiedergabe-Taste, die Pause-Taste und auch die Lautstärke- und Fortschrittsleiste enthält . Die Art und Weise, wie wir im letzten Video gesehen haben, um dies zu entfernen, besteht darin, unser Steuerelementattribut zu entfernen, das sich innerhalb des Audio-Players befindet. Wenn wir dies speichern, sehen wir, dass unser Audio-Player jetzt aus dem Browser entfernt wird. Von unserem Quellelement direkt unten können wir auch das Quellattribut entfernen, da wir dies dynamisch mit JavaScript hinzufügen werden. Jetzt haben wir diese Kontrollen entfernt, wir müssen jetzt weitermachen und unsere eigenen erstellen. Um dies zu tun, lassen Sie uns direkt unter unseren Audio-Player gehen und wir erstellen ein neues div, das die ID der Steuerelemente haben wird. Dieser Steuerungsabschnitt, wenn wir auf die endgültige Version gehen wird der Text an der Spitze mit dem aktuellen abzuspielenden Song haben. Wir haben eine Wiedergabe-Taste und eine Pause, zusammen mit einem Lautstärkeregler unten unten. Es gibt Kontrollabschnitt. Wenn wir zur endgültigen Version gehen, wird dies den Text der jetzt abzuspielen und dann den aktuellen Song abzuspielen. Wir haben unsere Symbole zum Spielen und Pausieren. Dann unser Lautstärkeregler unten unten. Beginnen wir mit unserem p Element, das für unseren Text für den aktuell abgespielten Song sein wird. Diese p Elemente werden für jetzt leer sein, da wir dies über JavaScript setzen, aber wir können dies vorerst mit einer ID des aktuellen Songs setzen. Kurz danach können wir ein div erstellen, das ein Wrapper für alle Spiele auf unseren Pause-Buttons ist. Die Klasse für diesen Wrapper wird Controls Wrapper sein, dies ist für unser CSS. Dann im Inneren werden wir unsere zwei Span-Elemente hinzufügen und dies wird eine HTML-Entität haben. Der erste HTML-Entitätscode, den wir verwenden werden, wird für unseren Play-Button sein. Dies hat den Wert des kaufmännischen Unds, des Hash, 9658, gefolgt vom Semikolon. Der zweite wird für unsere Pause sein und um dies zu tun, wir zwei vertikale Balken erstellen, genau wie wir auf der endgültigen Version gerade hier sehen. Der Code, den wir dafür brauchen, ist, dass das kaufmännische Unds , das harte, 10074 und das Semikolon. Wir sehen, dass wir gerade einen dieser vertikalen Balken im Moment haben, aber wir können diesen kopieren und ihn direkt daneben einfügen, um uns das Pause-Symbol zu geben. Wir brauchen dann auch einen Volumenabschnitt, der nur dieses div blasen wird, so dass div p Elemente das Volumen erkennen. Ein div mit der Klasse des Volumens und dies wird ein Wrapper für unsere positiven, unsere negativen Symbole und auch die Eingabe sein, die den Typ des Bereichs haben wird. Zuerst das negative Symbol innerhalb unserer Span-Elemente, das ist einfach ein Bindestrich gefolgt von unseren Eingaben mit dem Typ des Bereichs. Wir können dies von unserem JavaScript steuern, indem wir ihm eine ID der Lautstärkeregler geben. Für unser Volumen müssen wir den Bereich zwischen Null und eins einstellen und wir können dies mit min gleich Null und das max Attribut gleich eins tun. Das endgültige Attribut dieses Schritts, ich werde dies auf 0,01 setzen, und das bedeutet, dass unser Bereichsschieber, wenn wir von links nach rechts gehen, in Stufen von 0,01 nach oben gehen. Dies wird uns einen ziemlich glatten Schieberegler geben, wie wir von links nach rechts gehen und dann gleich danach werden wir eine seltsame auf das Plus-Symbol überspannen müssen. Dies ist nun der visuelle oder der HTML-Abschnitt, der jetzt für unsere benutzerdefinierten Steuerelemente gesorgt wird. Da dies einfach HTML-Elemente sind, werden sie im Moment keine Musik im Browser abspielen, aber wir werden dies sehr bald mit JavaScript beheben. 6. CSS-Styling: Gehen Sie zum Styling. Lassen Sie uns zur Sidebar gehen und unsere Stylesheets erstellen, die ich die styles.css nennen möchte. Wir können dies dann innerhalb unseres Index, innerhalb des Kopfabschnitts mit dem Link-Element verknüpfen. Die Beziehung ist ein Stylesheet, und das ist eine neue Wurzel unseres Projekts. Wir können dies mit styles.css verknüpfen. Öffnen Sie dies, und wie immer werden wir mit unserem HTML-Abschnitt beginnen, indem Sie die Root-Schriftgröße einstellen. Dies ist nur die Art, wie ich Dinge mache, indem ich dies auf 10 Pixel setze. Um die Berechnungen beim Konvertieren mit einem REM wirklich einfach zu machen. Aber wie immer können Sie sich diesem auf jede andere Art und Weise nähern, die Sie bevorzugen. Ihr Körperabschnitt dafür wird einen Hintergrund haben, der ein linearer Farbverlauf sein wird. Dann können wir innerhalb unserer beiden Werte hinzufügen, um zwischen zu verschmelzen. Der erste, ein Hex-Wert von 3b3b3b. Der zweite wird ziemlich ähnlich sein. Dies wird 2b2b2b sein. Wenn Sie den Live-Server verwenden, können Sie einfach die Datei speichern und dadurch wird der Browser sofort aktualisiert. Wenn nicht, gehen Sie einfach zum Browser und drücken Sie Aktualisieren. Nach dem Hintergrund können wir auch die Höhe davon auf 100 Prozent einstellen. Dies wird den Hintergrund dehnen, wenn wir mehr Inhalt erhalten. Die aktuelle Farbe auf dem Text ist ein wenig zu dunkel für den Hintergrund. Also werde ich das ändern, um einen Wert von weißem Rauch zu sein. Auch eine größere Schriftgröße von 1,4 REMs. Wir können dies auch mit Marge zentrieren. Ich werde für zwei REMs gehen, die oben und unten sein werden, und dann Null auf der linken und rechten. Einige Polsterung, die uns etwas Platz in der Innenseite dieses grauen Körperabschnitts geben wird, auch von zwei REMs. Wir können den Text mit Text-ausrichten Mitte zentrieren. Danach gehen wir zur Indexseite über. Wir können sehen, dass wir im Körper dieses div mit der Klasse des Spielers haben. Dies wird so ziemlich den gesamten Inhalt im Inneren umgeben. Genau wie wir nur die endgültige Version sehen, werden wir diesem eine Hintergrundfarbe geben, die diese violette Farbe ist, und es hat auch einen radialen Farbverlauf. Wir haben die dunklere Farbe in der Mitte, und dann breitet es sich aus, um eine hellere Farbe auf der Außenseite zu sein. Unser Ziel ist die Spielerklasse über in unserem Stylesheet. Lassen Sie uns unseren Hintergrund und den radialen Farbverlauf einstellen. Die beiden Werte, für die ich gehen werde, werden 211e24 sein. Die zweite, wieder, ein Hex-Wert, den Sie dies 4f3341. Wir sehen nun unseren radialen Farbverlauf, der von der Mitte des Hintergrunds kommt und sich bis zum äußeren Rand verschmilzt. Danach einige Polsterung, um dies einige Abstände auf der Innenseite des Elements von zwei REMs zu geben , und dann können wir die Ecken dieses violetten Abschnitts mit unserem Randradius runden. Jetzt wird der Wrapper betreut, und wir müssen jetzt innerhalb dieses Player-Abschnitts bewegen und dann beginnen, mit unseren Inhalten zu arbeiten. Ganz oben haben wir dieses Bild und das Bild ist ein wenig zu groß für unser Projekt. Wenn wir in unser Stylesheet gehen, können wir das anvisieren. Dann können wir die Breite auf 50 Prozent des verfügbaren Platzes beschränken. Nach unserem Bild brauchen wir nichts mit diesem Audiobereich zu tun , da wir unsere eigenen benutzerdefinierten Steuerelemente verwenden, die direkt unten aufgeführt sind. Dieser Steuerungsabschnitt hat die ID der Steuerelemente. Wir werden verwenden, ist, einen Rahmen und auch einige Polsterung zu dem Abschnitt hinzuzufügen, genau wie wir in der endgültigen Version sehen. Die Idee der Steuerelemente, wir zielen dies mit dem Hash ab. Die Grenze, dies wird ein Pixel breit sein, eine Farbe von hellem Schiefergrau. Dies wird auch eine durchgezogene Linie sein. Um die Ecken zu runden, können wir unseren Randradius von 10 Pixeln hinzufügen oder wir können auch einen REM machen. Auch einige Polsterung auf der Innenseite des Abschnitts, um es einige Abstände von unseren Steuerelementen zu geben. Derzeit sehen wir jetzt weniger Inhalte auf dem Bildschirm, da wir das Bild ein wenig kleiner gemacht haben. Wir können nun sehen, dass die graue Hintergrundfarbe, die wir für den Körperabschnitt hatten , jetzt nicht die volle Höhe der Seite abdeckt. Um dies zu beheben, können wir die Höhe auf 100 Prozent der aktuellen Ansichtsbrettthöhe ändern, d. h. die Höhe des Browsers. Wir können auch dafür sorgen, dass dies das Minimum ist. Gehen Sie zu unserem HTML und dann innen hier, wir haben diese Klasse von Steuerelementen Wrapper. Hier im Inneren enthält dies unsere beiden Spannweiten, die unsere Symbole für die Wiedergabe und Pause-Steuerung haben . Wir können all diese lustigen Elemente anvisieren, die sich in unserem Kontrollwickler befinden. Zurück zu unseren Stylesheets. Wir können dann den controls_wrapper anvisieren. Dann können wir alle Span-Elemente auswählen, die sofort diesem div folgen. Im Inneren von hier wollen wir sicherstellen, dass der Mauszeiger ein Zeiger ist. Dies ändert unseren Zeiger jedes Mal, wenn wir den Mauszeiger über eines dieser Symbole bewegen. Die Farbe, dies wird mit der Grenze übereinstimmen, also wird dies hellschiefergrau sein. Wir können diese mit der Schriftgröße von sechs REMs vergrößern. Etwas Polsterung, um diesem etwas Abstand zu geben. Dann gehen wir auf unsere Songs. Zuallererst haben wir innerhalb dieses Wrappers auch dieses p-Element mit der ID von currentSong. Jedes Mal, wenn der Benutzer auf einen dieser Songs klickt, werden wir dann den Songnamen greifen und dann ganz oben platzieren. Wir müssen auch handhaben, was zu tun ist, wenn ein Songtitel wirklich lang ist, da wir nicht wollen, dass dies vom Rand des Bildschirms verschüttet wird. Der Weg, dies zu tun, wenn wir unsere ID ergreifen, die currentSong ist, und wir den Hash verwenden. Alles, was wir tun werden, um dies zu verhindern, ist, die Überlaufeigenschaft zu setzen und dies so zu setzen, dass es ausgeblendet wird. Dies wird im Grunde den Rest des Titels verbergen, der zu breit ist, um in den Container zu passen. Wenn unser Titel direkt über die Seite lag, sobald er an den Rand unseres div kam, würde der Rest des Textes dann ausgeblendet werden. Wir können das gleiche auch unten in unserer Songliste tun. Also scrollen wir nach unten. Der Song-Sektion hat diese ID von SongList. Wir werden das gleiche tun, wir werden den Überlauf so einstellen, dass er ausgeblendet wird. Wir können auch alle Texte auf der linken Seite unseres Abschnitts ausrichten. Jeder unserer Songs ist ein Listeneintrag. Zurück zu unserem HTML haben wir unsere Listenelemente, die jeden dieser Songs umschließen. Wir können den Cursor auch so ändern, dass er ein Zeiger jedes Mal, wenn der Benutzer über einen dieser Songs schwebt, genau wie wir es mit unseren Symbolen getan haben. Unser Listenartikel. Der Cursor wird ein Zeiger sein. Auch 1.5 REMs der Polsterung geben uns einige Abstände zwischen jedem unserer Songs. Wir haben unseren Abstand, und wir können auch sehen, dass der Cursor in einen Zeiger ändert, wenn wir den Mauszeiger über jeden dieser bewegen. Wir können auch sicherstellen, dass sich die Hintergrundfarbe ändert, um eine passende rote Farbe zu diesen Kopfhörern zu sein. Lassen Sie uns dies tun, wenn wir den Mauszeiger über eines dieser Listenelemente bewegen, also li. Wir können den Hover-Zustand auswählen. Alles, was wir tun werden, ist, die Hintergrundfarbe auf einen roten Wert zu setzen, der f3644b ist. Dies ist jetzt die Basis des Stylings für unsere Anwendung, und es sieht auch ziemlich gut auf dem kleinen Bildschirm aus. Wenn wir dies jedoch viel breiter machen, möchten wir möglicherweise eine Medienabfrage einführen um die maximale Breite dieses Körperabschnitts einzuschränken. Fügen wir dies ganz unten bei Medien hinzu, und dann wählen wir alle unsere Bildschirme mit einer Mindestbreite von 800 Pixeln aus. Wählen Sie unseren Körperbereich aus, und dann können wir die maximale Breite auf 60 Prozent der Ansichtsbalkenbreite einstellen. Auch die Schriftgröße, erhöhen wir dies auf 1,8 REMs. Der Körperabschnitt ist jetzt eingeschränkt, aber wir müssen ihn auch wieder in die Mitte legen. Lasst uns das machen. Wenn wir zu unserem ursprünglichen Körperteil und innerhalb des Randes zurückkehren, setzen wir zwei REMs am Rand oben und unten ein. Setzen Sie Null auf der linken und rechten Seite. Wir können dies beheben, indem wir dies auf auto setzen, und dies wird jeden verbleibenden Rand auf der linken und rechten Seite gleichmäßig aufteilen. Dies ist das Styling jetzt für unsere App getan. Dann gehen wir weiter, um JavaScript hinzuzufügen, um alle unsere Songs aufzulisten. 7. Unsere Songs mit Javascript auflisten: Der nächste Schritt für dieses Projekt besteht darin, unser Skript hinzuzufügen. Öffnen Sie die Sidebar wurde unsere neue script.ks erstellen. Innerhalb der Indexseite können Sie diese direkt über dem schließenden Body-Tag verknüpfen. Die Skripte haben die Quelle innerhalb unseres Stammes. Dies ist einfach die script.js. Um zu beginnen, werden wir alle unsere Listenelemente greifen, diese innerhalb eines Arrays platzieren und dann eine FOR-Schleife erstellen, die diese wieder innerhalb dieses Abschnitts platzieren wird. Schnappen Sie sich jeden unserer Listenelemente. Ich werde die in unsere Skripte kopieren. Im Moment ist dies kein gültiges JavaScript. Wir werden das in unser Array bringen. Unser Array wird Songs genannt werden. Dann werden wir uns über jeden unserer Listenelemente bewegen und diese innerhalb der Zitate platzieren. Der erste, durch Komma getrennt, packt unseren zweiten, platziert diese in die Anführungszeichen, ich werde ein Komma zwischen jedem dieser Array-Elemente hinzufügen, diese innerhalb des Array-Arrays platzieren. Wir können auch jedes dieser Listenelemente entfernen. Jetzt, da jeder unserer Songs in unserem JavaScript ist, können wir dann zurück zu unserer Index-Seite gehen und diese vollständige geordnete Liste entfernen. Dies liegt daran, dass wir eine Funktion erstellen, die unsere Songliste auswählen und dann in eine neue Bestellliste platzierenwird unsere Songliste auswählen und dann in eine neue Bestellliste platzieren , die von JavaScript erstellt wurde. Um dies zu tun, lassen Sie uns eine Funktion erstellen Songliste genannt erstellen. Das erste, was wir innerhalb dieser Funktion tun müssen, ist eine neue geordnete Liste zu erstellen. Wir tun dies mit document.createElements, das ist in unserer geordneten Liste. Wir müssen dies auch innerhalb einer Konstante installieren, damit wir jedes Listenelement hinzufügen können. Aber wie können wir sechs neue Listenelemente erstellen? Nun, wir könnten jedes einzeln hinzufügen, aber es ist viel effizienter, eine Schleife zu erstellen, um dies sechsmal zu tun. Lassen Sie uns eine FOR-Schleife erstellen. Wir möchten, dass diese Schleife sechs Mal oder so oft wie Array-Elemente ausgeführt wird. Die Art und Weise, wie wir diesen Lauf sechsmal machen können, besteht darin, eine Variable zu erstellen. Ich werde meins i aufrufen und dies zunächst auf den Wert 0 setzen. Die zweite Deklaration ist, wie oft wir wollen, dass diese Schleife ausgeführt wird. Im Moment haben wir sechs separate Songs, aber wir wollen keinen hartcodierten Wert hinzufügen. Stattdessen können wir auf unsere Lieder Array zugreifen und das Grundstück nutzen. Wir werden das so lange laufen lassen, wie der Wert von i kleiner ist als ein songs.length. Dann jedes Mal, wenn diese FOR-Schleife läuft, werden wir dann den Wert von i um eins erhöhen. Nur um zusammenzufassen, werden sechs Listenelemente erstellen. Um dies zu tun, werden wir eine FOR-Schleife verwenden. Um sicherzustellen, dass dies sechs Mal läuft, verwenden wir eine Variable namens i. Das erste Mal, wenn diese Schleife läuft, werde ich gleich 0 sein. Es wird dann weiterlaufen, solange ich weniger als songs.length ist, die gleich sechs ist. Ich werde es dann erhöhen, um einen Wert von eins zu sein. Das nächste Mal, wenn diese Schleife läuft, werde ich gleich eins sein, was kleiner ist als die Länge unseres Songs Arrays. Dies wird bis zur letzten Schleife laufen, wo ich gleich sechs sein werde, was nicht mehr kleiner als songs.length ist, wodurch unsere Schleife endet. Zu Beginn erstellen wir unser neues Listenelement mit document.createElements. Das Element, das wir erstellen möchten, ist ein Listenelement und speichern Sie dieses innerhalb einer Konstante namens Element. Dies führt uns dann mit einem HTML-Element genau so. Dann müssen wir unsere Inhalte erstellen, die im Inneren sind. Zum Beispiel möchten wir in unserer ersten Schleife die allerersten Elemente innerhalb unseres Arrays übergeben . Die Art und Weise, wie wir dies erstellen können, ist, indem Sie einen Textknoten erstellen. Wie gehen wir bei der Erstellung dieser Inhalte? Was wir dies mit Document.CreateTextNode tun können. Der Textknoten, den wir erstellen möchten, stammt aus unserem Lieder-Array und dem Wert von i. In der allerersten Schleife ist ich bei 0. Dies wird Song 0 sein, das ist unser allererster. In der zweiten Schleife Songs gleich 1, dies wird unsere zweite sein. Da du dich daran erinnerst, dass Arrays bei einem Index von 0 beginnen, wird uns dies unseren Songtitel geben. Wir können diese dann an unseren Artikel anhängen. Entfernen Sie diese. Wir können unseren Artikel greifen, rufen Sie die Methode anhängen Kind genannt. Dann können wir in unseren Textknoten einfügen. Danach wollen wir greifen Ich werde Liste ändern, die innerhalb dieser Listenvariablen gespeichert ist. Wir können dann append child anrufen und unser individuelles Listenelement hinzufügen. Am Ende unserer Funktion können wir dann unsere neu erstellte geordnete Liste zurückgeben. Dann können wir dies dem DOM hinzufügen, wenn wir zu unserer Indexseite gehen. Denken Sie daran, wir haben dieses div mit der ID der Song-Liste. Wir werden dann unsere Bestellliste wieder innerhalb dieses Abschnitts platzieren. Also zurück zu unserem Skript und wir können das, wo wir Element für ID bekommen, wo wir in unserer Songliste übergeben wollen. Wir werden untergeordnete Methode anhängen. Dann können wir die zurückgegebene Liste von unserer Funktion „Songliste erstellen“ übergeben. Dadurch werden nun alle unsere Songs wieder in unseren Player aufgenommen. Derzeit können wir auf keinen dieser Songs klicken, um abzuspielen. Das wird etwas sein, was wir im nächsten Video reparieren werden. 8. Songs dynamisch abspielen: Gut, also haben wir jetzt unsere Songs im Browser aufgelistet, und das nächste, was wir tun werden, ist, den Benutzer zu ermöglichen, auf einen dieser Songtitel zu klicken und dann in den Player zu laden. Die Art und Weise, wie wir dies tun werden, ist, wieder unsere Songliste zu nutzen, und dann werden wir jedes Mal eine Funktion auslösen, und dies wird angeklickt. Anstatt diesen Abschnitt hier zu duplizieren, werden wir diese Referenz innerhalb einer Konstante namens SongList lösen. Wir können dann unsere AppendChild Abschnitt greifen, die wir im letzten Video erstellt haben, entfernen Sie diese, und dann können wir diese direkt zu unserer Konstante hinzufügen. Jetzt haben wir die Songliste innerhalb einer Konstante gespeichert. Wir können dies auch nutzen und auf eventuelle Klicks auf den Abschnitt hören. Wir können dies mit einer Eigenschaft namens onclick tun, und dies wird eine Funktion auslösen. Diese Funktion wird die Ereignisinformationen aufnehmen, und wir werden einen Blick auf genau, welche Informationen in diesem Ereignis enthalten sind , werfen, indem wir diese an der Konsole protokollieren. Jetzt gehen wir zu unserer Konsole innerhalb des Browsers. Klicken Sie auf einen dieser Songs, und dann werden wir viele Informationen sehen, die in der Konsole angezeigt werden. Wir sehen, dass dies ein Mausereignis ist, da dies mit der Maus angeklickt wurde. Insbesondere die Information, an der wir interessiert sind, ist dieses Ziel gerade hier. Innerhalb des Ziels müssen wir nach unten scrollen und einen Blick auf unseren InnerText werfen. Wir können sehen, dass der InnerText den Namen unseres Liedes enthält. Wenn wir auch versuchen, auf ein anderes Element zu klicken, wie die Nummer 4, können wir dann zurück zur Konsole gehen, diese öffnen, und innerhalb unserer Ziele und wieder runter zu unserem InnerText. Wir sehen, dass wir wieder Zugriff auf unseren Songtitel haben, also was wir tun müssen, wenn wir auf unsere Indexseite gehen und zu unserem Audio-Player scrollen, denken Sie daran, wir dieses Quellattribut früh verschoben haben. Was wir jetzt tun müssen, ist, unseren inneren Text zu greifen und diesen dann als unser neues Attribut zu ersetzen. Der Weg, dies zu tun: Zunächst einmal, wenn wir einen Verweis auf unsere Quelle nehmen, und wir können dies mit einem document.getElementById tun. Die ID für dieses Element ist auch Quelle, und jetzt können wir auf unsere Quellvariable zugreifen, das Quellattribut setzen, und das Attribut wird der Dateipfad zu unserem Lied sein, so dass alle unsere Songs in diesen Songs gespeichert sind -Ordner. Wir müssen Songs hinzufügen, Schrägstrich, und dann, wie wir in der Konsole gesehen haben, um den Wert unseres Songnamens zu erhalten, müssen wir auf unsere Ereignisvariable, das Ziel und dann auch auf den InnerText zugreifen . Dann gibt es noch zwei kleine Dinge, die wir tun müssen. Diese beiden Dinge besteht darin, das Audio und dann den Aufruf zur Wiedergabefunktion zu laden. Um dies zu tun, benötigen wir einen Verweis auf unseren Spieler. Wenn wir zu unserem HTML zurückkehren, beherbergt unser Audio-Element ID des Players. Lassen Sie uns unsere Referenz greifen, speichern Sie diese innerhalb einer Konstante, Hier const Spieler. Diese const ist gleich document.getElementById, die ID ist player. Dann können wir diese Player-Variable verwenden, um zunächst laden, das wird das Audio vorladen, das wir gerade oben gesetzt haben, ohne es tatsächlich im Browser abzuspielen. Es werden auch alle zuvor geladenen Songs entfernt oder zurückgesetzt. Danach greifen wir wieder auf unsere Player-Variable zu. Aber dieses Mal nennen wir Play, das beginnt, unsere Audiospur abzuspielen. Probieren wir das aus. Wenn wir zum Browser gehen, klicken Sie auf einen unserer Songs, Sie sollten jetzt sehen, dass die Songs sofort abgespielt werden. Gut, also jetzt ist das an Ort und Stelle. Ich gehe einfach zu unserer index.html zurück. Wenn Sie auch einige Audiospuren verwenden, genau wie ich, die eine Attribution benötigen, können Sie dies innerhalb des HTML sortieren und was sich direkt unter der Songliste befindet. Ich möchte dies als Text hinzufügen, also Musik, meins ist bensound.com. Wir werden es innen verschachteln, ich werde einen Link mit dem A-Element hinzufügen. Der Link war https, das war bensound.com. Wir können auch diesen Link greifen und diesen in als Link-Text einfügen. Der Linktext ist ein wenig schwer zu sehen, so dass wir eine kleine Änderung an unserem CSS vornehmen können. Ganz unten, schnappen Sie sich unser ein Element. Wir können auch eine passende Farbe setzen, um weißen Rauch zu sein, so dass unser Link viel sichtbarer ist. unsere Songs jetzt spielen, ist das nächste, was wir in dem kommenden Video tun werden, auch den Songtitel zu greifen und auch direkt über unseren Icons anzuzeigen. 9. Den aktuell gespielten Titel einstellen: Dies wird ein ziemlich unkompliziertes Video sein. Alles, was wir tun werden, ist, diesen Songtitel zu greifen und dann im Browser anzuzeigen. Wir werden dies tun, ist unser p Element, das wir früh in der Index-Seite erstellt zu wählen . Dieses p-Element hat die ID „currentSong“ und ist derzeit auf leer gesetzt. Lassen Sie uns dies mit der ID versuchen, und wir können den inneren Text einstellen. Wir können dies tun, wenn wir unseren neuen Song innerhalb dieser „onclick“ -Funktion auswählen. Ich werde das tun, kurz bevor wir unser Audio laden. Lasst uns zuerst unsere Elemente packen. Wir können alles wie „getElementById“ verwenden oder wir können „QuerySelector“ verwenden. Wie wir uns zuvor angesehen haben, „QuerySelector“ ermöglicht es uns, eines unserer Elemente mit einem CSS-ähnlichen Selektor auszuwählen . So können wir wie „div“ auswählen oder in unserem Fall haben wir eine ID, also wählen wir sie mit dem Hash aus, genau wie wir es in unserem CSS tun würden. Die ID für diesen ist der CurrentSong. Wir können dann den inneren Text unserer Elemente setzen, um gleich einer Zeichenfolge zu sein. Wenn wir nur einen regulären Text anzeigen wollten, könnten wir diesen als String innerhalb der Zitate hinzufügen. Aber weil wir dies als dynamische Zeichenfolge hinzufügen möchten , die den aktuellen Songtitel aufnehmen wird, müssen wir einige Variablen einfügen, damit wir dies als Vorlagenzeichenfolge hinzufügen können. Also öffne die Backticks. Wir können mit dem Text von Now Playing, einem Doppelpunkt, beginnen und dann fügen wir eine Variable mit dem $ Symbol und den geschweiften Klammern. Aus dem letzten Video wissen wir bereits, wie man den Songtitel bekommt, und dieser wird in unserem „e.target“ gespeichert und dann wählen wir den „InnerText“. Wir machen genau das Gleiche hier drinnen. Wählen Sie die „e.target.innertext“ speichern Sie diese Datei und über in den Browser. Klicken Sie auf einen Song, und dieser wird nun in unserem Audioplayer angezeigt. 10. Bedienelemente Abspielen und Anhalten: In diesem Video werden wir unsere Wiedergabe und auch unsere Pause-Tasten für unseren Audioplayer anschließen . Zurück auf unserer Index-Seite, innerhalb unseres Controls Wrapper, haben wir unsere zwei Span-Elemente. Die erste ist für unsere Play-Schaltfläche, so dass wir eine onclick Event-Handler hinzufügen können, die eine Funktion namens PlayAudio auslösen wird. Darunter haben wir unsere Pause-Taste, und dies wird einen Klick-Handler zu haben. Die Funktion dieses wird auslösen, wird Pause Audio genannt werden. Speichern Sie diese Datei und jetzt über in unser Skript, können wir unsere zwei Funktionen einrichten. Ganz unten war das erste PlayAudio. Innerhalb unseres Spiels und auch unserer Pausefunktionen müssen wir auf unseren Audioplayer zugreifen. Oben in diesem onclick Abschnitt haben wir bereits einen Verweis auf unseren Spieler. Da dies jedoch innerhalb dieser Funktion deklariert wurde, können wir in keinem anderen Teil unseres Programms darauf zugreifen. Um auf dieses Spiel von allen unseren Abschnitten zuzugreifen oder um es global zu machen, werden wir diese Codezeile schneiden, und wir können dies ganz oben platzieren. Jetzt ist diese Spielvariable nicht innerhalb einer Funktion deklariert. Dies ist jetzt im globalen Bereich, so dass wir in jeder Funktion darauf zugreifen können. Kurz bevor wir weitermachen, wird dies speichern, und auch überprüfen, dass unsere Songs noch spielen, wenn wir auf jede von ihnen klicken . Das ist in Ordnung. Wir können nun zu unserer PlayAudio-Funktion übergehen. Im Inneren hier werden wir eine if-Anweisung zu erstellen, und diese if-Anweisung wird prüfen, ob das Audio fertig geladen wurde. Wir können dies tun, indem wir auf unseren Player über eine Eigenschaft namens ReadyState zugreifen, so dass ReadyState einen true oder false Wert zurückgibt. Wenn ready state true zurückgibt, bedeutet dies, dass unser Audio fertig geladen wurde, und daher können wir player.play aufrufen. Danach besteht unsere zweite Funktion darin, unser Audio zu pausieren, und alles, was wir hier drin tun müssen, ist Player.pause anzurufen, dieser Datei ein Speichern zu geben und jetzt können wir dies im Browser testen, dieser Datei eine Aktualisierung geben. Klicken Sie zunächst auf einen unserer Songs, beginnen Sie zu spielen. Sobald dies beginnt, können wir unsere Pausefunktion testen, indem wir auf dieses Symbol klicken, unser Audio stoppt nun, und wenn wir auf Wiedergabe klicken, beginnt das Audio erneut. So sind unsere Spiel- und auch unsere Pausenfunktionen nun voll funktionsfähig. Im nächsten Video gehen wir zum Lautstärkeregler über, um die Lautstärke für unseren Player zu steuern. 11. Der Lautstärkeregler: Wir werden jetzt die Funktionalität erstellen, um die Lautstärke in unserem Audioplayer zu steuern. Dies wird innerhalb unserer Indexseite als Bereichsschieber erstellt. Daher müssen wir auf dieses Element mit unserer ID zugreifen. In unserem Skript und ganz unten können wir eine Konstante erstellen, die einen Verweis auf unseren Schieberegler speichern wird. Wir können dies mit get Element nach ID auswählen. Die ID, die wir gerade gesehen haben, ist der Lautstärkeregler, Zugriff auf unsere Konstanten. Dann können wir die auf Input-Ereignishandler hinzufügen, die eine Funktion jedes auf dem Wert unseres Bereichsschiebereglers auslösen wird. Dies wird auch in den Ereignisinformationen zu nehmen. Lassen Sie uns ein Konsolenprotokoll durchführen und sehen, welche Informationen in diesem Ereignis gespeichert sind. In die Entwicklertools würden wir mit der rechten Maustaste klicken und überprüfen, klicken Sie auf die Konsole. Wenn wir dann unseren Bereichsschieber anpassen, sehen wir, dass jedes Mal, wenn sich der Schieberegler geändert hat, dies ein neues Ereignis auslöst. Lasst uns das erweitern. Genau wie wir uns zuvor angesehen haben, um auf unser Element zuzugreifen, wählen wir die Zieleigenschaft aus. Wenn wir nach unten scrollen, können wir den Wert unseres Elements finden. Unser Schieberegler hat den Bereich von 0-1 und derzeit haben wir eine Einstellung oder einen Wert von 0,43. Wir können nun diesen Wert verwenden, diesen innerhalb einer Konstante speichern und dann unsere Spiellautstärke einstellen. Zunächst werden wir unsere Konstante erstellen, um diesen Wert namens Volume zu speichern und dies gleich unserem Ereignis zu setzen , das in e gespeichert ist. Wir werden unser Ziel und dann den Wert genau wie wir in der Konsole gesehen haben. Greifen Sie auf unsere Spielvariable zu. Jetzt können wir den player.volume so einstellen, dass er gleich unserer Lautstärkevariablen ist. Lassen Sie uns dies innerhalb des Browsers ausprobieren. Wählen Sie einen beliebigen Song. Es sollte anfangen zu spielen. Lassen Sie uns unseren Schieberegler testen, indem Sie rechts zurück auf Null gehen und das Audio ist verschwunden, drücken Sie diesen bis zur vollen Lautstärke. Wir können jetzt hier unser Audio in seiner lautesten Einstellung. unsere Steuerelemente jetzt erledigt sind, gehen wir jetzt zum nächsten Video und wir erstellen unseren Fortschrittsbalken. 12. Die Fortschrittsleiste aktualisieren: Wir werden nun einen Fortschrittsbalken innerhalb unseres Projekts erstellen, der aktualisiert wird, wenn der Song abgespielt wird. Dieser Fortschrittsbalken wird also gleich am Anfang sein, sobald der Song begonnen hat, und die Dauer wird aktualisiert, wenn der Song fortschreitet. Der erste Schritt besteht darin, zu unserer „Index-Seite“ zu gehen und wir können ein Fortschrittselement erstellen. Aber immer noch dies kurz nach unserem Audiobereich und wir können die Vorteile der HTML-Fortschrittselemente nehmen. Wir können dies aktualisieren, wir werden eine ID haben, und diese ID wird gleich dem Fortschritt sein. Das zweite Attribut wird der Wert sein, den wir zunächst auf Null setzen. Dadurch wird unser Fortschrittsbalken gleich am Anfang gesetzt, und dann werden wir dies mit JavaScript aktualisieren. Als nächstes können wir ein Max hinzufügen, das gleich 100 sein wird, so dass unser Fortschrittsbalkenwert zwischen Null und 100 liegen kann. Der zweite Schritt besteht darin, zu unserem Audio-Player zu gehen, und dann werden wir ein neues Attribut namens ontimeupdate hinzufügen. Ontimeupdate ist ein Ereignis, das ausgeführt wird, wenn sich die Position des Audio geändert hat. Also, das wird laufen, wenn das Audio abgespielt wird. Was wir hier drinnen tun müssen, ist jede Funktion zu übergeben , die wir bei jedem Update ausführen möchten. Ich werde diese Funktion UpdateProgress aufrufen, und dann können wir dies in unserem Skript erstellen. Ganz unten war der Funktionsname UpdateProgress. Wenn wir unseren Fortschrittsbalken erstellt haben, geben wir dieser eine ID des Fortschritts. Wir können diese innerhalb einer Konstante namens ProgressBar speichern und diese gleich Dokumente setzen, getElementById und die ID war Fortschritt. Auch in diesem Fortschrittsbalken setzen wir einen Anfangswert von Null, und wir müssen diesen jetzt mit JavaScript aktualisieren. Wir können dies tun, indem wir unsere ProgressBar-Konstante auswählen und dann unseren Wert auf einen Prozentsatz zwischen Null und 100 setzen. Die Art und Weise, wie wir dies tun, ist, indem wir eine Berechnung erstellen. Diese Berechnung wird sowohl auf die aktuelle Zeit als auch auf die Dauer zugreifen , die auf unserer Spielerkonstante verfügbar ist. Um dies zu sehen, können wir dies auskommentieren und einfach eine console.log machen. Zunächst einmal, wenn wir console.log den Wert des Spielers und dann zum aktuellen Zeitpunkt, lassen Sie uns dies duplizieren. Wir können auch die Dauer der Audiospur protokollieren. aktuelle Zeit ist die tatsächliche Zeit, die verstrichen ist, während wir den Song spielen. Die Dauer knapp darunter ist die Gesamtlänge der Audiospur oder der Konsole. Um dies zu sehen, können wir auf einen unserer Songs klicken, um die Wiedergabe zu beginnen. Der erste Wert, den wir gerade hier sehen werden, lassen Sie uns das anhalten. Dies ist die aktuelle Dauer unserer Strecke, und dann werden wir sehen, unsere Streckenlänge ist ein 176 Sekunden. Dieser Wert ist immer gleich, da sich die Länge nicht ändert. Wir müssen jetzt unsere beiden Werte verwenden, um einen Prozentsatz zwischen Null und 100 zu erstellen. Die Art und Weise, wie wir dies tun können, ist, indem wir unsere currentTime an der Szene packen und dann können wir dies durch die player.duration teilen. Um dies in einen Prozentsatz zu verwandeln, multiplizieren wir diesen dann mit dem Wert von 100. Wir können dann unsere Konsolenprotokolle entfernen und dies im Browser überprüfen. Wählen Sie einen beliebigen Song. Dieser werde ich anfangen zu spielen und unser Fortschrittsbalken wird jetzt aktualisiert. Nur um diesen Abschnitt zu beenden, werden wir auch einen kleinen CSS-Stil in unsere Fortschrittsleiste hinzufügen. Auch unser Stylesheet, wählen Sie unsere Fortschrittselemente. Ich werde damit beginnen, die Breite auf 100 Prozent des verfügbaren Speicherplatzes zu setzen. Die Höhe unseres Fortschrittsbalkens auf drei Rems, und dann einige Abstände auf der Unterseite, die ein Rand unten ist. Diese Datei wird nun ein schönes Styling für unseren Fortschrittsbalken haben. Auf den ersten Blick scheint alles völlig in Ordnung zu funktionieren, aber wenn wir in die Entwicklertools gehen und dann in der Konsole einen unserer Songs auswählen. Wenn wir dies öffnen, und wenn wir dies erweitern, können wir sehen, dass wir eine Meldung „Fehler beim Festlegen der „Wert“ -Eigenschaft“ auf unserer Fortschrittsleiste haben. Dies mag zunächst ein wenig seltsam erscheinen, weil unser Fortschrittsbalken vollständig im Browser aktualisiert wird. Allerdings wird dieser Fehler verursacht, sobald unser Song abgespielt wurde. Dies ist ganz am Anfang wegen unserer player.duration. Gehen wir zurück zu unserem UpdateProgress und wir können eine console.log für den Wert von player.duration tun . Gehen wir zurück in die Konsole, aktualisieren. Sobald Sie dies tun, sehen wir den Wert von nicht einer Zahl. Sobald es geladen wird, haben wir keine Daten für die Dauer gleich am Anfang. Dies liegt daran, dass wir unsere Funktion aufrufen, bevor die Dauer festgelegt wurde. Um dies zu überwinden, werden wir diese Funktion erst aufrufen, wenn der Song begonnen hat zu spielen. Lassen Sie uns die console.log und auch diese beiden Codezeilen innerhalb unserer Funktion entfernen. Wir können dann eine if-Anweisung erstellen, die überprüfen wird, ob der player.currentTime größer als Null ist und dieser Abschnitt wird nur ausgeführt, wenn der Audioplayer begonnen hat. Daher können wir unsere zwei Codezeilen übergeben, die wir gerade geschnitten haben und wir können dies im Browser ausprobieren. Öffnen Sie die Entwickler-Tools, wählen Sie eine beliebige Bogen unsere Songs. Diese Gegend verschwindet jetzt. Wir sind mit unserem Projekt fast fertig und im nächsten Video werden wir diesem Projekt noch einen letzten Schliff verleihen. 13. Letter Schliff: Lassen Sie uns nun dieses Projekt beenden, indem Sie einige letzten Schliff hinzufügen. Wir werden einige Google-Schriftarten hinzufügen. Wir fügen unseren Kopfhörern jedes Mal eine kleine Animation hinzu , wenn eine Audiospur ausgewählt wurde. Wir werden auch ein kleines Problem beheben, wenn wir einen unserer Songs auswählen. Lassen Sie uns zunächst zu Google Fonts gehen. Ich werde mir eine Schriftart für dieses Projekt schnappen. Die Schriftart, die ich für dieses Projekt auswählen werde, wird Permanent Marker genannt. Ich schaue mir das genau wie in den früheren Projekten an. Alles, was wir tun müssen, ist, unseren Stil auszuwählen, auf „Einbetten“ zu klicken und dann unseren Link zu unserer Index-Seite zu bringen. Danach brauchen wir auch unsere CSS-Regeln, also kopieren Sie diesen Abschnitt, oben in unseren Stylesheets, können wir diese dann in unser HTML einfügen, speichern und den Musik-Player aktualisieren, und unsere Schrift nimmt jetzt -Effekt. Standardmäßig ist der Buchstabenabstand für diese Schriftart ziemlich zusammengequetscht. Um dies etwas mehr Abstand zu geben, werde ich eine Eigenschaft namens Buchstabenabstand hinzufügen und diesem dann einen Abstand von vier Pixeln geben. Als nächstes werde ich unseren Kopfhörern eine kleine Pulsanimation hinzufügen, jedes Mal, wenn der Benutzer auf einen dieser Songs klickt. Um dies in unserem Skript zu tun, werden wir eine neue Klasse zu unserem Kopfhörerbild hinzufügen, und dann können wir diese Animation in unserem Stylesheet einstellen. Um das Bild unseres Kopfhörers zu greifen, können wir eine ID zu diesem Element hinzufügen, so ID der Kopfhörer. Dann können wir zu unserem Skript gehen, und fügen Sie einen neuen Klassennamen zu diesen Elementen, jedes Mal, wenn ein Benutzer auf einen dieser Songs klickt, rechts rechts das Ende dieser Funktion. Lassen Sie uns die Dokumente auswählen, und dann können wir getElementById oder auch einen QuerySelector verwenden , genau wie wir zuvor verwendet haben. Die ID war Kopfhörer, schnappen Sie sich unsere ClassList, und dann können wir eine neue Eigenschaft namens Puls hinzufügen. Das packt das Bild unseres Kopfhörers. Wir fügen dann eine neue ClassList of pulse hinzu, die wir jetzt in unseren Stylesheets verwenden können. Unten ganz unten, der Animationsname, der Puls genannt wird; Ich werde dies in nur einer Sekunde erstellen. Dann wird die Dauer dieser Animation mehr als 0,4 Sekunden betragen. Damit dies funktioniert, müssen wir auch unsere Keyframes erstellen, also Pulsanimationen. Wir verwenden den Abschnitt „Von“, und dies ist für den Beginn unserer Animation. Alles, was wir hier drinnen tun werden, ist, die Transformation und die Skalierungseigenschaft zu setzen, um einen Wert von eins zu sein. Um zu beginnen, wird dies genau die gleiche Größe wie ursprünglich war, auf halbem Weg, das wird 50 Prozent sein. Anschließend legen wir die Transformation auf einen Skalierungswert von 0,9 fest. Um unseren Übergang zu beenden, werden wir den Wert auf setzen, und das wird unsere Skala zurück in unseren ursprünglichen Wert von Eins verwandeln. Dies ist nur eine subtile Veränderung. Wir gehen von der Originalgröße auf 90 Prozent und dann wieder auf die Originalgröße. Dies geschieht über eine Dauer von 0,4 Sekunden. Geben Sie dies ein Speichern, und wir können dies im Browser ausprobieren. Lassen Sie uns auf unseren ersten Song klicken, und wir sehen Puls. Aber jetzt, wenn wir auf einen anderen Song klicken, sehen wir nicht, dass die Animation stattfindet. Dies liegt daran, dass wir wieder in unserem Skript eine Klasse hinzufügen, aber jedes Mal, wenn wir einen neuen Song auswählen, müssen wir dieses Klassenzimmer auch eines der Elemente entfernen. Dies wird sehr ähnlich sein, also können wir diese letzte Zeile kopieren, diese bei der gestarteten Funktion einfügen. Aber dieses Mal, anstatt unsere Klasse hinzuzufügen, werden wir entfernen. Lassen Sie uns dies versuchen; klicken Sie auf einen beliebigen Song, unsere Puls-Animation funktioniert. Lassen Sie uns die zweite versuchen, und das funktioniert für jedes Element, auf das wir klicken. Das allerletzte, was wir tun werden, ist, ein Problem bei der Auswahl unserer Songs zu beheben. Dies kann ein Problem sein, das Sie gerade aufgedeckt haben oder nicht. Aber wenn wir auf einen unserer Songs klicken, wird dieser dann den Text „Jetzt spielen“ gesetzt. Allerdings erhalten wir für bestimmte Teile des Abschnitts, wenn wir auf knapp über unserem Listeneintrag klicken, wenn wir auf knapp über unserem Listeneintrag klicken, den Inhalt aller unserer Songs. Dies liegt daran, dass wir wieder in unserem JavaScript diesen Click-Handler zu unserer vollständigen Songliste hinzufügen. Die Songliste ist unser Rapper, und diese enthält alle unsere Listenelemente. Alles funktioniert perfekt, wenn wir auf diese Listenelemente klicken würden. Aber wenn wir auf etwas außerhalb der Liste Artikel klicken, wie wir gerade gesehen haben, wird dies den vollständigen Inhalt unserer Songliste auswählen. Um dies zu beheben, werden wir diese Funktion neu anordnen, um nur auf Klicks auf unsere Listenelemente zu hören. Der Weg, dies zu tun, ist, indem wir unsere vollständigen Dokumente auswählen, und dann können wir QuerySelectorAll plus in unseren 'li' Elementen verwenden. Dies wird alle unsere Listenelemente auf der Seite zu greifen. Wir können dies innerhalb einer Konstante namens Links installieren, und setzen Sie dies gleich unserem Wert. Dieser Wert von Links wird nun unsere sechs Songs sein. Wir müssen alle diese sechs Werte durchlaufen und dann unseren Ereignis-Listener zu jedem dieser Listenelemente hinzufügen. Um dies zu tun, werden wir eine for-of-Schleife verwenden, und das sieht genau so aus. Also sagen wir für, und erstellen Sie dann eine Konstante namens Link von Links. Dies wird alle unsere sechs Links durchlaufen und dann den einzelnen Wert innerhalb einer Konstante namens Link speichern. Für jeden Link fügen wir dann einen Ereignis-Listener hinzu, und das Ereignis, auf das wir hören möchten, ist „click“, was dann eine Funktion namens SetSong auslöst, was bedeutet, dass wir jetzt nicht mehr unseren vollständigen Song durchlaufen müssen -Liste, damit wir diese entfernen können. Jetzt können wir unsere Funktion in SetSong verwandeln. Wir können das dann neben unserer Funktion nach unten verschieben. Geben Sie dies ein Speichern, und jetzt können Sie dies im Browser ausprobieren. Klicken Sie auf einen Song, und es spielt immer noch gut. Wir können Songs wechseln, und schließlich, wenn wir direkt außerhalb unserer Listenelemente klicken, wird diese Funktion jetzt nicht mehr ausgeführt. dieses Problem nun behoben wurde, ist dies nun das Ende unserer Musik-Player-Anwendung. Danke, dass Sie zugesehen haben, und ich hoffe, Sie haben genossen. 14. Folge mir auf Skillshare: Ein großer Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und haben etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, überprüfen Sie den Rest meiner Klassen hier auf Skillshare und folgen Sie mir auch für alle Updates. Auch über alle neuen Klassen informiert zu werden, sobald sie verfügbar werden. Also nochmals vielen Dank. Viel Glück. Hoffentlich sehe ich dich wieder in einer zukünftigen Klasse.