cljs karaoke client

Cljs-Karaoke-Client

Ein in ClojureScript implementiertes Web -Karaoke -Player

Demo

Rolling Stones - jetzt überall

Beschreibung

Mein Versuch, einen anständigen Karaoke -Spieler zu machen. Seit Jahren habe ich versucht, mit wenig Erfolg eine gute Karaoke -Lösung in die Hände zu bekommen.

Beide Alternativen bieten einen breiten Katalog von Liedern, auf die Sie im Internet frei zugreifen können, aber mit einigen Nachteilen:

• Songs sind online für Spiele wie Ultrastar erhältlich als nicht den Original -Song -Track mit Gesang, was meiner Meinung nach die "Karaoke Experience" tötet.
• Die Synchronisation von Lyrics ist sehr unterschiedlich (einige rendern nur ganze Verse gleichzeitig, während andere die Texte auf der Silbe -Ebene synchronisiert haben), wenn Sie YouTube -Karaoke -Videos verwenden.

Die Hauptschwierigkeit bestand darin, Texte mit Synchronisierungsinformationen zu erhalten. Ich fand viele MIDI -Dateien im Web, die anscheinend für Karaoke -Maschinen verwendet wurden. Diese Dateien enthalten Texte, die bis zur Silbenebene synchronisiert sind. Da es wirklich keinen Standard gibt, wie man Texte auf MIDI -Dateien für Karaoke -Maschinen speichert, haben viele subtile Unterschiede in der Art und Weise, wie sie gespeichert werden. Bei der Parsen dieser Dateien habe ich eine Reihe von groben Annahmen erstellt und die Texte zusammen mit den Zeitdaten an getrennte Dateien extrahiert. Die meisten sind in Ordnung, aber viele sind von einem variablen Offset ein wenig abgeschafft

Der MIDI-Parser befindet sich in einem separaten Projekt: Clj-Karaoke.

Eine weitere Schwierigkeit bestand darin, den Song -Audio -Track zu erhalten, da die Texte mit dem MIDI -Audio -Track synchronisiert sind. Zunächst wollte ich die MIDI -Dateien direkt für die Audio -Tracks verwenden, aber beim Abspielen des Audios hing die Qualität stark von den von Ihnen installierten Sound -Schriftarten ab und ist eine gute Umwelt für anständige Ergebnisse eingerichtet. Auch wenn ich diese Dateien auf einem Web -Client abspielen wollte, machte dies all dies nur komplizierter. Deshalb habe ich mich mit dem Extrahieren der Texte in getrennte Dateien und den Midis mit MP3 -Dateien niedergelassen, die ziemlich großartig sind, und ich konnte mit verschiedenen Sound -Schriftkollektionen experimentieren.

Merkmale

• Tonnenweise von Liedern
• Hintergrundbilder für Songs werden nach einer Google -Suche während des Songlades dynamisch aus dem Web abgerufen (wenn keiner zwischengespeichert wird)
  • Jeder Benutzer reitet seine lokalen Hintergründe aus und drückt seine URLs regelmäßig zu einer Mongo -DB.
  • Initialisierungsdaten (Lyrics Offsets, BG Images) verbessert sich während der Builds durch Konsolidierung von Daten von Benutzern
• Fähigkeit, Texte nach einem Offset in Milisekunden zu synchronisieren (entweder aus dem Bedienfeld oder durch Anheben einer Abfragezeichenfolge an die URL)
• Automatische Wiedergabeliste aus zuvor synchronisierten Songs
• Exportieren Sie die lokalen Synchronisierungsinformationen, damit diese mit den serverseitigen Synchronisierungsdaten verschmolzen werden können
• Experimentelle Audioeingabe für Desktop Firefox und Chrom mit Live -Echo/Reverb Sound FX (verwenden Sie ein externes Mikrofon für die besten Ergebnisse)
• Experimentelle Webcam -Aufzeichnung und Videoexport in die Webm -Datei. Der Audiokanal im exportierten Video ist das Ergebnis des Mischens des Mikrofoneingangs mit Effekten und dem Song -Track.
• Fernbedienung. Führen Sie die Anwendung auf einem großen Bildschirm aus und steuern Sie es von einer anderen Anwendungsinstanz (z. B. von Ihrem mobilen Gerät!)
• Erstellen Sie Songseiten vor dem Rendern mit SEO-Tags, damit Sie Links in sozialen Netzwerken als hübsche Karten mit Songnamen und einem Bild teilen können, falls verfügbar.
  • 
• Lyrics Editor für die Synchronisierung neuer Tracks mit Texten.
  • Wählen Sie eine Audiodatei aus
  • Fügen Sie Text hinzu, teilen Sie ihn in Silben (oder nur zufällige Stücke) auf, die
  • Spielen Sie Ihren Track und tippen Sie für jedes Stück auf die Schaltfläche "Synchronisation"
  • Wenn Sie mehr Genauigkeit wünschen, können Sie die Strecke verlangsamen, um die Wiedergaberate zu verringern

Arbeiten an

• Dynamische Schriftgrößen, bereits optimierte Schriftgrößen für Songtitel, aber ich suche nach einer Möglichkeit, auch die Texte zu verbessern.
• Eine Möglichkeit, benutzerdefinierte Texte für alle Benutzer zu erfassen und diese als Standardeinstellungen in nachfolgende Veröffentlichungen zu integrieren
• Gleiches gilt für Liederhintergründe. Derzeit wird Google Custom Search verwendet, um Bilder im Zusammenhang mit dem Song -Titel zu finden. Es gibt eine Quote für diesen Service und es ist ziemlich niedrig. Je weniger wir suchen, desto besser.

Vor Ort laufen

Voraussetzungen:

• JDK
• Schatten-Cljs

$ npm i -g shadow-cljs 
$ npm install
$ shadow-cljs watch app

Wenn Sie einen Release -Build zusammenstellen möchten, können Sie Folgendes ausführen:

$ shadow-cljs release app

Der Bau befindet sich im /public Verzeichnis.

Schlüsselbindungen

• "Esc": Stop Playback
• "LR": Song laden
• "Alt-o": Aktivieren Sie Optons im Wiedergabemodus
• "Alt-H": Aktivieren Sie den Bedienfeldmodus
• "links": Audio nach rückwärts suchen
• "Richtig" Audio suchen nach vorne
• "Meta-Shift-L": Schleifenmodus (jetzt funktioniert derzeit)
• "Alt-Shift-P": Spielen
• "Shift-Right": Nächster Song auf Playlist
• "TT": Toasty!
• "H": Zeigen Sie Cheatsheet

Zukünftige Arbeit

• Raspberry Pi Bild
• Lyrics Sync Editor