Heim > Artikel > Web-Frontend > HTML5-Grafik-Tutorial zum Erstellen eines coolen Audio-Player-Plug-ins_HTML5-Tutorial-Fähigkeiten

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

WBOYOriginal: 2016-05-16 15:46:531663Durchsuche

Das Bild oben ist das UI-Schnittstellendiagramm dieses Audioplayers, in dem sich auch eine Wiedergabeliste mit Liedern verbirgt. Die gesamte Player-Benutzeroberfläche ist mit CSS und Font-Face gezeichnet, mit Ausnahme des Hintergrundporträts und der Sternebewertung des Songs, die alle mit CSS und Font-Face gezeichnet sind. Die einzigen Bereiche, die schwierig zu sein scheinen, sind die Produktion von CDs und Im Song verfügen sowohl die CD als auch der Disc-Player über animierte interaktive Effekte während der Wiedergabe, die in einem späteren Abschnitt erläutert werden. Klicken Sie auf die CD im Player, um die Playlist zu öffnen~

Da dieses Tutorial hauptsächlich die Verwendung des neuen

Hauptfunktionen:

1. Abspielen, Pause, vorheriges Lied, nächstes Lied, Lautstärke erhöhen oder verringern

2. Klicken Sie auf CD, um die Wiedergabeliste zu öffnen und zu schließen

3. Sie können lokale Musikdateien zum Abspielen auf den Player ziehen

HTML-Struktur

Code kopieren

Der Code lautet wie folgt:

< ;div id="myAudio" style="margin:0 auto;">

< /li>
< li class="star4">

a

< /span>

b

e
c d

0:00

0:00

Audio-Tag

In der obigen Struktur finden wir das neue Audio-Tag in HTML5, das über ein Controls-Attribut verfügt. Wie der Name schon sagt, handelt es sich um den Controller des Players. Das Controls-Attribut gibt an, dass der Browser Wiedergabesteuerungen für Audio bereitstellt wie im Chrome-Browser Wenn Sie dieses Attribut im Audio-Tag unter

setzen, lautet der Code wie folgt:

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.

Wiedergabesteuerung

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.

Code kopieren

Der Code lautet wie folgt:

var myAudio = $(" #myAudio audio ")[0];
var $sourceList = $("#myAudio source");
var currentSrcIndex = 0;
var currentSr = "";

Code kopieren

Der Code lautet wie folgt:

$(".btn_play" ).click (function(){
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
} );
$(".btn_next").click(function(){
currentSrcIndex > $sourceList.length - 1 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source" ).eq (currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
$(".btn_ previous").click (function( ){
--currentSrcIndex < 0 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});

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.

Lautstärkeregelung

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.

Code kopieren

Der Code lautet wie folgt:

$(".volume_control . verringern") .click(function() {
var volume = myAudio.volume - 0.1;
volume < 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
} );
$(".volume_control .increase").click(function() {
var volume = myAudio.volume 0.1;
volume > 1 && (volume = 1);
myAudio .changeVolumeTo( volume);
});

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.

Code kopieren

Der Code lautet wie folgt:

$(".volume_control .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var volume = (posX - targetLeft)/100;
volume > 1 && (volume = 1);
volume < 0 && (volume = 0);
myAudio.changeVolumeTo(volume );
});
$(".volume_control .slider").mousedown(starDrag = function(ev) {
ev.preventDefault();
var origLeft = $(this). position().left; /*Anfangsposition des Schiebereglers*/
var origX = ev.clientX; /*Anfangsposition der Maus*/
var target = this;
var progress_bar = $(". volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX; /*Calculate Mausbewegungsdistanz*/
var curLeft = origLeft moveX; /*Verwenden Sie die von der Maus verschobene Distanz, um die Bewegungsdistanz des Schiebereglers darzustellen*/
(curLeft < -7) && (curLeft = -7) ;
(curLeft > 93) && (curLeft = 93);
target.style.left = curLeft "px";
progress_bar.style.width = curLeft 7 "%";
myAudio .changeVolumeTo(( curLeft 7)/100);
});
$(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$ (document).unbind("mouseup",stopDrag);
});
});

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.

Code kopieren

Der Code lautet wie folgt:

$(".time_line . base_bar") .mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var Prozentsatz = (posX - targetLeft)/ 140 * 100 ;
myAudio.currentTime = myAudio.duration * Prozentsatz / 100;
});

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in die Ereignisbehandlung von HTML5 Canvas_html5 Tutorial-FähigkeitenNächster Artikel：Einführung in die Ereignisbehandlung von HTML5 Canvas_html5 Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen