Implementieren eines Webplayers mit JavaScript

Heute zeige ich Ihnen, wie Sie mit JavaScript einen Player auf einer Webseite schreiben.

Jeder kennt den Player, wie können wir ihn also realisieren?

Unten ist ein Bild eines Spielers, den ich gemacht habe

Schauen wir uns diesen Player zunächst von oben nach unten an. Oben steht der Titel (Kopf): Meine Musik; in der Mitte der Inhalt (Body): Songs; unten (Fuß): Bedienelemente zur Steuerung der Musikwiedergabe. Der Titelteil enthält nur den Titel „Meine Musik“ und der mittlere Inhaltsteil ist die Wiedergabeliste. Jeder Song hat ein Wiedergabesymbol (nur verfügbar, wenn Musik abgespielt wird) und Songinformationen. Der untere Teil enthält einige Symbole zur Steuerung der Wiedergabe, den Namen des aktuell abgespielten Songs, den Fortschritt der Songwiedergabe und die Wiedergabezeit des Songs.

Beim Layout müssen wir Struktur und Stil getrennt halten, wobei die Struktur in HTML und der Stil in CSS geschrieben sein muss.

Layout der Webseitenstruktur: Meine Songs werden nicht direkt geschrieben, sondern als JSON-Objekte geladen. Der Inhaltsteil des Liedes, den ich hier geschrieben habe, ist also nur ein Format. Ich habe die Symbole für das vorherige Lied/Wiedergabe, Pause/nächste Lied mit dem A-Tag geschrieben und die Symbole dem A-Tag-Hintergrund hinzugefügt. Ich verwende zwei Divs, um den Fortschritt der Songwiedergabe zu implementieren. Das innere Div zeigt den Gesamtfortschritt in Grau an, und das obere Div zeigt den aktuellen Fortschritt der Songwiedergabe in Weiß an.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <link rel="stylesheet" href="./css/yinyue.css" >
</Kopf>
<Text>
<!--Der gesamte Player-Teil-->
<div Klasse="Musikliste">
    <!--Titelabschnitt-->
    <div class="head">Meine Musik</div>
    <!--Inhaltsbereich-->
    <div Klasse="body" id="tbody">
        <!--Format jedes Liedes-->
        <div Klasse="Artikel">
            <!--Kleines Symbol, wenn das Lied abgespielt wird-->
            <div class="item-logo box11"><img src="imgs/playing.gif"></div>
            <!--Informationen zum Lied-->
            <div class="item-name">Palme——Ding Dang</div>
        </div>
    </div>
    <!--Unterer Teil-->
    <div Klasse="Fuß">
        <!-- Zurück/Wiedergabe, Pause/Weiter-Symbol -->
        <div Klasse="Box1">
            <!-- Symbol für vorheriges Lied -->
            <a href="javascript:;" Klasse="btn-pre"></a>
            <!--Wiedergabe-/Pause-Symbol-->
            <a href="javascript:;" Klasse="btn-play" id="btnPlay"></a>
            <!--Symbol für das nächste Lied-->
            <a href="javascript:;" Klasse="btn-next"></a>
        </div>
        <!--Aktuelle Uhrzeit der Liedwiedergabe-->
        <div Klasse="box2 play-current">0,00</div>
        <!--Fortschritt der Songwiedergabe und Songname-->
        <div Klasse="box3 Mitte">
            <!--Songtitel-->
            <span id="playingNmae" class="m-name">Meine Musik</span>
            <!--Fortschritt der Songwiedergabe-->
            <div Klasse="box31"></div>
            <div class="box32"><a href="" class=" rel="external nofollow" dot"></a></div>
        </div>
        <!--Gesamtdauer der Songwiedergabe-->
        <div Klasse="box4 Spieldauer">4.13</div>
    </div>
</div>
<script src="js/data.js"></script>
<script src="js/index.js"></script>
</body>
</html>

