Implementieren Sie ein Beispiel für einen HTML5-Musikplayer-H5-Tutorial-php.cn

Technische Punkte: ES6+Webpack+HTML5 Audio+Sass

Hier erfahren wir Schritt für Schritt, wie man einen H5-Musikplayer von Grund auf implementiert.

Schauen wir uns zunächst die endgültige Implementierung an: Demo-Link

Dann kommen wir zur Sache:

Um einen Musikplayer für Sie zu erstellen Ich bin mit der Art und Weise, wie Audio im Web abgespielt wird, sehr vertraut. In Bezug auf das Audio-Tag gibt es eine große Anzahl von Attributen, Methoden und Ereignissen Einführung.

Attribute:
src: erforderlich, Audioquelle
Steuerelemente: allgemein, das Standard-Audio-Bedienfeld des Browsers wird nach der Einstellung angezeigt und das Audio-Tag wird standardmäßig ausgeblendet, wenn es nicht festgelegt ist;
Autoplay: üblich, Audio nach der Einstellung automatisch abspielen (wird vom Mobilgerät nicht unterstützt);
Loop: üblich, Audio wird nach der Einstellung in Schleife abgespielt;
Preload: üblich, Audio-Vorladung einstellen (wird vom Mobilgerät nicht unterstützt). Terminal);
Lautstärke: selten, legt die Audiogröße fest oder gibt sie zurück, der Wert ist eine Gleitkommazahl zwischen 0 und 1 (wird von mobilen Endgeräten nicht unterstützt);
stummgeschaltet: selten, legt den Stummschaltungsstatus fest oder gibt ihn zurück;
Dauer: selten, gibt die Audiodauer zurück;
aktuelle Zeit: legt die aktuelle Wiedergabezeit fest oder gibt sie zurück;
Pause: selten, gibt den aktuellen Wiedergabestatus zurück, ob pausiert werden soll; , ein TimeRanges-Objekt, das gepufferte Informationen über den Zeitraum enthält, d. h. den Ladefortschritt. Dieses Objekt enthält eine Attributlänge, die eine Zahl beginnend bei 0 zurückgibt, um anzugeben, wie viele Audiosegmente derzeit gepuffert sind. Außerdem enthält es zwei Methoden, start und end, die jeweils einen Parameter übergeben müssen, d. h. welches Segment des Audio wurde geladen. Beginnen Sie bei 0. start gibt die Startzeit des Segments zurück und end gibt die Endzeit des Segments zurück. Beispiel: Übergeben Sie 0, der Anfang des ersten Absatzes ist 0, die Endzeit ist 17, die Einheit ist Sekunden; hier wird das Attribut
eingeführt. Möglicherweise gibt es einige weniger häufig verwendete Attribute wie: Wiedergaberate usw ., während der Videowiedergabe Es kann verwendet werden, aber ich werde es noch nicht erklären.

Methoden:
play(): Audiowiedergabe starten;
pause(): Audiowiedergabe anhalten;

Ereignis:
canplay: Die aktuelle Audiowiedergabe kann beginnen ( nur ein Teil des gepufferten Teils wird geladen, aber nicht alles wird geladen); Wiedergabe endet;
Fehler: Es ist ein Fehler aufgetreten;
Wiedergabe: Wiedergabe wird gestartet; der Ladevorgang wird ausgelöst kann durch Zugriff auf das gepufferte Attribut von Audio abgerufen werden;
wird ausgelöst, wenn der Audiosprung geändert wird 🎜>timeupdate: Wird während der Audiowiedergabe ausgelöst und das Attribut currentTime wird synchron aktualisiert. Es kann sein, dass es einige weniger häufig verwendete Ereignisse gibt, die wir noch nicht erklären.

