MIX Wav файл и экспортируйте его с помощью Web Audio API - PullRequest
Новая
       37

MIX Wav файл и экспортируйте его с помощью Web Audio API

0 голосов
/ 28 июня 2018

Я веб-разработчик из Японии.
Это первый вопрос о стеке над потоком.

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

В результате различных исследований я заметил, что использование Web Audio API было лучшим выбором, Итак, я решил использовать его.

▼ Чего я хочу достичь

  • Multiple Wav files загрузка с помощью Web audio API может быть сгруппирована в one Wav file & Для возможности загрузки из браузера.

Например, загрузить несколько файлов WAV, таких как гитара, барабан и пианино, и отредактируйте его в браузере и, наконец, выведите в виде одного файла WAV. Затем мы можем загрузить этот отредактированный wav-файл из браузера и воспроизвести его.

▼ Вопрос

  • Можно ли выполнить эти требования, просто используя веб-аудио API?
  • или нам нужно использовать другую библиотеку?

Я проверил Record.js на github, но разработка остановилась на 2-3 года и имеет много проблем, и я не могу получить поддержку. поэтому я решил не использовать его. а также я проверил похожую проблему API веб-аудио: планирование звуков и экспорт микса

Поскольку информация старая, я не знаю, смогу ли я ее использовать Благодарю.

1 Ответ

0 голосов
/ 28 июня 2018

Привет и добро пожаловать в стек переполнения!

Можно ли добиться этого, просто используя веб-аудио API?

С точки зрения объединения / микширования файлов это вполне достижимо! В этой статье рассматриваются многие (если не все) шаги, которые вам понадобятся для выполнения предложенной вами задачи.

Каждый файл, который вы хотите загрузить, может быть загружен в AudioBufferSource (примеры описаны в этой статье, связанной с ) Пример настройки источника буфера после загрузки аудиоданных в : 

play: function (data, callback) {
    // create audio node and play buffer
    var me = this,
        source = this.context.createBufferSource(),
        gainNode = this.context.createGain();
    if (!source.start) { source.start = source.noteOn; }
    if (!source.stop) { source.stop = source.noteOff; }
    source.connect(gainNode);
    gainNode.connect(this.context.destination);
    source.buffer = data;
    source.loop = true;
    source.startTime = this.context.currentTime; // important for later!
    source.start(0);
    return source;
}

Существуют также специальные узлы, уже предназначенные для ваших целей микширования, например ChannelMergerNode (объединяет несколько моноканалов в новый буфер каналов). Это если вы не хотите самостоятельно обрабатывать сигналы в javascript, но будете быстрее использовать объекты Web Audio, поскольку они являются встроенным скомпилированным кодом, уже встроенным в браузер.

После этого полного руководства, отправленного до , есть также опции для экспорта файла (как .wav в демонстрационном случае) с использованием следующего кода: 

var rate = 22050;

function exportWAV(type, before, after){
    if (!before) { before = 0; }
    if (!after) { after = 0; }

    var channel = 0,
        buffers = [];
    for (channel = 0; channel < numChannels; channel++){
        buffers.push(mergeBuffers(recBuffers[channel], recLength));
    }

    var i = 0,
        offset = 0,
        newbuffers = [];

    for (channel = 0; channel < numChannels; channel += 1) {
        offset = 0;
        newbuffers[channel] = new Float32Array(before + recLength + after);
        if (before > 0) {
            for (i = 0; i < before; i += 1) {
                newbuffers[channel].set([0], offset);
                offset += 1;
            }
        }
        newbuffers[channel].set(buffers[channel], offset);
        offset += buffers[channel].length;
        if (after > 0) {
            for (i = 0; i < after; i += 1) {
                newbuffers[channel].set([0], offset);
                offset += 1;
            }
        }
    }

    if (numChannels === 2){
        var interleaved = interleave(newbuffers[0], newbuffers[1]);
    } else {
        var interleaved = newbuffers[0];
    }

    var downsampledBuffer = downsampleBuffer(interleaved, rate);
    var dataview = encodeWAV(downsampledBuffer, rate);
    var audioBlob = new Blob([dataview], { type: type });

    this.postMessage(audioBlob);
}

Так что я думаю, что в Web-Audio есть все, что вы можете для этой цели! Тем не менее, это может быть сложно в зависимости от вашего опыта веб-разработки, но это навык, безусловно, стоит изучить!

Нужно ли использовать другую библиотеку?

Если вы можете, я думаю, определенно стоит попробовать это с Web-Audio , так как вы почти наверняка получите лучшие скорости для обработки, но есть и другие библиотеки, такие как Pizzicato.js просто чтобы назвать одно. Я уверен, что вы найдете много других.

...