Layout im Webseitenstil: Sie können ansprechende Schriftarten und Farbstile selbst festlegen. Beachten Sie außerdem beim Festlegen von „background: url("../imgs/play-default.png") no-repeat;“, dass der Pfad in der URL zwei Punkte enthalten sollte, um anzuzeigen, dass das aktuelle Verzeichnis verlassen und zum Stammverzeichnis gewechselt wird. Stellen Sie den Hintergrund außerdem auf „Keine Wiederholung“ (keine Kachelung) ein. Bei der absoluten Positionierung müssen Sie dem Child-Parent-Prinzip folgen und auf die Einstellung des Z-Index-Attributs achten.

/*Entfernen Sie die inneren und äußeren Ränder des Etiketts*/
* {
    Rand: 0;
    Polsterung: 0;
}
/*Den gesamten Player-Stil festlegen:
Das Layout ist Flexbox,
Horizontal zentriert,
Breite und Höhe,
Mit Rand,
Legen Sie die Elastizitätsrichtung der elastischen Box fest: Spalte (vertikal)
*/
.Musikliste {
    Anzeige: Flex;
    Rand: 0 automatisch;
    Höhe: 600px;
    Breite: 400px;
    Rand: 1px durchgezogen #ccc;
    Flex-Richtung: Spalte;
}
/*Titelabschnitt festlegen*/
.Kopf{
    biegen: 1;
    Hintergrund: #3498db;
    Farbe: #fff;
    Schriftart: 24px „Chinese Xingkai“;
    Anzeige: Flex;
    /*Horizontale Achse zentriert*/
    Inhalt ausrichten: zentriert;
    /*Vertikale Achse zentrieren*/
    Elemente ausrichten: zentrieren;
    Rahmen unten: 1px durchgehend weiß;
    Box-Größe: Rahmenbox;
}
/*Den Inhaltsteil festlegen*/
.Körper {
    Flexibilität: 7;
    /*Den überzähligen Teil ausblenden*/
    Überlauf-x: versteckt;
}
/*Unteren Abschnitt festlegen*/
.Fuß {
    Flexibilität: 2;
    Anzeige: Flex;
    Hintergrund: #3498db;
    Farbe: #fff;
    Schriftgröße: 14px;
    Rahmen oben: 1px durchgehend weiß;
    Box-Größe: Rahmenbox;
}
/*Legen Sie das Format jedes Liedes fest*/
.Artikel {
    Anzeige: Flex;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Hintergrund: #3498db;
    Farbe: #fff;
    Schriftgröße: 14px;
    Cursor: Zeiger;
    Übergang: alle 0,5 s;
}
/*Außer dem letzten Lied werden bei allen anderen Liedern die unteren Ränder angezeigt*/
.item:nicht(:letztes-Kind) {
    Rahmen unten: 1px durchgehend weiß;
}
/*Stellt die Hintergrundfarbe des kleinen Symbols ein, wenn das Lied abgespielt wird*/
.box11 {
    Hintergrund: #f0f0f0;
}
/*Songinformationen festlegen*/
.Artikelname {
    Flexibilität: 6;
    /*Nicht neben den Rand schreiben*/
    Polsterung: 0 10px;
}
/*Maus-Hover-Effekt*/
.item:hover {
    Hintergrund: #2980b9;
}
/*Die Wirkung eines Mausklicks*/
.item:aktiv {
    /*Wenn Sie einen 3D-Effekt für das Klickereignis wünschen, können Sie einen Kastenschatten und eine relative Positionierung hinzufügen*/
    Position: relativ;
    oben: 2px;
    links: 2px;
    Kastenschatten: 5px 5px 10px rgba (0, 0, 0, .5);
}
/*Größe der Symbole für vorheriges/Wiedergeben, Pause/nächstes Lied festlegen*/
.box1 {
    Flexibilität: 3;
    Anzeige: Inline-Block;
}
/*Legt die Größe der aktuellen Zeit fest, in der das Lied abgespielt wird*/
.box2 {
    biegen: 1;
    Anzeige: Inline-Block;
    Polsterung: 50px 0;
    Textausrichtung: links;
}
/*Legen Sie den Fortschritt der Songwiedergabe und die Größe des Songnamens fest*/
.box3 {
    Flexibilität: 5;
    Anzeige: Inline-Block;
    Position: relativ;
    Polsterung: 35px 0;
}
/*Stellen Sie die Gesamtzeit ein, die die Wiedergabe des Songs in Anspruch nimmt*/
.box4 {
    biegen: 1;
    Anzeige: Inline-Block;
    Polsterung: 50px 0;
    Textausrichtung: rechts;
}
/*Symbolgröße für vorheriges/Wiedergeben, Pause/nächstes Lied zuweisen*/
.box1 ein {
    Anzeige: Inline-Block;
    Rand: 50px 0;
    Breite: 30%;
    Höhe: 50%;
}
/*Symbol für vorherigen Song festlegen*/
.btn-pre {
    Hintergrund: URL("../imgs/pre-default.png") keine Wiederholung;
    Cursor: Zeiger;
}
/*Mauszeigereffekt des vorherigen Songsymbols festlegen*/
.btn-pre:hover {
    Hintergrund: URL("../imgs/pre-active.png") keine Wiederholung;
}
/*Wiedergabesymbol festlegen*/
.btn-spielen {
    Hintergrund: URL("../imgs/play-default.png") keine Wiederholung;
    Cursor: Zeiger;
}
/*Mauszeigereffekt des Abspielsymbols festlegen*/
.btn-spielen:hover {
    Hintergrund: URL("../imgs/play-active.png") keine Wiederholung;
}
/*Pausensymbol festlegen*/
.btn-pause {
    Hintergrund: URL("../imgs/pause-default.png") keine Wiederholung;
    Cursor: Zeiger;
}
/*Mauszeigereffekt für Pausensymbol festlegen*/
.btn-pause:hover {
    Hintergrund: URL("../imgs/pause-active.png") keine Wiederholung;
}
/*Lege das Symbol für das nächste Lied fest*/
.btn-weiter {
    Hintergrund: URL("../imgs/next-default.png") keine Wiederholung;
    Cursor: Zeiger;
}
/*Mauszeigereffekt für das Symbol des nächsten Songs festlegen*/
.btn-next:hover {
    Hintergrund: URL("../imgs/next-active.png") keine Wiederholung;
}
/*Lege die Schriftart des Songtitels fest*/
.m-Name {
    Schriftart: 20px „KaiTi“;
}
/*Gesamtfortschritt der Songwiedergabe festlegen*/
.box31 {
    Position: absolut;
    Breite: 100 %;
    Höhe: 2px;
    Hintergrund: #cacaca;
    Z-Index: 1;
}
/*Den aktuellen Fortschritt des Liedes festlegen*/
.box32 {
    Position: absolut;
    Breite: 20 %;
    Höhe: 2px;
    Hintergrund: weiß;
    Z-Index: 2;
}
/*Der kleine Punkt bewegt sich mit dem aktuellen Fortschritt des Liedes*/
.punkt {
    Position: absolut;
    Anzeige: Inline-Block;
    rechts: 0;
    oben: -2px;
    Höhe: 5px;
    Breite: 5px;
    Rahmenradius: 2,5px;
    Hintergrund: #fff;
}

