2

Lets say I created a program that plays one sound after another. Is it possible, without the use of 3rd party libraries, to somehow export the sound as wav or mp3?

I am trying to build a little sequencer, but before I do, I need to know if this is possible.

I already did my research and found many 3rd party libraries, the most famous seems to be recorder.js. For the sake of learning, I prefer to use the pure api.

Asperger
  • 3,214
  • 5
  • 33
  • 82

3 Answers3

3

You could use the MediaRecorder API, which, unfortunately, is not widely supported yet.., but which doesn't need any external library.

// creates a simple oscillator, connected to a mediaStream
var ctx = new AudioContext();
var stream = ctx.createMediaStreamDestination();

var osc = ctx.createOscillator();
osc.connect(stream);
osc.type = 'square';
osc.frequency.value = 200;
osc.start();

// pass the stream of our stream destination Node
var rec = new MediaRecorder(stream.stream);
// once it's finished recording
rec.ondataavailable = function(e) {
  var audioURL = window.URL.createObjectURL(e.data);
  audio.src = audioURL;
  audio.play();
};
// start the recorder
rec.start()

btn.onclick = function(){rec.stop();};
<button id="btn"> stop the recording </button>
<audio id="audio" controls></audio>
Kaiido
  • 87,051
  • 7
  • 143
  • 194
  • Since chrome currently only does support video recording, this example will only work in latest FF. – Kaiido Jan 01 '16 at 08:41
  • Super interesting! Though, as you said, support is an issue, and the spec seems to be only a few months old(?) and in an early editors draft, so seems likely that it'll change before being implemented in other browsers.. – Oskar Eriksson Jan 01 '16 at 09:07
  • Yes, it is quite new, and subject to change, but really promising and does exactly what you want :-) But for today, stick with libraries. – Kaiido Jan 01 '16 at 09:09
2

Yes, it's possible. Not natively in the API as such though, you'll have to encode the file yourself based on the data you pull out of Web Audio.

So, basically, you'll have to implement your own version of recorder.js if you don't want to use external dependencies. The best way to figure out how is probably to look at the recorder.js source. It's quite legible!

Oskar Eriksson
  • 2,423
  • 14
  • 29
0

Well these can be done with HTML 5 user media api's. Here is a intro from Eric Bidelman.

Since this question isn't about a specific problem in your code, its too broad to answer. So I am including links to some projects on github that I think are simple to understand and use standard API's instead of flash. Should point you in the right direction.

  1. julianburr/js-audiorecorder
  2. minervaproject/user-media-recorder
blessenm
  • 30,091
  • 13
  • 63
  • 75
  • It says I can only reward it in 22 hours : ( – Asperger Jan 01 '16 at 07:39
  • Well you may get better answers. :) Lets see. – blessenm Jan 01 '16 at 07:41
  • 2
    Unfortunately this answer is incorrect. getUserMedia is only used to get access to the user mic and camera, not generating output files. Both the examples uses getUserMedia in this way, but then encodes the files in handwritten JavaScript - no native API's. – Oskar Eriksson Jan 01 '16 at 09:04
  • Well its still JavaScript right. From what I understand recorder.js uses flash so I just try to suggest something without flash. I've only glanced through the source so I can be mistaken. – blessenm Jan 01 '16 at 09:10
  • Yeah, that's a mistake. :) recorder.js doesn't use Flash, it's pure JavaScript. (For clarity, this is the recorder.js in question: https://github.com/mattdiamond/Recorderjs/blob/master/src/recorder.js) – Oskar Eriksson Jan 01 '16 at 09:18
  • Looking through the code in your examples, it looks like they're adaptations or rewrites of recorder.js (the first one outright uses the .wav worker from recorder), which is probably what the OP should do as well. – Oskar Eriksson Jan 01 '16 at 09:28
  • 1
    @blessenm here, I forgot your bounty : ) – Asperger Jan 05 '16 at 08:45