CODEWITHSUNDEEP
web-audio-api
huevos de oro
huevos de oro

Reputation: 327

Audio recording with HTML5 Web Audio Api

Does anyone know if the Web Audio API provides the ability to save audio played using the WebAudioContext?

Upvotes: 2

Views: 6695

Answers (6)

Steve0
Steve0

Reputation: 23

Easiest way is to create a stream as

 var dest = audioCtx.createMediaStreamDestination();
 var options = {
 audioBitsPerSecond : 320000,
 sampleSize: 16,
 channelCount: 2,
 mimeType : 'audio/ogg'
     }
  var mediaRecorder = new       MediaRecorder(dest.stream, options);
  var chunks = [];
var isrecording = "Not Recording";

function rec(){


mediaRecorder.start();// start record
dataavailable = true;
isrecording = mediaRecorder.state;
}

you can can check out an example of my soundrec App here. Although its also a full on Multiband compressor and 5 band paragraphic here. Oh and if you check out my link . the most important thing to get your head around is the ondataavilable method. And Saving as a blob is a bit of ahead bash too. Ps if anyone wants to help me get this working on chrome sen me an Email. Thanx. It will only work in Firefox at the moment. MultiBand Compressor

Upvotes: 0

Positonic
Positonic

Reputation: 9411

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

Upvotes: 0

NVRM
NVRM

Reputation: 13162

This library work fine, web audio api only (meaning no i.e users): https://github.com/higuma/web-audio-recorder-js

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

Anyway like you said your sound is already in an audiocontext, so I think you are looking for how to use the AudioDestinationNode, the final node of the web audio api. As soon as you can playing your audio through a regular html audio player, you will gain the record function on right click, like playDataUri do. You need to add the attribute "controls" to the player, or you can make a special link with download attribute. I made a small enhancement of the Mdn script to send the data to an player, it 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 represents the end destination of an audio graph in a given context — usually the speakers of your device. It can also be the node that will "record" the audio data when used with an OfflineAudioContext.

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

Upvotes: 0

user7610
user7610

Reputation: 29009

There is a W3C specification for a recording API http://www.w3.org/TR/mediastream-recording/ , but as of now it is being implemented only in Firefox.

Client side there is available only the ScriptProcessorNode hack (which is what Record.js is based on).

Alternatively, for some use cases it might make sense to stream the audio to a server using WebRTC and write a server side recorder using Libjingle.

Upvotes: 0

Matt Diamond
Matt Diamond

Reputation: 11696

I actually wrote a small utility called RecorderJS that might help.

Upvotes: 16

Oskar Eriksson
Oskar Eriksson

Reputation: 2641

There is a startRendering function in Chrome at least (haven't checked Safari). I think it's undergoing some rework and thus isn't included in the spec, but might be added at a later stage (or not). If you want to check out the current implementation, have a look at the answer at Is there a way to use the Web Audio API to sample audio faster than real-time?

Upvotes: 0

Related Questions