Initial commit for working with arbitrary audio element

jsantell · Aug 1, 2012 · 8e93c58 · 8e93c58
1 parent f137428
commit 8e93c58
Show file tree

Hide file tree

Showing 16 changed files with 521 additions and 51 deletions.
diff --git a/examples/audio_element/css/League_Gothic-webfont.eot b/examples/audio_element/css/League_Gothic-webfont.eot
diff --git a/examples/audio_element/css/League_Gothic-webfont.svg b/examples/audio_element/css/League_Gothic-webfont.svg
diff --git a/examples/audio_element/css/League_Gothic-webfont.ttf b/examples/audio_element/css/League_Gothic-webfont.ttf
diff --git a/examples/audio_element/css/League_Gothic-webfont.woff b/examples/audio_element/css/League_Gothic-webfont.woff
diff --git a/examples/audio_element/css/dancer.css b/examples/audio_element/css/dancer.css
@@ -0,0 +1,119 @@
+@font-face {
+    font-family: 'League Gothic';
+    src: url('League_Gothic-webfont.eot');
+    src: url('League_Gothic-webfont.eot?') format('embedded-opentype'),
+    url('League_Gothic-webfont.woff') format('woff'),
+    url('League_Gothic-webfont.ttf') format('opentype');
+    font-weight: bold;
+    font-style: normal;
+}
+body {
+    background-color: #000;
+    margin: 0;
+    padding: 0;
+    font-family: Arial;
+}
+#info {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 52px;
+    background-color: #111;
+    color: #ccc;
+    font-family: 'League Gothic', arial, sans-serif;
+}
+#info h1 {
+    margin: 0 0 0 20px;
+    float: left;
+    font-size: 40px;
+    color: #ff0077;
+}
+#info h2 {
+    margin: 14px 0 0 5px;
+    float: left;
+    font-size: 25px;
+}
+
+#info h3 {
+    margin: 19px 0 0 15px;
+    float: left;
+    font-size: 20px;
+}
+
+#info ul {
+    float:right;
+    display-icon-type:none;
+}
+
+#info li {
+    display:block;
+    float:left;
+    margin-right: 15px;
+}
+
+#info li a {
+    color: #ff0077;
+    margin-left: 5px;
+}
+
+#loading {
+    font-size: 60px;
+    color: #fff;
+    width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 100px;
+    background-color: #111;
+    padding: 10px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    opacity: 0.9;
+    border: 1px solid #ccc;
+    text-align: center;
+}
+
+#loading a {
+    color: #fff;
+    text-shadow: 0 0 10px #fff;
+    text-decoration: none;
+}
+
+#loading p{
+    color: #fff;
+    font-size: 18px;
+}
+
+#waveform { 
+    display: block;
+    margin: 100px auto;
+}
+
+#stats {
+    margin: 0 0 0 10px;
+    float: left;
+}
+
+#songinfo {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: #111;
+}
+
+#songinfo span, #songinfo h3 {
+    color: #ccc;
+    font-size: 12px;
+    margin: 5px 30px 5px 30px;
+    padding: 0;
+}
+
+#songinfo a {
+    color: #ff0077;
+}
+
+audio {
+    width: 400px;
+    display: block;
+    margin: 100px auto;
+}
diff --git a/examples/audio_element/images/particle_blue.png b/examples/audio_element/images/particle_blue.png
diff --git a/examples/audio_element/images/particle_green.png b/examples/audio_element/images/particle_green.png
diff --git a/examples/audio_element/images/particle_orange.png b/examples/audio_element/images/particle_orange.png
diff --git a/examples/audio_element/images/particle_pink.png b/examples/audio_element/images/particle_pink.png
diff --git a/examples/audio_element/images/particle_white.png b/examples/audio_element/images/particle_white.png
diff --git a/examples/audio_element/images/particle_yellow.png b/examples/audio_element/images/particle_yellow.png
diff --git a/examples/audio_element/index.html b/examples/audio_element/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link href='http://fonts.googleapis.com/css?family=Duru+Sans' rel='stylesheet' type='text/css'>
+		<link href='css/dancer.css' rel='stylesheet' type='text/css'>
+	</head>
+	<body>
+		<div id="info">
+			<h1>dancer.js</h1>
+			<h2>JavaScript Audio Library</h2>
+			<h3>Simple Waveform</h3>
+			<ul>
+				<li><a href="https://github.com/jsantell/dancer.js" title="dancer.js on github">view API/source</a></li>
+				<li>by <a href="http://jsantell.com" title="Jordan Santell">jordan santell</a></li>
+			</ul>
+		</div>
+		<audio id="audio" controls="controls">
+			<source src="../songs/Fire Hive (Krewella fuck on me remix).ogg" type="audio/ogg" />
+			<source src="../songs/Fire Hive (Krewella fuck on me remix).mp3" type="audio/mpeg" />
+		</audio>
+		<div id="loading">Loading . . .</div>
+		<canvas id="waveform" height="600" width="1024"></canvas>
+		<div id="songinfo">
+			<span>Now playing...</span>
+			<h3><a href="http://zirconstudios.bandcamp.com/album/unearthed" title="Zircon Studios Bandcamp">Zircon - Devil's Spirit</a></h3>
+		</div>
+		<!-- Dancer.js -->
+		<script src="../../src/dancer.js"></script>
+		<script src="../../src/support.js"></script>
+		<script src="../../src/beat.js"></script>
+		<script src="../../src/adapterWebkit.js"></script>
+		<script src="../../src/adapterMoz.js"></script>
+		<script src="../../src/adapterFlash.js"></script>
+		<script src="../../lib/fft.js"></script>
+		<script src="../../lib/flash_detect.js"></script>
+		<script src="../../plugins/dancer.fft.js"></script>
+		<script src="../../plugins/dancer.waveform.js"></script>
+
+		<!-- Demo stuff -->
+		<script src="js/player.js"></script>
+	</body>
+</html>
diff --git a/examples/audio_element/js/player.js b/examples/audio_element/js/player.js
@@ -0,0 +1,65 @@
+(function () {
+
+  var
+    audio = document.getElementById( 'audio' ),
+    waveform = document.getElementById( 'waveform' ),
+    ctx = waveform.getContext( '2d' ),
+    dancer, beat;
+
+  /*
+   * Dancer.js magic
+   */
+  Dancer.setOptions({
+    flashSWF : '../../lib/soundmanager2.swf',
+    flashJS  : '../../lib/soundmanager2.js'
+  });
+
+  dancer = new Dancer();
+  beat = dancer.createBeat({
+    onBeat: function () {
+      ctx.strokeStyle = '#ff0077';
+    },
+    offBeat: function () {
+      ctx.strokeStyle = '#666';
+    }
+  }).on();
+
+  dancer
+    .load( audio )
+    .waveform( waveform, { strokeStyle: '#666', strokeWidth: 2 });
+
+  Dancer.isSupported() || loaded();
+  !dancer.isLoaded() ? dancer.bind( 'loaded', loaded ) : loaded();
+
+  /*
+   * Loading
+   */
+
+  function loaded () {
+    var
+      loading = document.getElementById( 'loading' ),
+      anchor  = document.createElement('A'),
+      supported = Dancer.isSupported(),
+      p;
+
+    anchor.appendChild( document.createTextNode( supported ? 'Play!' : 'Close' ) );
+    anchor.setAttribute( 'href', '#' );
+    loading.innerHTML = '';
+    loading.appendChild( anchor );
+
+    if ( !supported ) {
+      p = document.createElement('P');
+      p.appendChild( document.createTextNode( 'Your browser does not currently support either Web Audio API or Audio Data API. The audio may play, but the visualizers will not move to the music; check out the latest Chrome or Firefox browsers!' ) );
+      loading.appendChild( p );
+    }
+
+    anchor.addEventListener( 'click', function () {
+      dancer.play();
+      document.getElementById('loading').style.display = 'none';
+    });
+  }
+
+  // For debugging
+  window.dancer = dancer;
+
+})();
diff --git a/src/adapterMoz.js b/src/adapterMoz.js
@@ -7,18 +7,23 @@
 
   adapter.prototype = {
 
-    load : function ( path ) {
+    load : function ( _source ) {
       var _this = this;
-      this.audio.src = path;
-      this.audio.addEventListener( 'loadedmetadata', function( e ) {
-        _this.fbLength = _this.audio.mozFrameBufferLength;
-        _this.channels = _this.audio.mozChannels;
-        _this.rate     = _this.audio.mozSampleRate;
-        _this.fft      = new FFT( _this.fbLength / _this.channels, _this.rate );
-        _this.signal   = new Float32Array( _this.fbLength / _this.channels );
-        _this.isLoaded = true;
-        _this.dancer.trigger( 'loaded' );
-      }, false);
+      // Check if source is a path or an audio element
+      if ( _source instanceof HTMLElement ) {
+        this.audio = _source;
+      } else {
+        this.audio.src = _source;
+      }
+
+      if ( this.audio.readyState < 3 ) {
+        this.audio.addEventListener( 'loadedmetadata', function () {
+          getMetadata.call( _this );
+        }, false);
+      } else {
+        getMetadata.call( _this );
+      }
+
       this.audio.addEventListener( 'MozAudioAvailable', function( e ) {
         _this.update( e );
       }, false);
@@ -58,6 +63,16 @@
     }
   };
 
+  function getMetadata () {
+    this.fbLength = this.audio.mozFrameBufferLength;
+    this.channels = this.audio.mozChannels;
+    this.rate     = this.audio.mozSampleRate;
+    this.fft      = new FFT( this.fbLength / this.channels, this.rate );
+    this.signal   = new Float32Array( this.fbLength / this.channels );
+    this.isLoaded = true;
+    this.dancer.trigger( 'loaded' );
+  }
+
   Dancer.adapters.moz = adapter;
 
 })();
