Vorwort: Dies ist eine Zusammenfassung der kleinen Demos, die ich kürzlich gelernt habe. Es ist immer noch ein langer Weg, sie zu verwenden, aber es ist immer noch gut, Wissenspunkte zu praktizieren und zu konsolidieren. Kürzlich habe ich den Quellcode von JS Books und Boostrap.css durchsucht. Nach dieser Demo ist es ein vorübergehendes Ende. Als nächstes kommt der Quellcode von JQuery und der Quellcode von boostrap.js. Die Aufgabe ist sehr mühsam. Komm schon, ich werde den Code im gesamten Artikel nicht veröffentlichen. Wenn Sie interessiert sind, können Sie mir eine Nachricht senden und den Code an Sie weitergeben ~ ~
Text:
Erstens die Renderings
1. Layout: Das reaktionsschnelle und adaptive Layout in Boostrap kann nicht beseitigt werden. Die verschachtelte Reihe im Container wird dann beiseite und Main (H5 New Tag) bzw. Div (ID = "MusicConsole) verschachtelt. Abgesehen von der Musikliste auf der linken Seite ist Main das Texte -Display -Box auf der rechten Seite und DIV ist das Kontrollfeld unten.
2. Hauptimplementierungsfunktionen:
(1) Fügen Sie Songs (das "+" -Symbol in der oberen rechten Ecke der Songliste hinzu) und löschen Sie Songs (das Symbol "Trump" in der oberen rechten Ecke der Songliste).
(2) Klicken Sie in der Songliste auf den Song: Für den Titel wird gespielt; Wenn es Texte gibt, werden die Texte angezeigt, und wenn es keine Texte gibt, werden die "No Lyrics" angezeigt. Die Fortschrittsleiste und die Zeit werden sich ändern, wenn das Lied spielt.
(3) Klicken Sie auf die vorherige Schaltfläche (vertikale Linie + Dreieck) und der vorherige Song wird gespielt: Wenn es Texte gibt, werden die Texte angezeigt, und wenn es keine Texte gibt, werden die "No Lyrics" angezeigt. Die Fortschrittsleiste und die Zeit werden sich ändern, wenn das Lied spielt.
Wenn Sie auf die Wiedergabetaste (Dreieck) klicken, wird sich die Pause -Schaltfläche (doppelte vertikale Linien) ändern, und der Song wird auch vom Spielstatus zum Pause -Status entsprechend ändert.
Klicken Sie auf die nächste Schaltfläche (Triangle + Vertical Line) und das nächste Lied wird gespielt: Wenn es Texte gibt, werden die Texte angezeigt, und wenn es keine Texte gibt, werden die "No Lyrics" angezeigt. Die Fortschrittsleiste und die Zeit werden sich ändern, wenn das Lied spielt.
Wenn Sie auf die Audio -Schaltfläche (Lautsprecher) klicken, wird sie zu einer stummen Taste (Lautsprecher + "x"), und das Lied wird auch entsprechend stumm.
Durch Klicken auf die Schaltkappe (Kreis mit Pfeilen) wird eine einzige Wiedergabe. Halten Sie die Schleifeschaltkaste und die einzelne Schleife wird wiederholt.
3.. Probleme auftreten:
(1) Die Größe des Glyphicons wird durch Schriftgröße verändert
Da das Boostrap -Symbol verwendet wird, ist die Standardgröße zu klein. Ich habe es mit Breite und Höhe versuchten, antwortete aber nicht. Mir wurde klar, dass ich eine Schriftgröße verwendet habe, um die Größe zu ändern.
(2) Str.Replace (Oldstr, Newstr)
Beim Klicken auf die Wiedergabetaste wird der Wiedergabestatus geändert und das Schaltflächensymbol entsprechend geändert. Daher wird Ersatz verwendet, aber es hat lange nicht mehr reagiert. Es stellte sich heraus
(3) Für Browser ist es schwierig, lokale Dateien aufgrund von Sicherheitsüberlegungen zu lesen
Ich hatte ursprünglich vor, LocalStorage zu verwenden, um die Inhalte in der Musikliste zu speichern, aber ich habe es lange mit H5 von H5 ausprobiert, aber es gab keine Möglichkeit. Ich musste aufgeben.
Filereader kann zum Lesen von Bildern oder HTML -Dateien verwendet werden. Die metaSdataurl -Methode kann den Dateipfad erhalten. Apropos, ich möchte wirklich lachen. Ich habe versucht, eine Musikdatei zu speichern. Ok, lass uns gehen, was? Läuft Lokalstorage keinen Speicher? 5m speichert einen Dateipfad? Lustig ich?
Die folgenden Fragen sind alle in den Texten. . . Ich fühle mich sehr müde. . .
(4) Probleme bei der Analyse von Texten auftreten
Die Texte sind normalerweise LRC -Dateien, aber sie sind tatsächlich einfacher Text. Verwenden Sie AJAX, um Daten aus dem Hintergrund zu erhalten. Es gibt jedoch keinen Hintergrund mit mir, damit ich die Texte nur direkt kopieren und in einer Zeichenfolge als tote Daten schreiben kann.
Es war ursprünglich geplant, Split ('/r/n') zu verwenden, um die Zeichenfolge in die Texte des Satzes nach Satz zu unterteilen und in ein Array zu stecken.
Infolgedessen habe ich verschiedene Fehler gemeldet. Nach langer Zeit fand ich es endlich auf dieser Spaltung. Ich habe es lange online überprüft und es stellte sich heraus, dass es sich um den JS -Pot handelte.
Da JS -Syntax am Ende kein Semikolon hinzugefügt werden soll, steckt die Systemleitungsbrechung (d. H. Wagenrendite). Es gibt zwei Hauptantwortpläne:
1) Löschen Sie stattdessen das Newline -Zeichen und verwenden Sie /n Newline. Diese Lösung hat einen neuen Effekt auf der Seite.
2) Fügen Sie / Vor dem System Zeilenumbruch -Charakter hinzu, dieses Schema hat keinen Zeilenunterbrechungseffekt auf der Seite
(5) Probleme beim Scrollen von Texten auftreten
Nachdem die Texte erfolgreich hinzugefügt wurden, wird es perfekt angezeigt, muss aber mit der Musik synchronisiert werden. Im Vergleich zu der aktuellen Wiedergabesteit, wie sehr sich die entsprechende Texteliste nach oben bewegt, wenn die Texte leer sind, erscheint das endgültige Grenzurteil, und nachdem all diese Probleme gelöst sind, erscheint eine Loop -Wiedergabe, und die Texte können nicht erneut angezeigt werden. Nach langer Zeit ging ich dorthin. Es lag, weil das Ereignis mit Schleife = true nicht angehört werden konnte. Es gab keine Möglichkeit, also konnte ich nur die Schleife aufgeben und das Urteil der Schleife in das beendete Ereignis hinzufügen.
Nun, es ist sehr gut, perfekt ausgestellt und ich bin ein wenig aufgeregt. Es ist überall ein wenig unordentlich und der Test zeigt, ob es Probleme gibt. Als ich dachte, es wäre möglich zu beenden, machte ich einen weiteren Fehler [Gleichgültigkeit.jpg], also passen wir ihn an. Finden Sie zuerst den Grund für den Fehler heraus. Im F12 -Entwickler -Tool (ich ging nach Baidu, was ich oben geschrieben habe) habe ich gesehen, dass zwei Texte gleichzeitig hinzugefügt wurden, sodass das Scrollen so schnell sein wird und es eine Weile auf und ab springt. Der Schuldige wurde gefunden, SetTimeout. Da es sich um einen rekursiven Anruf handelt, ist ClClearTimeout erforderlich, um ihn zu löschen. Ok, es gibt jetzt im Grunde kein Problem.
Später:
Ah, und weil ich kürzlich von den roten Hirsch fasziniert bin, habe ich meinen Spieler "Marokko -Spieler" genannt. [Big Brother Bihart] Es dauerte drei Tage, um diese Demo zu machen, und die Texte allein wurden mehr als die Hälfte der Zeit angepasst. Und Sie können sehen, dass die Hauptprobleme die Anzeigeprobleme der Texte waren und ich betrunken war. Egal was, ich habe es endlich geschafft. Als es normal ausging, dass es sich schließlich schließlich ausging, war das Erfolgsgefühl immer noch sehr gut. Obwohl es gemacht wurde, als ich diesen Blog geschrieben habe, fand ich den Fehler ORZ wieder.
Das obige ist das, was der Editor Ihnen vorgestellt hat, um einen einfachen Musikplayer mit HTML5+Boostrap zu erstellen. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!