Canvas vs SVG при взаимодействии аудиоволн

Я создаю инструмент для воспроизведения звука, где буду showing the wave image of the audio file.
аудио изображение будет выглядеть следующим образом:Canvas vs SVG при взаимодействии аудиоволн

Пользовательский интерфейс будет отображаться воспроизводимый область в другой цвет, как пока еще не играл области, а также быть в состоянии увеличить в конкретной области.

Я мог бы сделать это с помощью холста, и добавить непрозрачности DIV в качестве слоя на вершине, чтобы показать воспроизводимую/Unplayed области, меняя left положения в соответствии с положением в аудио. Альтернативой может быть повторная визуализация каждый раз, когда обновление в позиции будет отображаться в цветном или неиграемом виде.

Возможность масштабирования в холсте будет повторной визуализацией, также я полагаю.

Я мог бы также сделать это в SVG, и в этом случае увеличение будет, вероятно, easyer, и показывая воспроизводимую область будет изменением цвета stroke конкретного path или line.

Мой вопрос:

Является ли это сценарий, где «оба варианта являются действительными», или я должен использовать из Технологий над другой, и почему?

источник

2016-12-08 Rikard

Я не уверен, что изменение цвета удара будет работать в svg, так как вы, вероятно, хотите, чтобы все это было одним путем, и в этом случае вы не можете смешивать цвета штриха. Однако вы можете сделать то же самое, что и предложение холста, и иметь наложение с непрозрачностью. Лично я хотел бы написать и сделать большую часть кода как агностик библиотеки, насколько это возможно, поэтому вы можете попробовать выполнить обмен в других решениях и не переделывать свой код слишком много. Я бы использовал svg over canvas, если вам нужно тонкое взаимодействие с волной, но это звучит не так, как вам нужно, поэтому я думаю, что все будет в порядке. – Ian

Я бы предложил использовать холст в этом случае. Все, что предлагает SVG на холсте, например. DOM, обнаружение попаданий, анимация, фильтр и т. Д. Не будут использоваться, но будут негативно влиять на производительность вашего приложения.

источник

2016-12-08 10:41:23

Привет, спасибо, что проверили это. Я ссылался на анимацию воспроизводимой и неиграемой области, а также возможность масштабирования. Не могли бы вы подробнее рассказать, как вы думаете, что 'холст' будет лучше SVG в этих функциях? – Rikard

@ Рикард Я согласен с этим ответом. SVG усложнит, что должно быть очень простой задачей рендеринга. Тем не менее OP это будет зависеть от ваших навыков программиста и того, насколько хорошо вы знаете SVG или Canvas API. Это особенно важно, потому что существует множество ловушек при работе с большим набором данных, подобным декодированному звуковому потоку. 5-минутная стереофоническая дорожка в 44 кГц - это 26 миллионов плюс образцы, а не простое масштабирование и панорамирование в реальном времени. Здесь вы должны сосредоточиться, а не то, что api сделает рендеринг. – Blindman67

@ Blindman67 приятный отзыв спасибо. Да, я знаю об этих ловушках, а также инструментам масштабирования, вероятно, потребуется дебютант или дроссель, чтобы избежать логики масштабирования, называемой каждым шагом масштабирования. В тех случаях, когда мне не хватает опыта, если «цикл» для создания холста на каждом шаге масштабирования или воспроизведения выполняется быстрее/лучше, чем путь SVG (например, с формой волны), а также увеличивать и уменьшать его с помощью SVG. – Rikard

Canvas vs SVG при взаимодействии аудиоволн

ответ

Смежные вопросы