Предварительная обработка аудиоданных с использованием тега <audio>и Javascript - PullRequest
Новая
       53

Предварительная обработка аудиоданных с использованием тега <audio>и Javascript

2 голосов
/ 16 февраля 2012

Привет! В настоящее время я работаю над редактором звуковых сигналов, написанным на чистом HTML5 с использованием Javascript.

Я добился определенного прогресса, используя событие <audio> .MozAudioAvailable из Mozilla , чтобы получить данные в каждом кадре и нарисовать их на холсте.Однако с MozAudioAvailable я могу получить только тот кадр, который воспроизводится сейчас.

Как редактор формы сигнала, моя программа должна искать и предварительно обрабатывать данные примерно за несколько секунд ДО начала воспроизведения, т. Е. При воспроизведении 00:05: 00, моя программа, вероятно, должна отображать форму сигнала с 00:04:50 до 00:05:10, поэтому мне нужно предварительно обработать данные между 00:05:00 и 00:05:10, прежде чем они будут воспроизведены.

Я искал в Интернете, чтобы найти решение (не ограничиваясь подходами Mozilla, также принимаются Chrome или Opera), но не получил ответа.Свойство preload и событие onprogress не помогают.Сейчас я пытаюсь создать еще один тег <audio>, который воспроизводит ту же музыку, что и оригинал, но на несколько секунд быстрее, чтобы получить данные заранее.Однако решение довольно грязное, как вы видели.

Мне интересно, работает ли группа HTML5 над более гибкими способами работы с мультимедийными объектами или над этим работает какая-то команда разработчиков браузеров.Если у вас есть идеи или опыт в этой теме, пожалуйста, дайте мне несколько инструкций.Спасибо.

ОБНОВЛЕНИЕ:

Может быть, я не четко описал свой вопрос.Ниже приведена фотография, сделанная из Audacity, которая может продемонстрировать мою цель.

A Screenshot from Audacity

Вертикальная линия около 1: 55.10 указывает кадр, который воспроизводится в данный момент.Для кадров слева от линии я могу использовать исторические кадры, сохраненные моей программой.Но для кадров справа от строки, которые еще не воспроизводились, я не могу получить их до того, как они будут воспроизведены.

Уродливым решением может быть добавление еще одного тега <audio>которая играет быстрее, чем оригинальная (должна быть игра 1: 55.90 на скриншоте), чтобы я мог получить кадры справа от вертикальной линии.Но это уродливо и не так легко реализовать, не так ли?

1 Ответ

3 голосов
/ 27 мая 2012

С https://wiki.mozilla.org/Audio_Data_API

Данные, которые вы ищете, находятся в свойстве framebuffer объекта события, переданного вашей функции слушателя

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

var channels,
    rate,
    frameBufferLength,
    samples;

function audioInfo() {
  var audio = document.getElementById('audio');

  // After loadedmetadata event, following media element attributes are known:
  channels          = audio.mozChannels;
  rate              = audio.mozSampleRate;
  frameBufferLength = audio.mozFrameBufferLength;
}

function audioAvailable(event) {
  var samples = event.frameBuffer;
  var time    = event.time;

  for (var i = 0; i < frameBufferLength; i++) {
    // Do something with the audio data as it is played.
    processSample(samples[i], channels, rate);
  }
}

ДОПОЛНЕНИЕ:

ОК, так что вам нужна ваша программа, чтобы заглянуть в будущее. Насколько я знаю, это невозможно, если вы не можете использовать какое-то умное решение для предварительной загрузки (хотя я подозреваю, что это тоже не сработает - возможно, подписка на список рассылки moz может позволить вам запросить это в будущем) ).

Я до сих пор не знаю, что именно вы пытаетесь сделать, но у меня есть проигрыватель HTML5, который использует нарисованный фон формы волны и рисует осциллограф во время воспроизведения, используя аудиоданные RAW, которые я сам копирую из аудиофайла. на сервере - я не использую API mozilla, потому что хочу, чтобы он работал во всех браузерах, поддерживающих ogg, поэтому я загружаю отдельный блок данных целиком. Это, конечно, означает, что а) это не чистый HTML5 и Javascript, и б) мой проигрыватель воспроизводит только файлы, созданные на моем сервере. В любом случае, этапы:

1) Используйте утилиту командной строки (я рекомендую sox) для извлечения данных RAW - я преобразую их в моно, 8-битный 1 кГц PCM, который является относительно небольшим, но достаточно высоким разрешением, чтобы быть полезным (1 КБ / с). Если вы хотите сохранить его (рисовать осциллограф во время воспроизведения в браузерах, не поддерживающих Mozilla), кэшируйте его в базе данных как большой двоичный объект.

2) Используйте RAW PCM, чтобы нарисовать PNG волны, используя php_gd, и кешируйте это (для фона вашего игрока)

3) если используются данные RAW, вы можете загрузить их в javascript в виде строки в кодировке base64

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

Если это вообще относится к вам, дайте мне знать, и я выложу некоторый исходный код для них. Рассматриваемая программа будет выпущена как проект с открытым исходным кодом на http://jukenix.org, как только я немного приберу ее.

P.S. Скриншот этого в действии находится внизу страницы ссылки выше

...