javascript - body - MediaStream personalizado

title html attribute

Question

Recibo audio en bruto float32 a través de websockets y me gustaría reproducirlo en el navegador. A mi entender, necesitaría usar la API de MediaStream para esto. Sin embargo, no puedo encontrar una manera de crear un MediaStream al que pueda adjuntar buffers de datos.

¿Cuál es la forma correcta de lograr esto?

Estoy intentando algo como esto:

    var context = new AudioContext();

    context.sampleRate = 48000;

    var stream = null; // ????

    var source = context.createMediaStreamSource(stream);
    source.connect(context.destination);
    source.start(0);

    socket.onmessage = function (event) {
        stream.appendBuffer(new Float32Array(event.data)); // ????
    };

Answer 1

Con respecto a la decodificación, audioContext del objeto de la ventana debería hacer el trabajo.

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

y entonces

audioCtx.decodeAudioData(audioData, function(buffer) {

directamente en la matriz binaria.

Con respecto a la comunicación, prefiero usar XMLHttpRequest (una función de bajo nivel y antigua) y usar la respuesta directamente.

Esta es una función bastante buena hecha por chicos de MDM (actualicé la url del archivo ogg para que pueda probarlo directamente):

function getData() {
  source = audioCtx.createBufferSource();
  request = new XMLHttpRequest();
  request.open(''GET'', ''https://raw.githubusercontent.com/mdn/webaudio-examples/master/decode-audio-data/viper.ogg'', true);
  request.responseType = ''arraybuffer'';
  request.onload = function() {
    var audioData = request.response;
    audioCtx.decodeAudioData(audioData, function(buffer) {
        myBuffer = buffer;
        songLength = buffer.duration;
        source.buffer = myBuffer;
        source.playbackRate.value = playbackControl.value;
        source.connect(audioCtx.destination);
        source.loop = true;
        loopstartControl.setAttribute(''max'', Math.floor(songLength));
        loopendControl.setAttribute(''max'', Math.floor(songLength));
      },
      function(e){"Error with decoding audio data" + e.error});
  }
  request.send();
}

El código fuente completo está aquí:

https://raw.githubusercontent.com/mdn/webaudio-examples/master/decode-audio-data/index.html

Answer 2

Debe usar los AudioBuffers para leer el sonido de los buffers de la AudioBuffers de AudioBuffers y reproducirlo.

var context = new AudioContext();
var sampleRate = 48000;
var startAt = 0;

socket.onmessage = function (event) {
    var floats = new Float32Array(event.data);
    var source = context.createBufferSource();
    var buffer = context.createBuffer(1, floats.length, sampleRate);
    buffer.getChannelData(0).set(floats);
    source.buffer = buffer;
    source.connect(context.destination);
    startAt = Math.max(context.currentTime, startAt);
    source.start(startAt);
    startAt += buffer.duration;
};

Esto reproduce la música de un websocket.

Para convertir un AudioBuffer en un MediaStream, use AudioContext.createMediaStreamDestination() . Conecte el BufferSource a él para hacer el MediaStream personalizado basado en los datos del búfer.

var data = getSound(); // Float32Array;
var sampleRate = 48000;
var context = new AudioContext();

var streamDestination = context.createMediaStreamDestination();
var buffer = context.createBuffer(1, data.length, sampleRate);
var source = context.createBufferSource();

buffer.getChannelData(0).set(data);
source.buffer = buffer;
source.connect(streamDestination);
source.loop = true;
source.start();

var stream = streamDestination.stream;

Esto lee el audio de la matriz de datos y lo convierte en un MediaStream.