2010-12-08 13 views
1

Ich arbeite an einem Projekt in PHP, wo aus einer Bibliothek von Tracks, ein Benutzer einen Track auswählen kann, wählen Sie ein Snippet aus dieser Spur von ein paar Sekunden Länge, und verwenden Sie das Snippet als Suchparameter auf der nächsten Seite.Javascript zum Ausschneiden Ausschnitt aus Audiospur

Der Client möchte eine Wellenform der Spur anzeigen lassen (diese wurden bereits als PNG-Dateien generiert), wobei ein Abspielkopf die aktuelle Wiedergabeposition anzeigt (sollte ziemlich einfach sein). Der Benutzer sollte in der Lage sein, einen Anfang und einen Endpunkt für seine Auswahl auszuwählen, indem er vertikale Balken zieht, das ausgewählte Snippet abhört (durch Drücken der Leertaste o.ä.) und dann auf "Suchen" klickt, um ein HTML-Formular zu senden. Die einzigen Parameter, die ich tatsächlich von dem Formular benötige, sind die Anfangs- und Endpositionen des ausgewählten Audio-Snippets.

Also, das ist was der Kunde will, und ich bin in der Brainstorming-Phase. Bisher habe ich eine Reihe von MP3-Dateien und entsprechende Wellenform-Grafiken. In Bezug auf die Browser-Unterstützung wird es OK sein, dass der Browser "die neueste Version von ..." sein muss, aber ich möchte Unterstützung für alle großen Namen anbieten: Safari, Firefox, Opera, IE, Chrome .

Haben Sie irgendwelche Vorschläge von JavaScript-Bibliotheken oder -Lösungen, die ich bei der Implementierung unterstützen sollte: Einbetten der Audiodatei, der Wiedergabesteuerschnittstelle und der Snippet-Auswahlschnittstelle. Obwohl es möglich sein könnte, entsprechende OGG-Dateien für alle mp3s zu erzeugen (um mit einer HTML5-Implementierung zu helfen), würde ich es vorziehen, dies nicht zu tun, da dies die Dinge komplizierter macht. Im Idealfall möchte ich eine MP3-only-Lösung, die Cross-Browser-Unterstützung bietet. Vielleicht wäre so etwas wie jPlayer möglich? Ich bin sicherlich mit jQuery vertraut, also wäre das ein Bonus.

Gibt es irgendwelche Bibliotheken, die ich verwenden könnte, die mir mit der Schnittstelle "Schnipselauswahl" helfen könnten? In einer vollkommen idealen Welt wäre es eine Lösung mit einem "Scrub-Balken" - d. H. Wenn Sie die Start- und Endpunkt-Griffe ziehen, wird der Sound am Abspielkopf sofort in der Vorschau angezeigt.

Vielen Dank für Ideen und Anregungen!

EDIT (weitere Informationen):

Ich hoffe, der Lage sein, etwas zu schaffen, ähnlich wie diese Demo: http://www.happyworm.com/jquery/jplayer/latest/demo-07.htm außer mit die Funktion hinzugefügt, dass ein Benutzer einen ‚Schnipsel‘ aus der auswählen kann Track, mit Start-und Endpunkt Schrubben, und können das Snippet von vorhören Play drücken. meine gewünschte Schnittstelle ist wie folgt also:

  • auf Seite laden, würde die Spur Pufferung starten, und die Taste Play würde von Anfang an als normal spielen, wenn
  • , wenn der Benutzer zieht einen Peeling Bar gedrückt von dem äußersten linken Rande der Spur wäre der Ton an der Abspielposition (wie in der Probe I verknüpft) angesehen werden, und die Scrub bar beim Loslassen, würde die Wiedergabe von dort bis zum Ende der Strecke fortsetzen
  • , wenn der Benutzer eine andere Scrub-Leiste von ganz rechts auf der Spur verschiebt, wird der Sound am Abspielkopf erneut angezeigt. Da jedoch die -Leiste freigegeben ist, sollte die Wiedergabe zurück zur LEFT-Scrub-Leiste springen und von dort fortfahren. (Wenn das zu schwer zu erreichen ist, würde ich glücklich mit der rechten Scrub-Leiste sein, um den Sound nicht vorzuspielen, wie es gezogen wurde, aber nur als 'Marker' für das Ende der Auswahl zu fungieren).
  • die beiden Schrubbbalken können nicht aneinander vorbeilaufen, so ist der linke immer der 'Start' und der rechte ist 'Ende' der Auswahl.
  • Sobald die Balken verschoben wurden und eine Auswahl getroffen wurde, sollte die Wiedergabe das ausgewählte Snippet unendlich lange durchlaufen lassen, bis "stop" gedrückt wird.
  • in einer idealen Welt, würde ich gerne die Schrubben Bars auf ein Raster von ganze Sekunden "snappen", so dass die Schnipsel Start, Ende und Länge Werte sind immer eine ganze Anzahl von Sekunden. Wenn das nicht gelingt, werde ich die Zahlen später in JavaScript auf die nächste Ganzzahl runden.

Antwort

0

Für die Auswahl:

http://docs.jquery.com/UI/Slider

Was JavaScript eine Wiedergabe Schrubben, viel Glück damit zu tun ... Klingt eher wie ein Blitz oder html5 Sache

+0

Seit der Veröffentlichung, ich Ich habe festgestellt, dass diese jPlayer-Demo - http://www.happyworm.com/jquery/jplayer/latest/demo-07.htm - Scrubben mit ihrer HTML5/Flash-Unterstützung ermöglicht. Das sieht gut aus, also geht es bei meiner Frage jetzt darum, das Beispiel zu erweitern, um eine zweite Scrub-Leiste hinzuzufügen und eine Vorschau der Auswahl anzuzeigen. Ich werde meine ursprüngliche Frage aktualisieren! –

Verwandte Themen