diff --git a/src/adapterWebkit.js b/src/adapterWebkit.js
@@ -8,56 +8,45 @@
     this.context = window.AudioContext ?
       new window.AudioContext() :
       new window.webkitAudioContext();
-    this.isLoaded       = false;
-    this.isPlaying      = false;
-    this.isDisconnected = false;
+    this.audio = new Audio();
+    this.isLoaded = this.isPlaying = this.isDisconnected = false;
   };
 
   function connectContext () {
-    this.source = this.context.createBufferSource();
-    this.source.buffer = this.buffer;
-    this.source.connect( this.context.destination );
+    this.source = this.context.createMediaElementSource( this.audio );
     this.source.connect( this.proc );
     this.source.connect( this.context.destination );
+    this.proc.connect( this.context.destination );
   }
 
   adapter.prototype = {
 
-    load : function ( path ) {
-      var
-        req = new XMLHttpRequest(),
-        _this = this;
-
-      req.open( 'GET', path, true );
-      req.responseType = 'arraybuffer';
-
-      req.onload = function () {
-        if ( _this.context.decodeAudioData ) {
-          _this.context.decodeAudioData( req.response, function( buffer ) {
-            _this.buffer = buffer;
-            connectContext.call( _this );
-            _this.isLoaded = true;
-            _this.dancer.trigger( 'loaded' );
-          }, function( e ) {
-            console.log( e );
-          });
-        } else {
-          _this.buffer = _this.context.createBuffer( req.response, false );
-          connectContext.call( _this );
-          _this.isLoaded = true;
-          _this.dancer.trigger( 'loaded' );
-        }
-      };
-      req.send();
-
+    load : function ( _source ) {
+      var _this = this;
+      if ( _source instanceof HTMLElement ) {
+        this.audio = _source;
+      } else {
+        this.audio = new Audio();
+        this.audio.src = _source;
+      }
       this.proc = this.context.createJavaScriptNode( SAMPLE_SIZE / 2, 1, 1 );
       this.proc.onaudioprocess = function ( e ) {
         _this.update.call( _this, e );
       };
-      this.proc.connect( this.context.destination );
 
       this.fft = new FFT( SAMPLE_SIZE / 2, SAMPLE_RATE );
       this.signal = new Float32Array( SAMPLE_SIZE / 2 );
+      if ( this.audio.readyState < 3 ) {
+        this.audio.addEventListener( 'canplay', function () {
+          connectContext.call( _this );
+          _this.isLoaded = true;
+          _this.dancer.trigger( 'loaded' );
+        });
+      } else {
+        connectContext.call( _this );
+        this.isLoaded = true;
+        this.dancer.trigger( 'loaded' );
+      }
     },
 
     play : function () {
@@ -69,15 +58,14 @@
         if ( _this.isDisconnected ) {
           connectContext.call( _this );
         }
-        _this.source.noteOn( 0.0 );
+        _this.audio.play();
         _this.startTime = _this.context.currentTime;
         _this.isPlaying = true;
       }
     },
 
     stop : function () {
       if ( this.isPlaying ) {
-        this.source.noteOff( 0.0 );
         this.isDisconnected = true;
         this.endTime = this.getTime();
       }
@@ -110,7 +98,7 @@
       for ( i = channels; i--; ) {
         buffers.push( e.inputBuffer.getChannelData( i ) );
       }
-
+      console.log(buffers[0][0]);
       for ( i = 0; i < resolution; i++ ) {
         this.signal[ i ] = channels > 1 ?
           buffers.reduce(function ( prev, curr ) {