2016-12-08 3 views
0

Ich baue ein Werkzeug zum Abspielen von Audio, wo ich showing the wave image of the audio file sein werde.
Ein Tonbild würde wie folgt aussehen:Canvas vs SVG auf Audio-Wave-Bild-Interaktion

enter image description here

Die Benutzeroberfläche den gespielten Bereich in einer anderen Farbe als die noch nicht gespielt Bereich zeigen und auch in einem bestimmten Bereich vergrößern kann.

ich mit einer Leinwand tun könnte, und eine Opazität div als Schicht auf fügen Sie die gespielt/ungespielt Bereich zu zeigen, entsprechend die Position in dem Audio die left Position zu ändern. Eine Alternative wäre es, jedes Mal neu zu rendern, wenn ein Positionsupdate dazu führt, dass im gespielten/ungespielten Bereich eine andere Farbe angezeigt wird.

Die Zoom-Möglichkeit in Canvas wäre ein Re-Render auch ich darlegen.

Ich könnte auch diese in SVG tun, und in diesem Fall würde der Zoom wahrscheinlich easyer sein, und das spielte Bereich zeigt, in stroke Farbe der spezifischen path oder line eine Änderung wäre.

Meine Frage:

Ist dies ein Szenario, in die „beiden Optionen gültig sind“, oder soll ich den tecnologies über die andere verwenden, und warum?

+0

Ich bin mir nicht sicher, die Verwendung einer Änderung in der Strichfarbe würde in Svg funktionieren, wie Sie wahrscheinlich alle einen Pfad sein möchten, in diesem Fall können Sie Strichfarben nicht mischen. Sie können jedoch dasselbe wie Ihren Leinwandvorschlag tun und eine Deckkraft mit Deckkraft haben. Persönlich würde ich schreiben und den Großteil des Codes als Bibliothek agnostisch wie möglich machen, so dass Sie versuchen können, andere Lösungen auszutauschen und Ihren Code nicht zu sehr umzuformen. Ich würde Svg über Canvas verwenden, wenn du eine gute Interaktion mit der Welle brauchst, aber es klingt nicht so, als würdest du das brauchen, also denke ich, dass beides in Ordnung wäre. – Ian

Antwort

1

Ich würde empfehlen, Leinwand in diesem Fall zu verwenden. Alles, was SVG über Leinwand zu bieten hat, z. DOM, Treffererkennung, Animation, Filter usw. werden nicht verwendet, tragen aber negativ zur Performance Ihrer App bei.

+0

Hallo, vielen Dank für das Auschecken. Ich habe mich darauf bezogen, den gespielten und ungespielten Bereich zu animieren und auch eine Zoom-Möglichkeit. Könnten Sie näher erläutern, auf welche Weise Sie denken, dass "Canvas" in diesen Funktionen besser wäre als SVG? – Rikard

+0

@Rikard Ich stimme dieser Antwort zu. SVG wird viel komplizierter, was ein sehr einfacher Rendering-Job sein sollte. Dies hängt jedoch von Ihren Fähigkeiten als Programmierer ab und davon, wie gut Sie entweder SVG oder die Canvas API kennen. Dies ist besonders deshalb der Fall, weil es viele Fallen gibt, wenn es sich um einen großen Datensatz wie einen dekodierten Schallstrom handelt. Eine 5-minütige Stereospur bei 44 kHz ist 26 Millionen plus Samples, keine einfache Sache, um in Echtzeit zu zoomen und zu schwenken. Darauf solltest du dich konzentrieren, nicht, was api das Rendering macht. – Blindman67

+0

@ Blindman67 nettes Feedback danke. Ja, ich bin mir dieser Fallen bewusst, auch ein Zoomwerkzeug würde wahrscheinlich einen Entpreller oder eine Drossel benötigen, um zu vermeiden, dass die Zoomlogik bei jedem Schritt des Zooms aufgerufen wird. Wo ich keine Erfahrung habe, ist eine "Schleife", die die Leinwand in jedem Zoom- oder Wiedergabeschritt erzeugt, insgesamt schneller/besser als ein SVG-Pfad (z. B. mit der Wellenform) und vergrößert und verkleinert sich mit SVG. – Rikard