Nativer JS-Musikplayer

Nativer JS-Musikplayer

In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung des Musikplayers als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Verwenden Sie zunächst HTML, um unsere Rahmenstruktur aufzubauen. Um die Lesbarkeit unseres Codes zu verbessern, schreiben Sie in diesem Schritt weitere Kommentare.

<!DOCTYPE html>
<html lang="de">
 <Kopf>
 <meta charset="UTF-8">
 <title>Nativer JS-Musikplayer</title>
 <link rel="stylesheet" href="css/public.css" >
 <link rel="stylesheet" href="css/css.css" >
 </Kopf>
 <Text>
 <!-- Musik-Player -->
 <div Klasse="Musik">
 <!-- Informationen zum Song-->
 <div Klasse="Wort">
 <div Klasse="löscht"></div>
 <!-- Liedcover -->
 <div Klasse="img">
 <img src="images/1.jpg" id="img" alt="" /></div>
 <!-- Ende des Songcovers -->
 </div>
 <!-- Ende der Songinformationen -->
 <!-- Informationen und Volumen -->
 <div Klasse="mtv">
 <!-- Textinformationen -->
 <div Klasse="Text">
 <h1 id="sName">Songname</h1>
 <h2 id="singer">Sänger</h2>
 </div>
 <!-- Ende der Textnachricht -->
 <!-- Lautstärkeregelung -->
 <div Klasse="vol01">
 <div Klasse="volTop" id="volText">
 100 %
 </div>
 <div Klasse="volBottom">
 <div Klasse="volPro" id="vol">
 <div Klasse="volColor" id="volCol"></div>
 <div Klasse="volBlock" id="volB"></div>
 </div>
 <div Klasse="vImg">
 <img src="images/volume.png" alt="" />
 </div>
 </div>
 </div>
 <!-- Lautstärkeregelung Ende -->
 </div>
 <!-- Informationen und Bandende -->
 <!-- Fortschrittsbalken -->
 <div Klasse="Fortschritt">
 <span class="cTime time" id="cTime">00:00</span> <!-- Aktuelle Uhrzeit -->
 <span class="tTime time" id="tTime">00:00</span> <!-- Gesamtzeit -->
 <div Klasse="löscht"></div>
 <!-- Kleiner Fortschrittsbalken -->
 <div Klasse="proBar" id="songPro">
 <div Klasse="proColor" id="proBar"></div>
 </div>
 <!-- Ende des Fortschrittsbalkens -->
 </div>
 <!-- Ende des Fortschrittsbalkens -->
 <!-- Bedientasten -->
 <div Klasse="Strg">
 <div Klasse="btn">
 <img src="images/prev.png" class="prevBtn" id="prevBtn" alt="" />
 <img src="images/next.png" class="nextPrev" id="nextBtn" alt="" />
 </div>
 <button type="button" class="playBtn" id="playBtn"><img src="images/播放.png" alt="" /></button>
 </div>
 <!-- Ende der Steuertaste -->
 <audio src="#" id="Musik"></audio>
 </div>
 <!-- Musikplayer-Ende -->
 <script src="js/js.js"></script>
 </body>
</html>

Im zweiten Schritt geben Sie ihm nach dem Einrichten des Frameworks mithilfe von CSS den gewünschten Stil. Beachten Sie , dass ich die Stile in öffentliche und unabhängige Stile unterteilt und separat geschrieben habe, um die Wiederverwendbarkeit des Codes zu verbessern. Natürlich können Sie auch SASS verwenden, um es bequemer zu machen. Hier stelle ich nur unabhängige Stile bereit, und öffentliche Stile finden Sie online.

html {
 Hintergrund: #92b991;
}

.Musik {
 Breite: 670px;
 Höhe: 400px;
 Hintergrund: URL("../images/bg.jpg") keine Wiederholung Mitte;
 Rand links: automatisch;
 Rand rechts: automatisch;
 Rand: 1px #3d5e59 durchgezogen;
 Rand oben: 150px;
 Rahmenradius: 20px;
 Kastenschatten: 0 0 20px rgba (0, 0, 0, 0,3);
 Position: relativ;
}

.img {
 Breite: 200px;
 Höhe: 200px;
 Rand: 2px #fff durchgezogen;
 Überlauf: versteckt;
 Randradius: 100 %;
 Rand oben: 50px;
 Rand links: 35 %;
}

.mtv {
 Breite: 670px;
 Position: relativ;
}

.text {
 Farbe: #fff;
 Rand rechts: 30px;
 Rand links: 30px;
 Rand unten: 10px;
}

