JavaScript implementiert einen Fortschrittsbalken für die Audiosteuerung

Vorwort: Ich habe gerade gelernt, HTML5, CSS und JavaScript zu verwenden, um einige Dinge zu erledigen, wie zum Beispiel Hausaufgaben emmmm, aber da ich nur schnell lerne, bin ich immer noch auf viele Probleme gestoßen, also habe ich beschlossen, das Internet zu nutzen Finden und verstehen Sie die Verwendungen, die schwer zu finden oder zu verstehen sind, und bewahren Sie sie zum späteren Nachschlagen auf. Ich hoffe auch, dass sie als Referenz für Menschen dienen können, die auf das gleiche Problem stoßen.

In diesem Blog geht es hauptsächlich um die Verwendung von JS zur Implementierung eines einfachen selbst erstellten Fortschrittsbalkens für Audio sowie um Wiedergabesprünge und Änderungen in der Wiedergabezeit. Der Grund dafür ist, dass ich das Gefühl habe, dass die integrierten Steuerelemente des Browsers (ich verwende Firefox) nicht zum Stil meiner Seite passen.

In Firefox sieht es so aus:

Nachdem ich es fertig hatte, sah es so aus:

 

Tatsächlich ist die Idee des Fortschrittsbalkens sehr einfach. Zuerst muss es eine Gesamtlänge geben und dann etwas platzieren, das bis auf Farbe und Breite (Breite) gleich ist ) an derselben Startposition der Gesamtlänge (z. B. I Hier sind zwei schlanke Rechtecke), und verwenden Sie dann während der Audiowiedergabe die Funktion setInterval, mit der Sie die Funktion aufrufen oder den Ausdruck gemäß dem angegebenen Zeitraum berechnen können ( in Millisekunden), jede Sekunde (oder natürlich weniger, wenn dies nicht eine Sekunde ist, denken Sie daran, es in nachfolgenden Berechnungen zu ändern) Erhöhen Sie die Länge des Fortschrittsbalkens ein wenig proportional, sodass von 0 am Anfang bis zur Gesamtlänge bei Am Ende ist der einfache Fortschrittsbalken abgeschlossen.

Informationen zur setInterval-Methode finden Sie hier

Um die Audiowiedergabe durch Klicken mit der Maus auf den Fortschrittsbalken zu ändern, müssen Sie die Koordinaten der Maus kennen. Die allgemeine Idee besteht darin, die Koordinaten der Maus nur zu erhalten, wenn die Maus auf den p-Bereich des Fortschrittsbalkens klickt. Daher wird die erhaltene x-Koordinate abzüglich der in CSS angegebenen Start-x-Koordinate des Fortschrittsbalkens (ganz links) verwendet Die Länge des Fortschrittsbalkens wird durch die Gesamtlänge des Fortschrittsbalkens geteilt und mit der Gesamtdauer des Audios multipliziert Das sollte entsprechend der mit der Maus angeklickten Position abgespielt werden. Verwenden Sie dann die FastSeek-Funktion von Audio. Springen Sie einfach zu dieser Zeit.

Im Folgenden werden die relevanten CSS-, HTML- und JS-Codes aufgeführt. Die Verwendung von JS dient nur als Referenz. An einigen Stellen sind die Aufrufe zum besseren Verständnis sehr ausführlich.

Was im Code erwähnt wird, ist, dass Sie nur die x-Koordinate der Maus erhalten müssen, weil: Der hier implementierte Fortschrittsbalken ist sehr einfach, er erstreckt sich nur horizontal, sodass er nur in berechnet werden muss Gleichzeitig sollten Sie logischerweise nur die Y-Koordinate benötigen, wenn es sich um einen vertikalen Fortschrittsbalken handelt. Wenn es sich um einen kreisförmigen Fortschrittsbalken handelt, benötigen Sie möglicherweise beides.

Das obige ist der detaillierte Inhalt vonJavaScript implementiert einen Fortschrittsbalken für die Audiosteuerung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!