Minor change in source code. See the hilighted lines.
<!doctype html> <head> <meta charset="utf-8" /> <title>Wavefile Read 3</title> <script src="Three.js"></script> <script src="flotr2.min.js"></script> <link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'> <style type="text/css"> div#canvas-frame{ border: none; cursor: pointer; width: 610px; height: 300px; background-color: #eeffee; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; } div#canvas-frame2{ border: none; cursor: pointer; width: 300px; height: 300px; background-color: #eeeeff; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; } div#canvas-frame3{ border: none; cursor: pointer; width: 300px; height: 300px; background-color: #f5deb3; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; } div#mymessage { margin-top: 5px; background-color: #ffffff; margin-bottom: 5px; } div#mymessage2 { margin-top: 5px; width: 190px; background-color: #ffffff; margin-bottom: 5px; } div#slider { margin-top: 5px; margin-bottom: 5px; margin-left: 0px; margin-right: 5px; width: 190px; padding: 5px 5px 5px 5px; border-color: #cccccc; border-width: 1px; border-style: solid; background-color: #ffffff; } body { font-family: 'Righteous', cursive; } </style> <script> var t, tb4= -1.0, istep = 0, ijump = 6; var fsample=11025.0, nch=1; var dt = 1.0/fsample; var dsize = 700; var nbin = 100; var index; var start_time, elapsed_time, elapsed_timeb4 = -1.0; function loop2() { var d1 = []; var d2 = []; var d3 = []; var d4 = []; var i; if(t != tb4) { index = Math.floor( t * (fsample*nch) ); tb4 = t; for(i=0;i<nbin;i++) { bin[i] = 0; } } if( istep++ % ijump == 0) { elapsed_time = new Date().getTime(); document.getElementById("mymessage2").innerHTML = "Frame per second = " + (1000.0 / (elapsed_time - elapsed_timeb4)).toFixed(1); elapsed_timeb4 = elapsed_time; for(i=0;i<dsize;i++) { d1.push([i, arr[index ]/32768.0]); d2.push([i, arr[index+1]/32768.0]); d3.push([ arr[index ]/32768.0, arr[index+1]/32768.0]); ibin = Math.floor( (nbin/2)*(arr[index]/32768.0+1.0) ); bin[ibin]++; index+=nch; } for(i=0;i<nbin;i++) { d4.push([-1.0+2.0*(i/nbin), bin[i]]); } basic_legend (document.getElementById("canvas-frame" ), d1, d2); basic_legend2(document.getElementById("canvas-frame2"), d3); basic_legend3(document.getElementById("canvas-frame3"), d4); } window.requestAnimationFrame(loop2); } function basic_legend(container, d1, d2) { var data, graph, i; data = [ { data : d1, label :'Ch Left' }, { data : d2, label :'Ch Right' } ]; function labelFn (label) { return label; } graph = Flotr.draw(container, data, { legend : { position : 'nw', labelFormatter : labelFn, backgroundColor : '#ffffcc' }, yaxis : { max : 1.1, min : -1.1 }, HtmlText : false }); } function basic_legend2(container, d3) { var data, graph, i; data = [ { data : d3, label :'Lissajous' } ]; function labelFn (label) { return label; } graph = Flotr.draw(container, data, { legend : { position : 'nw', labelFormatter : labelFn, backgroundColor : '#ffffcc' }, colors : [ '#ffa500' ], xaxis : { max : 1.1, min : -1.1 }, yaxis : { max : 1.1, min : -1.1 }, HtmlText : false }); } function basic_legend3(container, d4) { var data, graph, i; data = [ { data : d4, label :'Histogram' } ]; function labelFn (label) { return label; } graph = Flotr.draw(container, data, { legend : { position : 'nw', labelFormatter : labelFn, backgroundColor : '#ffffcc' }, colors : [ '#8a2be2' ], xaxis : { max : 1.1, min : -1.1 }, yaxis : { max : 420, min : -20 }, HtmlText : false }); } </script> <script> function audioPlay() { var files = document.getElementById('files').files; var file = files[0]; if (!files.length) { alert('Please select a wave file!'); return; } if (file.type.match(/audio.*/)) { var reader2 = new FileReader(); reader2.onload = function(d) { e = document.createElement("audio"); e.src = d.target.result; e.setAttribute("type", file.type); e.setAttribute("controls", "controls"); e.setAttribute("autoplay", "true"); document.getElementById("container").appendChild(e); e.addEventListener("timeupdate", function() { t=e.currentTime; }, false); }; reader2.readAsDataURL(file); } } function readBlob() { var files = document.getElementById('files').files; if (!files.length) { alert('Please select a wave file!'); return; } var file = files[0]; var header_length = 44; // wave file var start = 0; // do not skip header var stop = file.size - 1; // read until EOF var nbyte = file.size - header_length; var ndata = nbyte / 2; // 2 byte per data for 16-bit PCM var reader = new FileReader(); reader.onloadend = function(evt) { if (evt.target.readyState == FileReader.DONE) { // DONE == 2 var buffer = reader.result; arr = new Int16Array(buffer, 44); // skip wave header arr2 = new Uint8Array(buffer, 8, 4); // "WAVE" arr3 = new Int16Array(buffer, 22, 1); // nch arr4 = new Int32Array(buffer, 24, 1); // fsample arrmax = 0; arrmin = 0; arrmax_pos = 0; arrmin_pos = 0; arr_pos = 0; start_time = new Date().getTime(); bin = new Array(); var i; for(i=0;i<nbin;i++) { bin[i] = 0; } var istart = header_length/2; // skip header for(i=istart;i<ndata;i++) { if(arr[i] > arrmax) { arrmax = arr[i]; arrmax_pos = i; } if(arr[i] < arrmin) { arrmin = arr[i]; arrmin_pos = i; } } if( arrmax > Math.abs(arrmin) ) { arr_pos = arrmax_pos; } else { arr_pos = arrmin_pos; } index = 0; t = index / (fsample*nch); var myString = ""; for(var i=0;i<arr2.byteLength; i++) { myString += String.fromCharCode(arr2[i]); } if( myString.match(/WAVE/) ) { nch = arr3[0]; fsample = arr4[0]; document.getElementById('mymessage').innerHTML = "WAVE file: fsample = " + fsample + ", nch = " + nch; } else { document.getElementById('mymessage').innerHTML = "not a WAVE file. "; } loop2(); } }; var blob = file.slice(start, stop + 1); reader.readAsArrayBuffer(blob); } function upRate() { ijump--; if(ijump < 1) ijump = 1; } function downRate() { ijump++; if(ijump > 10) ijump = 10; } </script> </head> <body> <div id="canvas-frame" style="float:left"></div> <div id="canvas-frame2" style="float:left"></div> <div id="canvas-frame3" style="float:left"></div> <div style="clear:both"><h1>Wavefile Read</h1></dvi> <input type="file" id="files" style="width:400px;" multiple/> <div id="mymessage"></div> <div id="slider">FPS slider <input id="range01" type="range" min="1" max="10" step="1" onchange="showValue()"/> <div id="mymessage2"></div> </div> <div id="container"></div> <script type="text/javascript"> function showValue () { ijump = document.getElementById("range01").value; } </script> <script> document.getElementById("files").addEventListener("change", readBlob, false); document.getElementById("files").addEventListener("change", audioPlay, false); </script> </body> </html>