Abschließend erklären wir den Ereignisfluss, der durch ein Audio vom Beginn des Ladens bis zum Ende der Wiedergabe ausgelöst wird, sowie die Attribute, die wir in verschiedenen Zeiträumen bearbeiten können:
loadstart: Start des Ladens
Daueränderung: Erhalten Sie die Audiodauer (das Dauerattribut kann zu diesem Zeitpunkt abgerufen werden);
Fortschritt: Audio-Download (wird zusammen mit dem Downloadvorgang ausgelöst und das gepufferte Attribut kann zu diesem Zeitpunkt abgerufen werden); 🎜>canplay: Das geladene Audio reicht aus, um die Wiedergabe zu starten (Die Wiedergabe wird auch nach jeder Pause ausgelöst);
canplaythrough: alle Audios werden geladen
timeupdate: während der Wiedergabe (das currentTime-Attribut wird synchron aktualisiert);
suchend: Der aktuelle Wiedergabefortschritt wird geändert (d. h. (Um das currentTime-Attribut zu ändern);
suchend: Die Änderung des aktuellen Wiedergabefortschritts ist abgeschlossen;
beendet: Die Wiedergabe ist abgeschlossen;
Dies ist Der allgemeine Ereignisfluss des gesamten Audiomaterials. Möglicherweise gibt es einige weniger verwendete Ereignisse, die nicht aufgeführt sind.
Während des Ereignisauslösungsprozesses können einige Eigenschaften festgelegt werden, bevor das Audio geladen wird, wie zum Beispiel: Steuerung, Schleife, Lautstärke usw.;

Bestimmen Sie die Gesamtstruktur:
Da wir es als Plug-in erstellen und auf npm veröffentlichen, damit andere es verwenden können, verwenden wir einen objektorientierten Ansatz zum Schreiben von Code, und da Benutzer unterschiedliche Anforderungen haben, entwerfen wir Eine große Anzahl von APIs und Konfigurationselementen wird von Anfang an bereitgestellt, um den Anforderungen der meisten Benutzer gerecht zu werden.
Da ich mit der Syntax von es6 besser vertraut bin, habe ich den gesamten Prozess auf Basis von es6 entwickelt. Gleichzeitig habe ich aus Gründen der Entwicklungseffizienz Sass zum Schreiben von CSS verwendet. Dev-Server zum Kompilieren von ES6 und Sass, Projektpaketierung, Erstellen eines lokalen Servers.
Bestimmen Sie die Spieler-Benutzeroberfläche und die Interaktion:
Vielleicht hat jeder seine eigenen Vorstellungen von der Benutzeroberfläche, deshalb werde ich hier nicht auf Details eingehen. Nehmen wir die Spieler-Benutzeroberfläche, die ich erstellt habe, als Beispiel Aufschlüsseln

Auf der Benutzeroberfläche können Sie die grundlegendsten Funktionen sehen, die ein Player benötigt:
Wiedergabe/Pause, Cover-/Songtitel-/Sängeranzeige, Wiedergabe-Fortschrittsbalken/Lade-Fortschrittsbalken /progress-Betriebsfunktion, Schleifenmodusumschaltung, Fortschrittstextaktualisierung/Lieddauer, Stumm-/Lautstärkeregelung, Steuerung des Listenanzeigestatus, Klicken auf Listenelement zum Wechseln von Liedern
Kombiniert mit dem Ausgangspunkt der Bereitstellung von Konfigurationselementen und APIs, die wir wollen Um den Benutzeranforderungen gerecht zu werden, können wir herausfinden, welche Konfigurationselemente und offengelegten API-Elemente wir entwerfen möchten:
Konfigurationselemente: ob die automatische Wiedergabe aktiviert ist, der Anzeigestatus der Standard-Songliste und die Einstellungen der Standard-Loop-Modus
API: Wiedergabe/Pause/Umschalten, Loop-Modus Umschalten, Stummschalten/Wiederherstellen, Listenanzeigestatus wechseln, vorheriges Lied/nächstes Lied/Lied wechseln, aktuelle Instanz zerstören

Projektstruktur festlegen, mit dem Codieren beginnen:
Da wir Webpack verwenden, packen wir das CSS direkt in JS, sodass es als Plug-In für Benutzer verwendet werden kann:

require('./skPlayer.scss');

Nach dem Login kopieren

Öffentliche Methoden extrahieren. Es gibt viele öffentliche Methoden im Player, die möglicherweise extrahiert werden müssen, z. B.: Wenn Sie auf den Wiedergabe-Fortschrittsbalken und den Lautstärke-Fortschrittsbalken klicken, müssen Sie darauf klicken um den Abstand zwischen der Maus und dem linken Ende des Fortschrittsbalkens für den Fortschrittssprung zu berechnen. Die Zeit wird aus der Dauer in Sekunden usw. berechnet:

const Util = {
    leftDistance: (el) => {
        let left = el.offsetLeft;
        let scrollLeft;while (el.offsetParent) {
            el = el.offsetParent;
            left += el.offsetLeft;
        }
        scrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;return left - scrollLeft;
    },
    timeFormat: (time) => {
        let tempMin = parseInt(time / 60);
        let tempSec = parseInt(time % 60);
        let curMin = tempMin < 10 ? (&#39;0&#39; + tempMin) : tempMin;
        let curSec = tempSec < 10 ? (&#39;0&#39; + tempSec) : tempSec;return curMin + &#39;:&#39; + curSec;
    },
    percentFormat: (percent) => {return (percent * 100).toFixed(2) + '%';
    },
    ajax: (option) => {
        option.beforeSend && option.beforeSend();
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){
                    option.success && option.success(xhr.responseText);
                }else{
                    option.fail && option.fail(xhr.status);
                }
            }
        };
        xhr.open(&#39;GET&#39;,option.url);
        xhr.send(null);
    }
};

Nach dem Login kopieren

Code anzeigen

Aufgrund des anfänglichen Designs ist unter Berücksichtigung der Einzigartigkeit des Players so konzipiert, dass nur eine Instanz existieren kann, und Es wird eine globale Variable festgelegt, um zu bestimmen, ob die Instanz derzeit vorhanden ist:

let instance = false;

Nach dem Login kopieren

Bei der Verwendung von ES6 fügen wir die Hauptlogik in den Konstruktor ein und fügen das äußerst vielseitige und ein API innerhalb der öffentlichen Funktion:

class skPlayer {
    constructor(option){
    }

    template(){
    }

    init(){
    }

    bind(){
    }

    prev(){
    }

    next(){
    }

    switchMusic(index){
    }

    play(){
    }

    pause(){
    }

    toggle(){
    }

    toggleList(){
    }

    toggleMute(){
    }

    switchMode(){
    }

    destroy(){
    }
}

Nach dem Login kopieren

Code anzeigen

Instanzbeurteilung, wenn ein leeres Objekt vorhanden ist Ohne Prototyp wird ein leeres Objekt ohne Prototyp zurückgegeben, da der ES6-Konstruktor standardmäßig eine Instanz mit einem Prototyp zurückgibt:

        if(instance){
            console.error(&#39;SKPlayer只能存在一个实例！&#39;);return Object.create(null);
        }else{
            instance = true;
        }

Nach dem Login kopieren

Initialisierungskonfigurationselemente , die Standardkonfiguration wird zusammengeführt mit der Benutzerkonfiguration:

        const defaultOption = {
            ...
        };this.option = Object.assign({},defaultOption,option);

Nach dem Login kopieren

Gemeinsame Eigenschaften an die Instanz binden:

        this.root = this.option.element;this.type = this.option.music.type;this.music = this.option.music.source;this.isMobile = /mobile/i.test(window.navigator.userAgent);

Nach dem Login kopieren

Einige öffentliche Der interne Punkt von Die API verweist standardmäßig auf die Instanz, aber um die Menge an Code zu reduzieren, wird eine Reihe von Codes verwendet, um die Funktionen auf der Operationsschnittstelle und der API aufzurufen. Beim Binden von Ereignissen ändert sich dieser Punkt, also binden Sie diesen durch bind. Natürlich können Sie beim Binden von Ereignissen auch Pfeilfunktionen verwenden:

        this.toggle = this.toggle.bind(this);this.toggleList = this.toggleList.bind(this);this.toggleMute = this.toggleMute.bind(this);this.switchMode = this.switchMode.bind(this);

Nach dem Login kopieren

Als nächstes verwenden wir die ES6-String-Vorlage, um mit der HTML-Generierung zu beginnen und sie in die Seite einzufügen:

            this.root.innerHTML = this.template();

Nach dem Login kopieren

Als nächstes wird initialisiert. Während des Initialisierungsprozesses werden gemeinsame DOM-Knoten gebunden, Konfigurationselemente werden initialisiert und die Betriebsschnittstelle wird initialisiert:

            this.init();

Nach dem Login kopieren

    init(){this.dom = {
            cover: this.root.querySelector(&#39;.skPlayer-cover&#39;),
            playbutton: this.root.querySelector(&#39;.skPlayer-play-btn&#39;),
            name: this.root.querySelector(&#39;.skPlayer-name&#39;),
            author: this.root.querySelector(&#39;.skPlayer-author&#39;),
            timeline_total: this.root.querySelector(&#39;.skPlayer-percent&#39;),
            timeline_loaded: this.root.querySelector(&#39;.skPlayer-line-loading&#39;),
            timeline_played: this.root.querySelector(&#39;.skPlayer-percent .skPlayer-line&#39;),
            timetext_total: this.root.querySelector(&#39;.skPlayer-total&#39;),
            timetext_played: this.root.querySelector(&#39;.skPlayer-cur&#39;),
            volumebutton: this.root.querySelector(&#39;.skPlayer-icon&#39;),
            volumeline_total: this.root.querySelector(&#39;.skPlayer-volume .skPlayer-percent&#39;),
            volumeline_value: this.root.querySelector(&#39;.skPlayer-volume .skPlayer-line&#39;),
            switchbutton: this.root.querySelector(&#39;.skPlayer-list-switch&#39;),
            modebutton: this.root.querySelector(&#39;.skPlayer-mode&#39;),
            musiclist: this.root.querySelector(&#39;.skPlayer-list&#39;),
            musicitem: this.root.querySelectorAll(&#39;.skPlayer-list li&#39;)
        };this.audio = this.root.querySelector(&#39;.skPlayer-source&#39;);if(this.option.listshow){this.root.className = &#39;skPlayer-list-on&#39;;
        }if(this.option.mode === &#39;singleloop&#39;){this.audio.loop = true;
        }this.dom.musicitem[0].className = &#39;skPlayer-curMusic&#39;;
    }

Nach dem Login kopieren

Code anzeigen

Ereignisbindung, hauptsächlich Bindung von Audioereignissen und Bedienfeldereignissen :

            this.bind();

Nach dem Login kopieren

    bind(){this.updateLine = () => {
            let percent = this.audio.buffered.length ? (this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration) : 0;this.dom.timeline_loaded.style.width = Util.percentFormat(percent);
        };// this.audio.addEventListener('load', (e) => {//     if(this.option.autoplay && this.isMobile){//         this.play();//     }// });this.audio.addEventListener('durationchange', (e) => {this.dom.timetext_total.innerHTML = Util.timeFormat(this.audio.duration);this.updateLine();
        });this.audio.addEventListener('progress', (e) => {this.updateLine();
        });this.audio.addEventListener('canplay', (e) => {if(this.option.autoplay && !this.isMobile){this.play();
            }
        });this.audio.addEventListener('timeupdate', (e) => {
            let percent = this.audio.currentTime / this.audio.duration;this.dom.timeline_played.style.width = Util.percentFormat(percent);this.dom.timetext_played.innerHTML = Util.timeFormat(this.audio.currentTime);
        });//this.audio.addEventListener('seeked', (e) => {//    this.play();//});this.audio.addEventListener('ended', (e) => {this.next();
        });this.dom.playbutton.addEventListener('click', this.toggle);this.dom.switchbutton.addEventListener('click', this.toggleList);if(!this.isMobile){this.dom.volumebutton.addEventListener('click', this.toggleMute);
        }this.dom.modebutton.addEventListener('click', this.switchMode);this.dom.musiclist.addEventListener('click', (e) => {
            let target,index,curIndex;if(e.target.tagName.toUpperCase() === 'LI'){
                target = e.target;
            }else{
                target = e.target.parentElement;
            }
            index = parseInt(target.getAttribute('data-index'));
            curIndex = parseInt(this.dom.musiclist.querySelector('.skPlayer-curMusic').getAttribute('data-index'));if(index === curIndex){this.play();
            }else{this.switchMusic(index + 1);
            }
        });this.dom.timeline_total.addEventListener('click', (event) => {
            let e = event || window.event;
            let percent = (e.clientX - Util.leftDistance(this.dom.timeline_total)) / this.dom.timeline_total.clientWidth;if(!isNaN(this.audio.duration)){this.dom.timeline_played.style.width = Util.percentFormat(percent);this.dom.timetext_played.innerHTML = Util.timeFormat(percent * this.audio.duration);this.audio.currentTime = percent * this.audio.duration;
            }
        });if(!this.isMobile){this.dom.volumeline_total.addEventListener('click', (event) => {
                let e = event || window.event;
                let percent = (e.clientX - Util.leftDistance(this.dom.volumeline_total)) / this.dom.volumeline_total.clientWidth;this.dom.volumeline_value.style.width = Util.percentFormat(percent);this.audio.volume = percent;if(this.audio.muted){this.toggleMute();
                }
            });
        }
    }

Nach dem Login kopieren

Code anzeigen

至此，核心代码基本完成，接下来就是自己根据需要完成API部分。
最后我们暴露模块：

module.exports = skPlayer;

Nach dem Login kopieren

一个HTML5音乐播放器就大功告成了 ~ ！

Das obige ist der detaillierte Inhalt vonImplementieren Sie ein Beispiel für einen HTML5-Musikplayer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!