Geek Answers Handbook

Record Audio Using HTML5 Web Audio Api

Does anyone know if the Web Audio API supports the ability to save sound played using WebAudioContext?

+2
source share
5 answers

In fact, I wrote a small RecorderJS utility that can help.

+15
source

Chrome has a startRendering function (not verified by Safari). I think that it is undergoing some refinement and, therefore, is not included in the specification, but can be added at a later stage (or not). If you want to check the current implementation, take a look at the answer to Is there a way to use the web audio API to try sound faster than in real time?

0
source

There is a W3C specification for the recording API http://www.w3.org/TR/mediastream-recording/ , but at the moment it is only implemented in Firefox.

The client side is available only for the ScriptProcessorNode script (on which the Record.js record is based).

Alternatively, for some use cases, it may make sense to transfer audio to the server using WebRTC and record the server recorder using Libjingle.

0
source

This library works fine, only web audio api (which means there are no users ie): https://github.com/higuma/web-audio-recorder-js

But we can use it with honor now: http://caniuse.com/#feat=audio-api

In any case, as you said, your sound is already in the audio context, so I think you're looking for how to use the AudioDestinationNode, the last node of the web audio api. As soon as you can play audio through a regular html audio player, you will get the recording function with the right mouse button, for example, playDataUri. You need to add the “controls” attribute to the player, or you can create a special link with the download attribute. I made a small improvement to the Mdn script to send data to the player, this should give you a good idea:

  var audioCtx = new AudioContext(); var source = audioCtx.createMediaElementSource(myMediaElement); myMediaElement = document.createElement("audio"); myMediaElement.setAttribute("autoplay", true); myMediaElement.setAttribute("src", uri); myMediaElement.setAttribute("controls", "controls"); document.getElementById('player').appendChild(myMediaElement); source.connect(audioCtx.destination);
>

The AudioDestinationNode interface is the final destination of audiographs in a specific context - usually the speakers of your device. There may also be a node that will “record” audio data when used with stand-alone offline content.

https://developer.mozilla.org/en-US/docs/Web/API/AudioDestinationNode

0
source

Now it is available in the latest browsers, its called media recorder you can find more information here

0
source

More articles:


All Articles