Sunday, January 3, 2016

Real Time Visualization of Raw Sound from Microphone Input using HTML5

From ...

In order to use the webkitGetUserMedia method, your html code needs to be deployed on a server. That means, you can't just open the html in Google Chrome. This is unfortunate. However, you can deploy onto a server doing these three steps.

1. Install Tomcat 7 -
2. Go to the Task Manager, Services Tab, Services and start Tomcat
3. Open http://localhost:8080 in Chrome

You should see the index.jsp page that was installed with Tomcat. This would normally be in the "C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\ROOT" directory.

Create and html file named volume.html with the following contents:


<script type="text/javascript">

function canvasDrawLine(oPosX, oPosY, fPosX, fPosY) {
    var ctx = getCanvas().getContext('2d');
    ctx.moveTo(oPosX, oPosY);
    ctx.lineTo(fPosX, fPosY);

function canvasDrawSquare(ulPosX, ulPosY, lrPosX, lrPosY) {
    canvasDrawLine(ulPosX, ulPosY, ulPosX, lrPosY);
    canvasDrawLine(ulPosX, lrPosY, lrPosX, lrPosY);
    canvasDrawLine(lrPosX, lrPosY, lrPosX, ulPosY);
    canvasDrawLine(lrPosX, ulPosY, ulPosX, ulPosY);

function canvasInitialize(width, height) {
    // Set canvas parameters
    getCanvas().width = width;
    getCanvas().height = height;

    // Outline

function getAverageVolume(array) {
    var values = 0; 
    // get all the frequency amplitudes
    for (var i = 0; i < array.length; i++) {
        values += array[i];
    return values / (array.length);

function onSuccess(stream) {
    var context = new webkitAudioContext();
    var mediaStreamSource = context.createMediaStreamSource(stream);
    var analyser = context.createAnalyser();
    analyser.smoothingTimeConstant = 0.3;
    analyser.fftSize = 1024;
    var javascriptNode = context.createScriptProcessor(2048, 1, 1);
    javascriptNode.onaudioprocess = function(e) {
        //var sample = e.inputBuffer.getChannelData(0);

        // get the average, bincount is fftsize / 2
        var array =  new Uint8Array(analyser.frequencyBinCount);
        // calculate average
        var average = getAverageVolume(array)
        // print value out
        // draw green bar
        canvasDrawSquare(10, 150, 20, 150-average*5);
    // stream -> mediaSource -> analyser -> javascriptNode -> destination

function onError() {

function log(logVal) {
    getLog().innerHTML = logVal + '\n<br>';

function getCanvas() {
    return document.getElementById('mycanvas');
function getLog() {
    return document.getElementById('mylog');
function documentReady() {
    if(navigator.getUserMedia) {
        navigator.getUserMedia({video: false, audio: true}, onSuccess, onError);
    } else if(navigator.webkitGetUserMedia) {
        navigator.webkitGetUserMedia({video: false, audio: true}, onSuccess, onError);

<body onload="documentReady();">
   <canvas id="mycanvas"></canvas>
   <div id="mylog"></div>

Without stopping Tomcat, copy this file into the ROOT directory, specified above and open the http://localhost:8080/volume.html in Google Chrome. You should see a message that allows you to access the Microphone. Then you should see a green box along with changing numbers that indicate the volume.

This post was reposted from, originally written on June 23rd, 2014.

No comments:

Post a Comment