HTML5-Grafik-Tutorial zum Erstellen eines coolen Audio-Player-Plug-ins_HTML5-Tutorial-Fähigkeiten

Aufgrund der unterschiedlichen Rendering-Effekte von Audio-Tags unter verschiedenen Browsern ist diese einfache Methode jedoch nicht für die Verwendung unter Cross-Browsern geeignet, und die von der Standard-Player-Steuerung des Browsers bereitgestellten Funktionen sind wirklich zu eingeschränkt. . Daher blenden wir normalerweise die Standard-Wiedergabesteuerung des Browsers aus, indem wir dieses Attribut nicht festlegen, und fügen manuell zusätzliche Tags und Stile hinzu, um die Benutzeroberfläche des Players anzupassen.

Nachdem die Benutzeroberfläche des Players gezeichnet wurde, müssen wir zunächst entsprechende Ereignis-Listener für die drei Hauptsteuertasten hinzufügen: Wiedergabe, vorheriges Lied und nächstes Lied.

In der obigen Schaltflächenklick-Ereignisüberwachung steuern wir die Wiedergabe und Pause des Audios, indem wir die Methoden play() und pause() des ursprünglichen Audioelements aufrufen. Darüber hinaus stellt das Audioelement das Attribut currentSrc bereit, das die Dateiquelle der aktuell abgespielten Datei darstellt. Durch Festlegen dieses Attributs steuern wir den aktuell abgespielten Songtitel.

Als nächstes fügen wir den beiden kleinen Lautsprechern auf beiden Seiten der Lautstärkeleiste eine Ereignisüberwachung hinzu, sodass die Lautstärke der aktuellen Wiedergabe durch Klicken auf die beiden kleinen Lautsprecher links und rechts verringert und erhöht werden kann. Um die Lautstärke des Players festzulegen, können wir das im Audioelement bereitgestellte Lautstärkeattribut aufrufen. Der maximale Lautstärkewert ist 1 und der minimale Wert ist 0. Hier steuern wir die Lautstärke, indem wir die Lautstärke jedes Mal, wenn wir auf den Lautsprecher klicken, um 0,1 erhöhen oder verringern. Natürlich können Sie auch andere Werte verwenden. Es ist jedoch zu beachten, dass die JavaScript-Sprache keine präzise Kontrolle über Dezimalzahlen bieten kann. Daher ist die tatsächlich reduzierte Lautstärke jedes Mal, wenn die Lautstärke um 0,1 verringert wird, etwas größer als 0,1, was dazu führt, dass 0,09 übrig bleiben, wenn die Schaltfläche zur Lautstärkereduzierung neunmal angeklickt wird in einer Reihe. xxxx Lautstärke, und dann erfahren Sie, warum der Player nicht stummgeschaltet werden kann. . . Natürlich ist dieses Problem leicht zu beheben (siehe unten), nur eine kleine Erinnerung.

Darüber hinaus müssen wir auch die Funktion implementieren, den Schieberegler zu verwenden oder auf eine bestimmte Position der Lautstärkeleiste zu klicken, um die Lautstärke zu steuern Die obige Grundlage ist einfach zu vervollständigen. Schauen wir uns zunächst die Funktion des Klickens auf eine bestimmte Position der Lautstärkeleiste an, um die Lautstärke zu steuern: Klicken Sie auf eine bestimmte Position der Lautstärkeleiste, berechnen Sie den Längenwert vom Startpunkt der Lautstärkeleiste bis zu dieser Position und dann Teilen Sie diesen Wert durch die Gesamtlänge des Lautstärkebalkens (hier ist er 100). Ermitteln Sie den Prozentwert, multiplizieren Sie dann den Prozentwert mit dem maximalen Lautstärkewert 1, um den Lautstärkewert zu erhalten, zu dem Sie springen möchten, und weisen Sie ihn dann zu Volumen. Die Methode zur Steuerung der Lautstärke über einen Schieberegler ähnelt dieser. Die Hauptsache ist, zu wissen, wie der Positionswert des Schiebereglers auf der Lautstärkeleiste berechnet wird. Ich werde es hier nicht im Detail erklären. Wenn Sie Fragen haben, hinterlassen Sie bitte unten eine Nachricht.

Zeitkontrolle

Okay, jetzt funktioniert der Player grundsätzlich, aber wir möchten auch in der Lage sein, einen Teil des Audios direkt zu einem bestimmten Zeitpunkt zu überspringen. Wie kann man es erreichen? ? ! Die Ausschussmitglieder, die den Standard formulieren, sind keine Dummköpfe. Solche häufig verwendeten Funktionen können nicht weggelassen werden. Durchsuchen Sie also schnell die API und Sie werden feststellen, dass das Audioelement ein Attribut namens „currentTime“ bereitstellt, das einen sehr prägnanten und leicht verständlichen Namen hat (Tatsächlich sind die meisten Attribute leicht zu verstehen.) Durch das Festlegen dieses Attributs kann der aktuelle Wiedergabezeitpunkt festgelegt werden.

Hier müssen wir auch ein weiteres Audioattribut verwenden, die Dauer, die sich auf die Gesamtdauer der aktuell abgespielten Datei bezieht. Abhängig von der Implementierung der Lautstärkeregelung können wir also Folgendes tun:

1. Klicken Sie auf eine bestimmte Position des Fortschrittsbalkens und berechnen Sie den prozentualen Wert der Länge vom Startpunkt des Fortschrittsbalkens bis zu dieser Position zur Gesamtlänge des Fortschrittsbalkens (klicken Sie beispielsweise auf die mittlere Position). des Fortschrittsbalkens, dann beträgt die Länge vom Startpunkt des Fortschrittsbalkens bis zu dieser Position (Die Länge der Position macht 50 % der Gesamtlänge des Fortschrittsbalkens aus) und wird als Prozentsatz aufgezeichnet.

2. Multiplizieren Sie dann den Prozentsatz mit der Gesamtdauer der Datei, um den Wert des Zeitpunkts zu erhalten, zu dem Sie springen möchten, und weisen Sie dann den Wert currentTime zu, um die zu implementierende Funktion abzuschließen.

An diesem Punkt hat der Player im Grunde Gestalt angenommen. Es sind noch einige unbedeutende UI-Interaktionsimplementierungen übrig (eigentlich sind sie für mich die wichtigsten, haha). Wenn Sie interessiert sind, können Sie sich den Quellcode ansehen. Wenn Sie Fragen haben, können Sie unten einen Kommentar hinterlassen. Ich hoffe, wir können kommunizieren und mehr lernen.