Как воспроизвести аудио-байтовый массив (не файл!) С помощью JavaScript в браузере

Question

В большинстве случаев по соображениям безопасности я не могу хранить WAV-файл на сервере, к которому должен обращаться браузер.У меня есть байтовый массив, содержащий аудио данные (часть данных файла WAV, на мой взгляд) на сервере, и я хочу, чтобы он воспроизводился в браузере через JavaScript (или апплет, но предпочтительнее JS), я могу использовать JSON-PRC, чтобы отправить весь байт [], или я могу открыть сокет для его потоковой передачи, но в любом случае я не знаю, кто будет проигрывать байт [] в браузере?

Answer 1

Следующий код будет воспроизводить синусоидальную волну на 0,5 и 2,0. Вызовите функцию play_buffersource() в вашей кнопке или в любом другом месте.

Протестировано с использованием Chrome с включенным флагом Web Audio. В вашем случае все, что вам нужно сделать, это просто перенаправить ваши аудио байты на buf.

<script type="text/javascript">
const kSampleRate = 44100; // Other sample rates might not work depending on the your browser's AudioContext
const kNumSamples = 16834;
const kFrequency  = 440;
const kPI_2       = Math.PI * 2;

function play_buffersource() {
    if (!window.AudioContext) {
        if (!window.webkitAudioContext) {
            alert("Your browser sucks because it does NOT support any AudioContext!");
            return;
        }
        window.AudioContext = window.webkitAudioContext;
    }

    var ctx = new AudioContext();

    var buffer = ctx.createBuffer(1, kNumSamples, kSampleRate);
    var buf    = buffer.getChannelData(0);
    for (i = 0; i < kNumSamples; ++i) {
        buf[i] = Math.sin(kFrequency * kPI_2 * i / kSampleRate);
    }

    var node = ctx.createBufferSource(0);
    node.buffer = buffer;
    node.connect(ctx.destination);
    node.noteOn(ctx.currentTime + 0.5);

    node = ctx.createBufferSource(0);
    node.buffer = buffer;
    node.connect(ctx.destination);
    node.noteOn(ctx.currentTime + 2.0);
}
</script>

Ссылки:

• http://epx.com.br/artigos/audioapi.php
• https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

Если вам нужно повторить выборку аудио, вы можете использовать ресэмплер JavaScript: https://github.com/grantgalitz/XAudioJS

Если вам нужно декодировать данные base64, существует множество декодеров JavaScript base64: https://github.com/carlo/jquery-base64

Answer 2

Я сделал это с помощью следующего кода.Я передаю байтовый массив, содержащий данные из файла wav, в функцию playByteArray.Мое решение похоже на решение Питера Ли, но я не мог заставить его работать в моем случае (вывод искажен), тогда как это решение хорошо работает для меня.Я проверил, что это работает в Firefox и Chrome.

window.onload = init;
var context;    // Audio context
var buf;        // Audio buffer

function init() {
    if (!window.AudioContext) {
    if (!window.webkitAudioContext) {
        alert("Your browser does not support any AudioContext and cannot play back this audio.");
        return;
    }
        window.AudioContext = window.webkitAudioContext;
    }

    context = new AudioContext();
}

function playByteArray(byteArray) {

    var arrayBuffer = new ArrayBuffer(byteArray.length);
    var bufferView = new Uint8Array(arrayBuffer);
    for (i = 0; i < byteArray.length; i++) {
      bufferView[i] = byteArray[i];
    }

    context.decodeAudioData(arrayBuffer, function(buffer) {
        buf = buffer;
        play();
    });
}

// Play the loaded file
function play() {
    // Create a source node from the buffer
    var source = context.createBufferSource();
    source.buffer = buf;
    // Connect to the final output node (the speakers)
    source.connect(context.destination);
    // Play immediately
    source.start(0);
}

Answer 3

Если у вас есть байты на сервере, я бы посоветовал вам создать какой-нибудь обработчик на сервере, который будет направлять байты в ответ в виде файла wav. Этот «файл» будет только в памяти на сервере, а не на диске. Тогда браузер может просто обработать его как обычный wav-файл. Чтобы получить больше информации о том, как это можно сделать в вашей среде, потребуются дополнительные сведения о стеке серверов.

Answer 4

Я подозреваю, что вы можете достичь этого с помощью HTML5 Audio API достаточно легко:

https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension

Эта библиотека тоже может пригодиться, хотя я не уверен, отражает ли она последние версии браузера:

https://github.com/jussi-kalliokoski/audiolib.js