Визуализация формы волны в JavaScript из аудио

Я пытаюсь использовать JavaScript для отображения формы сигнала и аудиофайла, но я даже не знаю, как начать. Я нашел API аудио данных, но я не знаком с большинством звуковых терминов и не знаю, что именно предоставляется или как его манипулировать. Я нашел примеры осциллограмм в JavaScript, но они слишком сложны/я не могу понять, что происходит. Тогда мой вопрос: как вы можете использовать JavaScript для создания формы сигнала на холсте, и каков именно этот процесс?

Ответы

Ответ 2

Я сделал это с помощью веб-аудио api, и я использовал проект под названием waveurfer. http://www.html5audio.org/2012/10/interactive-navigable-audio-visualization-using-webaudio-api-and-canvas.html

Что он делает, он рисует крошечные прямоугольники и использует звуковой буфер для определения высоты каждого прямоугольника. Также в waveurfer можно играть и приостанавливаться с помощью пробела и нажимать на волну, чтобы начать играть в этой точке.

Обновление: этот веб-сайт ПОС больше не существует.

Чтобы проверить, что я сделал, зайдите на этот сайт: Обновление: этот веб-сайт ПОС больше не существует. Это работает только в браузере google chrome и, возможно, в сафари, но я не уверен в этом.

Сообщите мне, если вы хотите получить дополнительную информацию.

Ответ 3

Здесь статья из команды BBC R & D, показывающая, как они сделали именно это, чтобы построить пару JS-библиотек и многое другое. Результаты кажутся открытыми и довольно хорошими.

Вместо использования API аудиоданных, который не может быть уверен, поддерживается всеми браузерами ваших пользователей, было бы лучше, если бы вы создали серверную информацию с данными о волне (команда BBC создала приложение С++ для этого) и, по крайней мере, вы развязываете внешний вид на стороне клиента из аспекта воспроизведения. Кроме того, имейте в виду, что весь аудиофайл должен дойти до браузера, прежде чем вы сможете вычислить пики и отобразить форму волны. Я не уверен, что потоковые файлы (например, MP3) можно использовать для расчета пиков по мере поступления файла. Но в целом, конечно, лучше вычислить свои пики один раз, на стороне сервера, а затем просто отправить данные через JSON (или даже создайте + кешируйте свою графическую серверную сторону - есть многочисленные библиотеки диаграмм PHP, или вы можете сделать это изначально с помощью GD).

Для воспроизведения в браузере есть несколько хороших (не Flash!) вариантов. Лично мне нравится SoundManager 2, поскольку код полностью отключен от отображения, что означает, что я свободен для создания любого пользовательского интерфейса/дисплея, который мне нравится (или клиент хочет). Я нашел его надежным и надежным, хотя у меня была начальная сложность в одном проекте с несколькими игроками на одной странице. Примеры на их сайте невелики (imho), но с фантазией вы можете сделать несколько классных вещей. SM2 также имеет опцию Flash fallback для антивирусных браузеров.