[Solved] Example of audio recording?

Questions
, ,
1

A friend (He’s a musician :musical_score: 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
javascript - HTML5 record audio to file - Stack Overflow

three.js docs (and enter audio in the filter)

https://threejs.org/examples/#webaudio_visualizer

Not to mention the musical cow: JSFiddle

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 :microphone: ?

2

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 or this: Capturing audio in HTML5. 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.

2 Likes
3

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
https://www2.ak.tu-berlin.de/~akgroup/ak_pub/abschlussarbeiten/2014/WernerErik_MasA.pdf
Beispielcode für den Mikrofonzugriff über HTML5 ) .

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

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 to my server. It’s working. Now I can include three.js.
It only results in WAV. Still looking for mp3.

4

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

It is based on 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 (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 );
	
}