.text>h1 {
 Schriftgröße: 24px;
 Zeilenhöhe: 30px;
 Schriftstärke: normal;
}

.text>h2 {
 Schriftfamilie: „Microsoft YaHei“;
 Schriftgröße: 14px;
 Schriftstärke: 300;
 Zeilenhöhe: 1,7;
}

.vol01 {
 Position: absolut;
 Höhe: 30px;
 Breite: 120px;
 rechts: 30px;
 oben: -8%;
}

.volPro {
 Breite: 100 %;
 Höhe: 5px;
 Rand oben: 44,5 Pixel;
 Rand: 1px #fff durchgezogen;
 Rahmenradius: 5px;
}

.volFarbe {
 Höhe: 5px;
 Breite: 100 %;
 Farbe: #fff;
 Zeigerereignisse: keine;
}

.volBlock {
 Zeigerereignisse: keine;
 Position: absolut;
 oben: 42px;
 Breite: 10px;
 Höhe: 10px;
 Rand: 1px #fff durchgezogen;
 Hintergrund: #f4f3f3;
 Randradius: 100 %;
 links: 100 %;
 Rand links: -5px;
}

.volTop {
 Farbe: #fff;
 Schriftgröße: 10px;
 Position: absolut;
 oben: 25px;
 rechts: 0;
 -webkit-touch-callout: keine;
 -webkit-Benutzerauswahl: keine;
 -khtml-Benutzerauswahl: keine;
 -moz-Benutzerauswahl: keine;
 -ms-user-select: keine;
 Benutzerauswahl: keine;
}

.vImg {
 Position: absolut;
 oben: 38px;
 links: -26px;
 -webkit-touch-callout: keine;
 -webkit-Benutzerauswahl: keine;
 -khtml-Benutzerauswahl: keine;
 -moz-Benutzerauswahl: keine;
 -ms-user-select: keine;
 Benutzerauswahl: keine;
}

.Zeit {
 Schriftfamilie: „Microsoft YaHei“;
 Schriftgröße: 10px;
 Zeilenhöhe: 1,5;
 Farbe: #fff;
 Rand oben: 25px;
}

.cZeit {
 schweben: links;
 -webkit-touch-callout: keine;
 -webkit-Benutzerauswahl: keine;
 -khtml-Benutzerauswahl: keine;
 -moz-Benutzerauswahl: keine;
 -ms-user-select: keine;
 Benutzerauswahl: keine;
}

.tZeit {
 schweben: rechts;
 -webkit-touch-callout: keine;
 -webkit-Benutzerauswahl: keine;
 -khtml-Benutzerauswahl: keine;
 -moz-Benutzerauswahl: keine;
 -ms-user-select: keine;
 Benutzerauswahl: keine;
}

.Fortschritt {
 Rand links: 30px;
 Rand rechts: 30px;
}

.proBar {
 Breite: 100 %;
 Höhe: 2px;
 Überlauf: versteckt;
 Hintergrund: #B292FF;
 Rand oben: 5px;
 Rahmenradius: 5px;
}

.proColor {
 Höhe: 7px;
 Breite: 30%;
 Hintergrund: #fff;
 Zeigerereignisse: keine;
}

.ctrls {
 Textausrichtung: zentriert;
 Rand oben: 20px;
 Rand links: 30px;
 Rand rechts: 30px;
}

.btn {
 Position: absolut;
 oben: 50px;
}

.nächsteVorherige {
 rechts: 0;
 Rand links: 200px;
 Deckkraft: 0,1;
 Übergang: alle 0,3 s;
}

.nextPrev:hover {
 Deckkraft: 0,5;
}

.prevBtn {
 links: 0;
 Deckkraft: 0,1;
 Übergang: alle 0,3 s;
}

.prevBtn:hover {
 Deckkraft: 0,5;
}

.playBtn {
 Höhe: 200px;
 Breite: 200px;
 Rahmenradius: 200px;
 Deckkraft: 0,3;
 Position: absolut;
 oben: 52px;
 links: 250px;
 Rand links: -14px;
 Übergang: alle 0,3 s;
}


.playBtn:hover {
 Deckkraft: 0,5;
 Hintergrund: #46847b;
}

Der dritte Schritt besteht darin, dem Musik-Player eine Seele zu geben, indem man mit JS Funktionen hinzufügt.

1. Holen Sie sich die ID (natürlich können Sie hier auch den Klassennamen oder das Element abrufen, je nach Ihren eigenen Gewohnheiten).

