Я пытаюсь использовать JavaScript для отображения формы сигнала и аудиофайла, но я даже не знаю, как начать. Я нашел API аудио данных, но я не знаком с большинством звуковых терминов и не знаю, что именно предоставляется или как его манипулировать. Я нашел примеры осциллограмм в JavaScript, но они слишком сложны/я не могу понять, что происходит. Тогда мой вопрос: как вы можете использовать JavaScript для создания формы сигнала на холсте, и каков именно этот процесс?
Визуализация формы волны в JavaScript из аудио
Ответ 1
Вот пример кода из моей книги (HTML5 Multimedia: Develop and Design), который делает именно это; Аудиоформат. Он использует API аудио данных Mozilla.
Код просто берет моментальные снимки аудиоданных и использует их для рисования на холсте.
Ответ 2
Я сделал это с помощью веб-аудио api, и я использовал проект под названием waveurfer. http://www.html5audio.org/2012/10/interactive-navigable-audio-visualization-using-webaudio-api-and-canvas.html
Что он делает, он рисует крошечные прямоугольники и использует звуковой буфер для определения высоты каждого прямоугольника. Также в waveurfer можно играть и приостанавливаться с помощью пробела и нажимать на волну, чтобы начать играть в этой точке.
Обновление: этот веб-сайт ПОС больше не существует.
Чтобы проверить, что я сделал, зайдите на этот сайт: Обновление: этот веб-сайт ПОС больше не существует. Это работает только в браузере google chrome и, возможно, в сафари, но я не уверен в этом.
Сообщите мне, если вы хотите получить дополнительную информацию.
Ответ 3
Вместо использования API аудиоданных, который не может быть уверен, поддерживается всеми браузерами ваших пользователей, было бы лучше, если бы вы создали серверную информацию с данными о волне (команда BBC создала приложение С++ для этого) и, по крайней мере, вы развязываете внешний вид на стороне клиента из аспекта воспроизведения. Кроме того, имейте в виду, что весь аудиофайл должен дойти до браузера, прежде чем вы сможете вычислить пики и отобразить форму волны. Я не уверен, что потоковые файлы (например, MP3) можно использовать для расчета пиков по мере поступления файла. Но в целом, конечно, лучше вычислить свои пики один раз, на стороне сервера, а затем просто отправить данные через JSON (или даже создайте + кешируйте свою графическую серверную сторону - есть многочисленные библиотеки диаграмм PHP, или вы можете сделать это изначально с помощью GD).
Для воспроизведения в браузере есть несколько хороших (не Flash!) вариантов. Лично мне нравится SoundManager 2, поскольку код полностью отключен от отображения, что означает, что я свободен для создания любого пользовательского интерфейса/дисплея, который мне нравится (или клиент хочет). Я нашел его надежным и надежным, хотя у меня была начальная сложность в одном проекте с несколькими игроками на одной странице. Примеры на их сайте невелики (imho), но с фантазией вы можете сделать несколько классных вещей. SM2 также имеет опцию Flash fallback для антивирусных браузеров.
Ответ 4
Не поддерживается, но посмотрите этот генератор тонов Firefox.