How to use HTML5 Web Audio API to record my voice

html three.js html5-audio tquery
Saurabh picture Saurabh · Mar 9, 2013 · Viewed 6.9k times · Source

I'm looking for a way to record my voice and - according to the recorded voice - move an animation towards left or right.

I heard HTML5 has an Audio API through which you can record your voice, but I have no idea how to do that.

I will be thankful to everyone who can help me or come up with some solutions, suggestions, code or guidelines to resolve this issue.

Answer

kr1 picture kr1 · Mar 9, 2013

on webkit-browsers you can use the get user media api with webkitGetUserMedia - like demonstrated on html5rocks.
if you want to use your voice to create javascript events (e.g. to control objects on the screen) you would have to analyze the incoming sound (e.g. high frequency for event1 - low frequency for event2, speech analysis is much more complicated, see below)

alternatively, there is chrome's 'x-webkit-speech' speech recognition, (see an example here), which will analyze speech on google's servers and is therefore probably too slow for real-time control.

I don't know of any real-time speech analysis in the browser, but would be happy to find a (even very basic) possibility.

edit: adds some code (adapted from here)

<html>
  <head>
  </head
  <body>
    <input type="search" id="mike" x-webkit-speech>
    <script type="text/javascript">
      var mike = document.getElementById('mike');
      mike.onwebkitspeechchange = function(e) {
        console.log(e); // SpeechInputEvent
        console.log(e.results[0].utterance);
      };
    </script>
  </body>
</html>

Related questions

Changing three.js background to transparent or other color

I've been trying to change what seems to be the default background color of my canvas from black to transparent / any other color - but no luck. My HTML: <canvas id="canvasColor"> My CSS: <style type="text/…

Read More
How to stop a requestAnimationFrame recursion/loop?

I'm using Three.js with the WebGL renderer to make a game which fullscreens when a play link is clicked. For animation, I use requestAnimationFrame. I initiate it like this: self.animate = function() { self.camera.lookAt(self.scene.position); self.…

Read More
Dynamically create 2D text in three.js

I have 3D model which I have created in three.js. Based on some data, I want to create a set of arrows which is decorated by a small text label. These labels should be in 2D. It seems like …

Read More