4

i made this webapp to compose music, i wanted to add a feature to download the composition as .mp3/wav/whateverFileFormatPossible, i've been searching on how to do this for many times and always gave up as i couldn't find any examples on how to do it, only things i found were microphone recorders but i want to record the final audio destination of the website. I play audio in this way:

const a_ctx = new(window.AudioContext || window.webkitAudioContext)()
function playAudio(buf){
    const source = a_ctx.createBufferSource()
    source.buffer = buf
    source.playbackRate.value = pitchKey;
    //Other code to modify the audio like adding reverb and changing volume
    source.start(0)
}

where buf is the AudioBuffer.

To sum up, i want to record the whole window audio but can't come up with a way.

link to the whole website code on github

Specy
  • 189
  • 2
  • 13

1 Answers1

3

Maybe you could use the MediaStream Recording API (https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API):

The MediaStream Recording API, sometimes simply referred to as the Media Recording API or the MediaRecorder API, is closely affiliated with the Media Capture and Streams API and the WebRTC API. The MediaStream Recording API makes it possible to capture the data generated by a MediaStream or HTMLMediaElement object for analysis, processing, or saving to disk. It's also surprisingly easy to work with.

Also, you may take a look at this topic: new MediaRecorder(stream[, options]) stream can living modify?. It seems to discuss a related issue and might provide you with some insights.

The following code generates some random noise, applies some transform, plays it and creates an audio control, which allows the noise to be downloaded from the context menu via "Save audio as..." (I needed to change the extension of the saved file to .wav in order to play it.)

<html>
<head>
<script>

const context = new(window.AudioContext || window.webkitAudioContext)()

async function run()
{
    var myArrayBuffer = context.createBuffer(2, context.sampleRate, context.sampleRate);
    // Fill the buffer with white noise;
    // just random values between -1.0 and 1.0
    for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
      // This gives us the actual array that contains the data
      var nowBuffering = myArrayBuffer.getChannelData(channel);
      for (var i = 0; i < myArrayBuffer.length; i++) {
        // audio needs to be in [-1.0; 1.0]
        nowBuffering[i] = Math.random() * 2 - 1;
      }
    }
    playAudio(myArrayBuffer)
}

function playAudio(buf){
    const streamNode = context.createMediaStreamDestination();
    const stream = streamNode.stream;
    const recorder = new MediaRecorder( stream );
    const chunks = [];
    recorder.ondataavailable = evt => chunks.push( evt.data );
    recorder.onstop = evt => exportAudio( new Blob( chunks ) );

    const source = context.createBufferSource()
    source.onended = () => recorder.stop();
    source.buffer = buf
    source.playbackRate.value = 0.2
    source.connect( streamNode );
    source.connect(context.destination);
    source.start(0)
    recorder.start();
}

function exportAudio( blob ) {
  const aud = new Audio( URL.createObjectURL( blob ) );
  aud.controls = true;
  document.body.prepend( aud );
}


</script>
</head>
<body onload="javascript:run()">
<input type="button" onclick="context.resume()" value="play"/>
</body>
</html>

Is this what you were looking for?

Danny Apostolov
  • 479
  • 3
  • 8