Skip to content

Instantly share code, notes, and snippets.

@mr21

mr21/analyserNode.html

Last active January 20, 2017 19:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mr21/0b51792dc0b97a5c070725f746560ba0 to your computer and use it in GitHub Desktop.
Save mr21/0b51792dc0b97a5c070725f746560ba0 to your computer and use it in GitHub Desktop.
Download ZIP
http://crbug.com/683188; http://thomastortorini.free.fr/bug-analysernode; A different behaviour between Chrome and Firefox :/
Raw
analyserNode.html
<!DOCTYPE html>
<html>
<head>
<title>bug-analyserNode</title>
<meta charset="UTF-8"/>
</head>
<body>
<canvas width="512" height="128" id="gsuiOscilloscope"></canvas>
<script src="gsuiOscilloscope.js"></script>
<script>
var analyserData,
ctx = new AudioContext(),
analyserNode = ctx.createAnalyser(),
gainNode = ctx.createGain(),
elOsc = document.querySelector( "#gsuiOscilloscope" ),
elOscRect = elOsc.getBoundingClientRect(),
uiOsc = new gsuiOscilloscope( elOsc );
gainNode.connect( ctx.destination );
analyserNode.connect( gainNode );
gainNode.gain.value = 1;
analyserNode.fftSize = 256;
analyserData = new Uint8Array( analyserNode.frequencyBinCount );
uiOsc.setResolution( elOscRect.width, elOscRect.height );
uiOsc.setPinch( 1 );
uiOsc.dataFunction( function() {
analyserNode.getByteTimeDomainData( analyserData );
return analyserData;
} );
// We overload the draw with :
uiOsc.drawBegin( function( ctx, max, w, h ) {
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = "rgba(0,0,0,.6)";
ctx.fillRect( 0, 0, w, h );
ctx.globalCompositeOperation = "source-over";
} );
uiOsc.drawEnd( function( ctx, max ) {
ctx.strokeStyle = "#52666e";
ctx.lineJoin = "round";
ctx.lineWidth = 2;
} );
fetch( "a.wav" ).then( function( res ) {
res.arrayBuffer().then( function( audioData ) {
return ctx.decodeAudioData( audioData );
} ).then( function( audioBuffer ) {
var bSource, i = 0;
uiOsc.startAnimation();
for ( ; i < 3600; ++i ) {
bSource = ctx.createBufferSource();
bSource.buffer = audioBuffer;
bSource.connect( analyserNode );
bSource.start( ctx.currentTime + i, 0, .4 );
}
} );
} );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment