Ich arbeite an einem benutzerdefinierten Soundcloud-Player für meine Website mit waveform.js , um Wellenformen zu generieren. Es funktioniert gut, aber es fehlt die Scrubber-Funktionalität. Wie kann ich das hinzufügen?
Ich bin kein JS-Zauberer und lerne immer noch herum, also bin ich sehr dankbar für jede Hilfe oder Vorschläge!
Update IV: Ich habe eine neue Möglichkeit gefunden, lavendelerzeugte Wellenformen in den originalen SoundCloud Custom Player sc-player.js zu integrieren.
Zuerst habe ich eine Codezeile gefunden, die für die HTML-Struktur des Players verantwortlich ist und in Zeile 529 id="waveform" zu sc-waveform container hinzugefügt:
Dann habe ich die Zeile 676 aktualisiert und dabei img durch canvas
Als nächstes habe ich einen Code gefunden, der für das Einbetten des ursprünglichen Bildes der Wellenform in Zeile 340 verantwortlich ist und es auskommentiert hat:
%Vor%Und dann habe ich den Code unten auf meiner Seite gepostet:
%Vor%Die Ergebnisse sind sehr vielversprechend, jetzt habe ich voll anpassbare Wellenform und Scrubber funktioniert auch. Aber es gibt noch Dinge, die ich gerne reparieren würde.
Wenn ich in Chrome die Wiedergabe- und Pause-Taste drücke, klicke auf die Wellenform, der Titel wird abgespielt, aber die Wiedergabetaste ändert seinen Status nicht. Dann müssen Sie darauf doppelklicken, um die Spur zu stoppen.
Der Puffer und die Fortschrittsleiste sind immer noch nur die sc-player divs im Hintergrund. Wie könnte ich sc-player.js und waveform.js miteinander verknüpfen, damit der Fortschritt auf der Wellenform-Leinwand generiert wird (wie im Beispiel auf Ссылка )?
Irgendwelche Ideen, wie Sie diese beheben können?
Hier ist der Spieler auf der Live-Website: Ссылка
Tags und Links javascript html5 soundcloud player waveform