JavaScript-Code: Da sich das Wiedergabesymbol und das Pausensymbol beim Klicken abwechselnd ändern und diese Symbole als Hintergrund angezeigt werden, können wir einfach den Hintergrund des A-Tags ändern, d. h. den Hintergrund beim Klicken ändern (der Hintergrund lässt sich durch Ändern einer Klasse ändern). Beim Einstellen des Fortschritts der Songwiedergabe können Sie sich einige Ereignisse im Audio ansehen, z. B. geladene Daten, Zeitaktualisierung und beendet. Mit „Beendet“ können Sie die Funktion erreichen, automatisch den nächsten Song abzuspielen. Achten Sie beim Einstellen der Vorwärts- und Rückwärtsfunktionen darauf, die Position des Mausklicks (dh den Abstand vom Startpunkt) zu erhalten. Der Songfortschritt kann durch Festlegen eines Werts für player.currentTime geändert werden.

// Ein Player-DOM-Objekt erstellen var player = document.createElement('audio');
//Legen Sie einen Wert fest, um den Index des aktuell abgespielten Songs zu speichern. var currentIndex = 0;
//Setzen Sie ein Flag, um festzustellen, ob das Lied abgespielt wird. var isPlay = false;

//Songs dynamisch laden (Funktion () {
    //Legen Sie einen Wert fest, um alle Songs zu speichern. DOM-Objekt, var html = '';
    //Holen Sie sich die DOM-Objekte aller Songs für (var i = 0; i < musics.length; i++) {
        var m = Musik[i];
        //Legen Sie das Format jedes Songs fest html += `<div class="item" data-index="${i}">
                      <div Klasse = "item-logo box11"></div>
                      <div class="item-name">${m.name}---${m.artist}</div>
                 </div>`
    }
    //Alle Lieder hinzufügen document.getElementById('tbody').innerHTML = html;
    //Dem Player eine Standardwiedergabeadresse geben player.src = musics[currentIndex].path;
})();

//Klickereignis für jedes Lied festlegen var trs = document.querySelectorAll('.item')
für (lass i = 0; i < trs.Länge; i++) {
    trs[i].addEventListener('klicken', Funktion () {
        //Lösche den Wiedergabestatus des vorherigen Songs clearStatus();
        //Songindex abrufen var index = this.dataset.index;
        aktuellerIndex = Index;
        var msc = Musik[Index];
        //Wiedergabeadresse für den Player festlegen player.src = msc.path;
        //Wiedergabe starten startPlayer();
    })
}
//Funktion: Wiedergabe starten function startPlayer() {
    //Setze das Wiedergabeflag isPlay = true;
    // Das Lied abspielen player.play();
    trs[currentIndex].style.background = "#2980b9";
    // Fügen Sie ein kleines Symbol zum Abspielen von Songs hinzu trs[currentIndex].querySelector('.item-logo').innerHTML = '<img src="imgs/playing.gif">';
    //Setzen Sie das Symbol auf den Wiedergabestatus document.querySelector('#btnPlay').className = 'btn-pause';
    //Songnamen festlegen document.querySelector('#playingNmae').innerText = `${musics[currentIndex].name} - ${musics[currentIndex].artist}`;
}
//Funktion: Lösche den Wiedergabestatus des vorherigen Songs function clearStatus() {
    trs[aktuellerIndex].style.background = '';
    trs[currentIndex].querySelector('.item-logo').innerHTML = '';
}
//Funktion: Wiedergabe pausieren function pausePlay() {
    //Wiedergabe anhaltenplayer.pause();
    //Setze das Wiedergabeflag isPlay = false;
    //Setze das Symbol auf Pausenzustand document.getElementById('btnPlay').className = 'btn-play';
}
//Funktion: Implementiere das Klickereignis der vorherigen Songfunktion document.querySelector('.btn-pre').addEventListener('click', function () {
    //Wiedergabe pausieren pausePlay();
    //Lösche den Wiedergabestatus des vorherigen Songs clearStatus();
    //Realisiere das vorherige Lied Funktion if (currentIndex == 0) {
        aktuellerIndex = Musik.Länge – 1;
    } anders {
        --aktuellerIndex;
    }
    console.log(aktuellerIndex)
    //Wiedergabeadresse für den Player festlegen player.src = musics[currentIndex].path;
    startPlayer();

})
//Funktion: Implementiere das Klickereignis der Song-Wiedergabefunktion document.getElementById('btnPlay').addEventListener('click', function () {
    //Durch Beurteilung des Play-Flags if (isPlay) {
        pausePlay();
    } anders {
        startPlayer();
    }
})
//Funktion: Implementiere das Klickereignis der nächsten Songfunktion document.querySelector('.btn-next').addEventListener('click', function () {
    pausePlay();
    Status löschen();
    wenn (aktuellerIndex == Musik.Länge - 1) {
        aktuellerIndex = 0;
    } anders {
        ++aktuellerIndex;
    }
    console.log(aktuellerIndex)
    player.src = Musik[aktuellerIndex].Pfad;
    startPlayer();

})
//Den Wiedergabefortschritt des Liedes festlegen var now = 0;
var gesamt = 0;
//Ereignis, nachdem die Songdaten geladen wurden player.addEventListener('loadeddata', function () {
    // Der aktuelle Fortschritt des Liedes (Zeit)
    jetzt = Spieler.aktuelleZeit;
    // Der Gesamtfortschritt des Liedes (Zeit)
    Gesamt = Spielerdauer;
    //Den Songfortschritt (Zeit) auf dem Player anzeigen document.querySelector('.play-current').innerText = fmtTime(now);
    document.querySelector('.play-duration').innerText = fmtTime(total);
})
//Wenn currentTime (die aktuelle Fortschrittszeit des Songs) aktualisiert wird, wird das Timeupdate-Ereignis ausgelöst player.addEventListener('timeupdate', function () {
    // Aktuellen Fortschritt (Zeit) des Songs abrufen
    jetzt = Spieler.aktuelleZeit;
    // Aktueller Fortschritt des Songs var p = now / total * 100 + '%';
    //Den aktuellen Fortschritt des Songs mit dem Fortschrittsbalken synchronisieren document.querySelector('.box32').style.width = p;
    document.querySelector('.play-current').innerText = fmtTime(jetzt);
})
//Song-Ende-Ereignis (Funktion zum automatischen Abspielen des nächsten Songs)
player.addEventListener('beendet', Funktion () {
    //Lösche den Wiedergabestatus des vorherigen Songs clearStatus();
    //Spiele das nächste LiedcurrentIndex++;
    wenn (aktuellerIndex >= Musiklänge) {
        aktuellerIndex = 0;
    }
    player.src = Musik[aktuellerIndex].Pfad;
    startPlayer();
})
//Song-Ereignis weiterleiten document.querySelector('.box31').addEventListener('click', function (e) {
    //Position des Mausklicks abrufen let right = e.offsetX;
    // Fortschrittsbalken auf die Position setzen, auf die mit der Maus geklickt wird document.querySelector('.box32').style.width = right;
    //Berechnen Sie den Fortschritt des Songs an der Mausklickposition let seekTo = right/200*total;
    //Fortschritt des Songs festlegen player.currentTime=seekTo;
        })
//Zurück zum Song-Ereignis document.querySelector('.box32').addEventListener('click', function (e) {
    lass links = e.offsetX;
    document.querySelector('.box32').style.width = links;
    sei seekTo = links/200*Gesamt;
    Spieler.aktuelleZeit=seekTo;
})
//Funktion: Zeit formatieren Funktion fmtTime(Zeit) {
    Zeit *= 1000;
    Zeit = neues Datum(Zeit);
    var m = Zeit.getMinutes();
    var s = Zeit.getSeconds();
    m = m < 10 ? '0' + m : m;
    s = s < 10 ? '0' + s : s;
    gibt m + ':' + s zurück;
}

Musik:

var Musik = [
    {
        Künstler: "GALA",
        ID: 1,
        Name: „Mit reinem Herzen Träume verfolgen“,
        Pfad: "musics/1.mp3"
    },
    {
        Künstler: "Chopstick Brothers",
        ID: 2,
        Name: "Vater",
        Pfad: "musics/2.mp3"
    },
    {
        Künstler: "丁当",
        ID: 3,
        Name: "Palme",
        Pfad: "musics/3.mp3"
    },
    {
        Künstler: "Sasaki Lizi",
        ID: 4,
        Name: "Gute Nacht",
        Pfad: "musics/4.mp3"
    },
    {
        Künstlerin: "Angela Zhang",
        ID: 5,
        Name: "Unsichtbare Flügel",
        Pfad: "musics/5.mp3",
    },
    {
        Künstler: "Rainie Yang",
        ID: 6,
        Name: "Regenliebe",
        Pfad: "musics/6.mp3",
    },
    {
        Künstler: "Yao Band",
        Ich würde: 7,
        Name: "Meteor",
        Pfad: "musics/7.mp3",
    },
    {
        Künstler: "Escape Plan",
        ID: 8,
        Name: "Fly Again (MV-Version)",
        Pfad: "musics/8.mp3",
    },
    {
        Künstler: "Jin Guisheng",
        ID: 9,
        Name: "Zwischen Regenbögen",
        Pfad: "musics/9.mp3",
    }
]

Nachdem Sie jQuery und einige Frameworks gelernt haben, können einige der oben genannten Dinge mit jQuery und Frameworks geschrieben werden, was praktischer ist.

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:

(jsp/html) Einbetten eines Players in eine Webseite (allgemeine Player-Codekompilierung)
Verwenden Sie js, um zu lernen, wie Sie ganz einfach einen HTML-Musikplayer erstellen
Universeller FLV-Webplayer-Code, implementiert durch js
JavaScript zur Implementierung eines einfachen HTML5-Videoplayers
Javascript-Player-Steuerung
js implementiert einen Musikplayer, der mit IE, FF, Chrome, Opera und Safari kompatibel ist
JavaScript zum Erstellen eines Musikplayers mit Beispielfreigabe für Wiedergabelisten
Detaillierte Erklärung zur Verwendung des Js-Videoplayer-Plugins Video.js
Ein cooler Bildplayer-JS-Fokuseffektcode
JS+html5 zum Erstellen eines einfachen Musikplayers

<<: Detaillierte Erläuterung der MySQL Innodb-Speicherstruktur und der Speicherung von Nullwerten

>>: Detailliertes Tutorial zum Bereitstellen von Jenkins basierend auf Docker

Mehrere Möglichkeiten zur manuellen Implementierung von HMR in Webpack

IDEA meldet einen Fehler beim Verbinden mit MySQL! Der Server gibt eine ungültige Zeitzone zurück. Gehen Sie zur Registerkarte und legen Sie die Eigenschaft „serverTimezone“ fest.

Der Weg vor uns ist immer so schwierig und voller...

Implementieren eines Webplayers mit JavaScript

Mehrere Möglichkeiten zur manuellen Implementierung von HMR in Webpack

Lösung für den MySQL-Server-Anmeldefehler ERROR 1820 (HY000)

Zusammenfassung der Bereitstellung des Tomcat-Clusters und des Nginx-Lastausgleichs basierend auf Docker

Verwenden Sie MySQL, um die von der URL zurückgegebenen HTTP-GET-Anforderungsdaten aufzuzeichnen

So wird eine Select-Anweisung in MySQL ausgeführt

Unterschied zwischen var und let in JavaScript

Detailliertes Installationstutorial für Mysql5.7.19 unter Centos7

Asynchrone Programmierung in Javascript: Verstehen Sie Promise wirklich?

Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4

Docker- und Portainer-Konfigurationsmethoden unter Linux

Artikel empfehlen

So konfigurieren Sie die OpenWRT-Entwicklungsumgebung auf Ubuntu 18.04 (physische Maschine)

Detaillierte Erklärung des MySQL-Überwachungstools mysql-monitor

Die perfekte Lösung für die verstümmelten chinesischen Zeichen in mysql6.x unter Win7

Detaillierte Erklärung des Explain-Typs in MySQL

Beispiel für eine CSS3-Tab-Animation mit dynamischem Hintergrundwechseleffekt

CSS zum Erzielen des Effekts einer rotierenden Flip-Card-Animation

IDEA meldet einen Fehler beim Verbinden mit MySQL! Der Server gibt eine ungültige Zeitzone zurück. Gehen Sie zur Registerkarte und legen Sie die Eigenschaft „serverTimezone“ fest.

So überwachen Sie globale Variablen im WeChat-Applet

Eine kurze Diskussion über die Optimierung von MySQL-Paging für Milliarden von Daten

Einige Fragen zu Hyperlinks

Kapselungsimplementierung des von nestjs an das Front-End zurückgegebenen Datenformats

Benutzerdefinierter Kalendereffekt in JavaScript

Spezifische Verwendung von Docker Anonymous Mount und Named Mount

HTML-Endtag-Problem und W3C-Standard

Beispieldemonstration der Vuex-Modularisierung und Namespaces