# \[Solved\] Example of audio recording?

**URL:** <https://discourse.threejs.org/t/solved-example-of-audio-recording/3386>\
**Category:** Questions\
**Tags:** audio-recording, web-audio, audio\
**Created:** [July 9, 2018, 7:31pm UTC](https://discourse.threejs.org/t/solved-example-of-audio-recording/3386 "2018-07-09T19:31:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [July 9, 2018, 7:31pm UTC](https://discourse.threejs.org/t/solved-example-of-audio-recording/3386/1 "2018-07-09T19:31:13Z")

</div>

A friend (He’s a musician 🎼 and he can program a little.) who saw my three.js examples asked me if I could also include a music recording with the microphone.  
Since I’m not musical, I never looked afterwards.

I looked and found this:

[Web Audio API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)  
[javascript - HTML5 record audio to file - Stack Overflow](https://stackoverflow.com/questions/16413063/html5-record-audio-to-file)

[three.js docs](https://threejs.org/docs/) _(and enter audio in the filter)_

[https://threejs.org/examples/#webaudio\_visualizer](https://threejs.org/examples/#webaudio_visualizer)

Not to mention the musical cow: [JSFiddle](https://jsfiddle.net/prisoner849/z7bn61jg/show)

But I don’t see an easy way to record music in three.js. Or do I just not find it?

Is there a basic example (three.js based) for recording audio data from the _🎤_ ?

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [July 9, 2018, 8:47pm UTC](https://discourse.threejs.org/t/solved-example-of-audio-recording/3386/2 "2018-07-09T20:47:10Z")

</div>

I believe you’re confusing the capabilities of Three.JS. It’s a 3D graphics library, it does not grant you access to the microphone, nor does it record audio.

I believe what you’re looking for is this: [Recording Audio from the User](https://developers.google.com/web/fundamentals/media/recording-audio/) or this: [Capturing audio in HTML5](https://www.html5rocks.com/en/tutorials/getusermedia/intro/). These tutorials use the Web Audio API, not WebGL or Three.JS. Once you get access to the microphone’s input, and its corresponding waveform, _then_ you can bring in Three.JS to make animations with it.

Keep in mind that getting microphone access has security and privacy implications, and browsers will not grant access without permission from the user. This might affect many users’ experiences if they don’t consent or if they don’t have a microphone.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [July 10, 2018, 7:04am UTC](https://discourse.threejs.org/t/solved-example-of-audio-recording/3386/3 "2018-07-10T07:04:48Z")

</div>

Thank you for the advice.

After the search it was already clear to me that three.js does not support the microphone access in the core. Beside the given links I had found some more  
(some in German only [Musik und Javascript = Aufnehmen, Frequenzanalyse, Visualisierung, WAV, MP3 | Thomas Eses](http://thomas.eses.name/musik-und-javascript/)  
[https://www2.ak.tu-berlin.de/~akgroup/ak\_pub/abschlussarbeiten/2014/WernerErik\_MasA.pdf](https://www2.ak.tu-berlin.de/~akgroup/ak_pub/abschlussarbeiten/2014/WernerErik_MasA.pdf)  
[Beispielcode für den Mikrofonzugriff über HTML5](https://www.standardabweichung.de/code/javascript/html5-microphone-access) ) .

However, not the two very good ones from the answer. Thanks for that. 😃

I was just hoping that someone had already taken this path: access the microphone and then bring in three.js. (with a basic example)

My friend wants to use this in a local network only. He’s also a music teacher.

* * *

**Addendum**  
I was able to upload the example [http://webaudiodemos.appspot.com/AudioRecorder/index.html](http://webaudiodemos.appspot.com/AudioRecorder/index.html) to my server. It’s working. Now I can include three.js.  
It only results in WAV. Still looking for mp3.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [July 15, 2018, 7:39pm UTC](https://discourse.threejs.org/t/solved-example-of-audio-recording/3386/4 "2018-07-15T19:39:18Z")

</div>

Since I could not find an example, I created a basic example myself.

It is based on [http://webaudiodemos.appspot.com/AudioRecorder/index.html](http://webaudiodemos.appspot.com/AudioRecorder/index.html) and inserts three.js code.

The simple code is inserted in the **updateAnalysers(time)** function. The microphone input is only converted into a rotation.

The example works with Firefox. It even goes local.

Try it out.  
[03\_audio.zip](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/16236d2ea4e0d27af91852a6b38f0b83e2946f4d.zip) (234.4 KB)

```
function updateAnalysers(time) {

    // analyzer 3D code here
    {
        out.innerHTML = "frequencyBinCount " + analyserNode.frequencyBinCount + " </br> ";
		
	var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);
				
        analyserNode.getByteFrequencyData(freqByteData); 
		
        var magnitude = 0;
		 
        for (var j = 0; j < analyserNode.frequencyBinCount; j++) {
		
			magnitude += freqByteData[j];
			out.innerHTML = out.innerHTML + freqByteData[j] + ", ";
		}
	
	if( magnitude > 128 ) {
		
			mesh1.rotation.y += magnitude / 128;
			//mesh1.rotation.z = magnitude / 128;
	}
		
	renderer.render( scene, camera );
		
	controls.update();   		
				
    }
	
    rafID = requestAnimationFrame( updateAnalysers );
	
}
```