let Musik = document.getElementById("Musik");
let playBtn = document.getElementById("playBtn");
let prevBtn = document.getElementById("prevBtn");
let nextBtn = document.getElementById("nextBtn");
let img = document.getElementById("img");
let sName = document.getElementById("sName");
let Sänger = document.getElementById("Sänger");
let tTime = document.getElementById("tTime");
let proBar = document.getElementById("proBar");
let cTime = document.getElementById("cTime");
let songPro = document.getElementById("songPro");
let vol = document.getElementById("vol");
let volCol = document.getElementById("volCol");
let volB = document.getElementById("volB");
let volText = document.getElementById("volText");

2. Musikwiedergabefunktion hinzufügen.

Musik importieren

lass Lieder = [{
 mp3: "musik/01.mp3",
 Sänger: "Zhao Wei",
 Name: „Ich kann nicht mit dir Schluss machen“,
 img: "images/1.jpg"
 }, {
 mp3: "musik/04.mp3",
 Sänger: "陈粒",
 Name: „Entzündlich und explosiv“,
 img: "bilder/2.jpg"
 }, {
 mp3: "musik/06.mp3",
 Sänger: „Hu Xia/Yu Kewei“,
 Name: "Weißt du Bescheid?",
 img: "images/3.jpg"
 }];

Musikwiedergabe

let changeMusic = Funktion(Index) {
 musik.src = Lieder[index].mp3;
 img.src = Lieder[index].img;
 sName.innerHTML = Lieder[index].name;
 Sänger.innerHTML = Lieder[index].Sänger;
 proBar.style.width = 0;
 };

 lass Index = 0;
 Musik ändern(Index);

Musikwiedergabe pausieren

playBtn.addEventListener("klicken", Funktion(Ereignis) {
 if (musik.paused) {
 musik.abspielen();
 event.currentTarget.innerHTML = '<img src="images/pause.png" alt=""/>';
 } anders {
 musik.pause();
 event.currentTarget.innerHTML = '<img src="images/play.png" alt=""/>';
 }
 });

Musikschalter

prevBtn.addEventListener("click", function(event) { //Vorheriger Index--;
 wenn (Index <= -1) {
 Index = Lieder.Länge – 1;
 }
 Musik ändern(Index);
 });

 nextBtn.addEventListener("click", function(event) { //Nächster Song index++;
 if (index > lieder.länge - 1) {
 Index = 0;
 }
 Musik ändern(Index);
 });
 
 music.addEventListener('ended',function () { //Automatisch den nächsten Song abspielenindex++;
 if (index > lieder.länge - 1) {
 Index = 0;
 }
 Musik ändern(Index);
 })

3. Fügen Sie einen Fortschrittsbalken hinzu.

music.addEventListener("loadedmetadata", function(event) { //Meldung, dass die Audio-Metadaten geladen wurden tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });
 
 music.addEventListener("timeupdate", function(event) { //Auf Musikwiedergabeereignisse warten let jd = music.currentTime / music.duration;
 sei bfb = jd * 100 + "%";
 proBar.style.width = bfb;
 wenn (Musik.aktuelleZeit < 10) {
 cTime.innerHTML = "0:0" + Math.floor(Musik.aktuelleZeit); 
 } sonst wenn (Musik.aktuelleZeit < 60) {
 cTime.innerHTML = "0:" + Math.floor(musik.aktuelleZeit);
 } anders {
 lass minet = parseInt(musik.aktuelleZeit / 60); 
 lass sec = Musik.aktuelleZeit - minet * 60;
 wenn (sec < 10) {
 cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(Sek.);
 } anders {
 cTime.innerHTML = "0" + minet + ":" + parseInt(Sek.);
 }
 }
 });

Kleine Funktion: Klicken Sie auf den Fortschrittsbalken und die Musik ändert sich und springt zur angegebenen Zeit.

songPro.addEventListener("Klick", Funktion(Ereignis) {
 sei x = Ereignis.OffsetX;
 sei bfb = x / 610 * 100;
 proBar.style.width = bfb + "%";
 musik.aktuelleZeit = musik.dauer * bfb / 100;
 });

4. Lautstärkeregelungsmodul hinzufügen.

let getBfb = Funktion(Ereignis) {
 let x = event.clientX; //Gibt die horizontale Koordinate des Mauszeigers relativ zur Browserseite (oder dem Clientbereich) zurück, als das Ereignis ausgelöst wurde.
 let volX = vol.getBoundingClientRect().x; //getBoundingClientRect() ruft die Breite und Höhe des Elements ab let disX = x - volX;
 disX = Math.max(0, disX); //Gibt die maximale Zahl zurück disX = Math.min(120, disX); //Gibt die minimale Zahl zurück return disX / 120;
 };

 let setVol = Funktion(Ereignis) {
 lass bfb = Math.floor(getBfb(Ereignis) * 10000) / 100;
 volCol.style.width = bfb + "%";
 volB.style.left = bfb + "%";
 volText.innerHTML = Math.floor(bfb) + "%";
 Musik.Lautstärke = bfb / 100;
 };

 vol.addEventListener("mousedown", Funktion() {
 document.addEventListener("Mausbewegung", setVol);
 });
 document.addEventListener("mouseup", Funktion() {
 document.removeEventListener("Mausbewegung", setVol);

 });

Der gesamte JS-Code

Hier verwende ich den Gültigkeitsbereich {}, sodass die mit let oder const deklarierten Variablen nur innerhalb des Codeblocks {} gültig sind, in dem sich der let- oder const-Befehl befindet, und nicht außerhalb von {} aufgerufen werden können (neu hinzugefügt in ECMAScript 6 (kurz ES6)).

{
 let Musik = document.getElementById("Musik");
 let playBtn = document.getElementById("playBtn");
 let prevBtn = document.getElementById("prevBtn");
 let nextBtn = document.getElementById("nextBtn");
 let img = document.getElementById("img");
 let sName = document.getElementById("sName");
 let Sänger = document.getElementById("Sänger");
 let tTime = document.getElementById("tTime");
 let proBar = document.getElementById("proBar");
 let cTime = document.getElementById("cTime");
 let songPro = document.getElementById("songPro");
 let vol = document.getElementById("vol");
 let volCol = document.getElementById("volCol");
 let volB = document.getElementById("volB");
 let volText = document.getElementById("volText");

 lass Lieder = [{
 mp3: "musik/01.mp3",
 Sänger: "Zhao Wei",
 Name: „Ich kann nicht mit dir Schluss machen“,
 img: "images/1.jpg"
 }, {
 mp3: "musik/04.mp3",
 Sänger: "陈粒",
 Name: „Entzündlich und explosiv“,
 img: "bilder/2.jpg"
 }, {
 mp3: "musik/06.mp3",
 Sänger: „Hu Xia/Tan Weiwei“,
 Name: "Weißt du das?",
 img: "images/3.jpg"
 }];

 let changeMusic = Funktion(Index) {
 musik.src = Lieder[index].mp3;
 img.src = Lieder[index].img;
 sName.innerHTML = Lieder[index].name;
 Sänger.innerHTML = Lieder[index].Sänger;
 proBar.style.width = 0;
 };

 lass Index = 0;
 Musik ändern(Index);

 playBtn.addEventListener("klicken", Funktion(Ereignis) {
 if (musik.paused) {
 musik.abspielen();
 event.currentTarget.innerHTML = '<img src="images/pause.png" alt=""/>';
 } anders {
 musik.pause();
 event.currentTarget.innerHTML = '<img src="images/play.png" alt=""/>';
 }
 });

 prevBtn.addEventListener("click", function(event) { //Vorheriger Index--;
 wenn (Index <= -1) {
 Index = Lieder.Länge – 1;
 }
 Musik ändern(Index);
 });

 nextBtn.addEventListener("click", function(event) { //Nächster Song index++;
 if (index > lieder.länge - 1) {
 Index = 0;
 }
 Musik ändern(Index);
 });
 
 music.addEventListener('ended',function () { //Automatisch den nächsten Song abspielenindex++;
 if (index > lieder.länge - 1) {
 Index = 0;
 }
 Musik ändern(Index);
 })

 music.addEventListener("loadedmetadata", function(event) { //Meldung, dass die Audio-Metadaten geladen wurden tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });

 music.addEventListener("timeupdate", function(event) { //Musikwiedergabeereignisse anhören let jd = music.currentTime / music.duration; //Gesamtdauer von music.duration music.currentTime Aktuelle Dauer let bfb = jd * 100 + "%";
 proBar.style.width = bfb;
 wenn (Musik.aktuelleZeit < 10) {
 cTime.innerHTML = "0:0" + Math.floor(music.currentTime); //Math.floor() rundet ab} sonst wenn (music.currentTime < 60) {
 cTime.innerHTML = "0:" + Math.floor(musik.aktuelleZeit);
 } anders {
 let minet = parseInt(music.currentTime / 60); //parseInt() analysiert einen String und gibt eine Ganzzahl zurück let sec = music.currentTime - minet * 60;
 wenn (sec < 10) {
 cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(Sek.);
 } anders {
 cTime.innerHTML = "0" + minet + ":" + parseInt(Sek.);
 }
 }
 });

 songPro.addEventListener("Klick", Funktion(Ereignis) {
 sei x = Ereignis.OffsetX;
 sei bfb = x / 610 * 100;
 proBar.style.width = bfb + "%";
 musik.aktuelleZeit = musik.dauer * bfb / 100;
 });

 let getBfb = Funktion(Ereignis) {
 let x = event.clientX; //Gibt die horizontale Koordinate des Mauszeigers relativ zur Browserseite (oder dem Clientbereich) zurück, als das Ereignis ausgelöst wurde.
 let volX = vol.getBoundingClientRect().x; //getBoundingClientRect() ruft die Breite und Höhe des Elements ab let disX = x - volX;
 disX = Math.max(0, disX); //Gibt die maximale Zahl zurück disX = Math.min(120, disX); //Gibt die minimale Zahl zurück return disX / 120;
 };

 let setVol = Funktion(Ereignis) {
 lass bfb = Math.floor(getBfb(Ereignis) * 10000) / 100;
 volCol.style.width = bfb + "%";
 volB.style.left = bfb + "%";
 volText.innerHTML = Math.floor(bfb) + "%";
 Musik.Lautstärke = bfb / 100;
 };

 vol.addEventListener("mousedown", Funktion() {
 document.addEventListener("Mausbewegung", setVol);
 });
 document.addEventListener("mouseup", Funktion() {
 document.removeEventListener("Mausbewegung", setVol);

 });
}

Endgültige Effektanzeige:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Vue.js implementiert Musikplayer
  • js+audio zur Realisierung eines Musikplayers
  • js zur Implementierung eines einfachen Musikplayers
  • JavaScript zum Implementieren eines einfachen Musikplayers
  • Natives JS zur Implementierung eines kleinen Musikplayers
  • JS+html5 zum Erstellen eines einfachen Musikplayers
  • Verwenden Sie js, um zu lernen, wie Sie ganz einfach einen HTML-Musikplayer erstellen
  • JS simuliert den Schrumpf-, Falt- und Schließeffektcode des Kugou-Musikplayers
  • js implementiert einen Musikplayer, der mit IE, FF, Chrome, Opera und Safari kompatibel ist
  • js zur Realisierung eines Web-Musikplayers

<<:  Detaillierte Schritte zur Installation und Konfiguration von MySQL 5.7

>>:  Virtuelle Maschine klonen Linux Centos6.5 System Netzwerkkarte Konfiguration Grafik-Tutorial

Artikel empfehlen

Super einfache QPS-Statistikmethode (empfohlen)

Statistik der QPS-Werte der letzten N Sekunden (i...

So aktualisieren Sie https unter Nginx

Kaufzertifikat Sie können es beim Cloud Shield Ce...

Zusammenfassung mehrerer Implementierungen der Rückkehr zum Anfang in HTML-Seiten

Vor kurzem musste ich beim Entwickeln einer Websi...

Detaillierte Erklärung zum CSS-Randkollaps

Vorherige Das ist eine klassische alte Frage. Da ...

Ein kurzes Verständnis der Unterschiede zwischen MySQL InnoDB und MyISAM

Vorwort MySQL unterstützt viele Arten von Tabelle...

JavaScript-Kreisdiagrammbeispiel

ZeicheneffekteImplementierungscode JavaScript var...

Erfahren Sie, wie nginx hohe Leistung und Skalierbarkeit erreicht.

Die Gesamtarchitektur von NGINX ist durch eine Re...

Den Linux-Kernel erkunden: Die Geheimnisse von Kconfig

Erhalten Sie ein umfassendes Verständnis der Funk...

Kennen Sie die häufigsten MySQL-Designfehler?

Dank der Entwicklung des Internets können wir die...

15 Zeilen CSS-Code können zum Absturz von Apple-Geräten führen, und das neueste iOS 12 ist nicht immun

Nur 15 Zeilen CSS und Ihr iPhone stürzt ab Der Si...

MySQL-Fehler: Beim Versuch, eine Sperre zu erhalten, wurde ein Deadlock festgestellt. Versuchen Sie, die Transaktionslösung neu zu starten.

Finden Sie das Problem Als ich kürzlich die vorhe...

Vue realisiert problemlos Wasserzeicheneffekte

Vorwort: Verwenden Sie den Wasserzeicheneffekt im...

Detaillierte Erklärung des Beispiels von Connect auf der Socket (TCP)-Clientseite aus dem Linux-Quellcode

Vorwort Der Autor war schon immer der Meinung, da...

Theorie: Die zwei Jahre User Experience

<br />Es ist nicht länger als zwei Jahre her...

Thumbnail-Hover-Effekt mit CSS3 implementiert

Ergebnisse erzielenImplementierungscode html <...