Update demo

example/index.html

@@ -1,8 +1,54 @@
-<audio controls>
-  <source src='ihaveadream.mp3' type='audio/mpeg'/>
-</audio>
+<style>
+  body { font-family: 'helvetica' }
+  #intro {
+    color: #555;
+    margin-bottom: 20px;
+  }
+  .pane {
+    width: 320px;
+    float: left;
+    overflow: hidden;
+    margin-right: 20px;
+  }
+  .pane .wrap {
+    position: relative;
+  }
+  .pane .wrap audio {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+  .notification {
+    text-align: center;
+    padding: 5px;
+  }
+  .notification::before {
+    content: "● ";
+    color: red;
+    text-shadow: 0px 0px 3px rgba(255,0,0,0.5);
+  }
 
-<video width=320></video>
-<div id='mlkSpeaking' style='display:none'>Mlk is Speaking</div>
-<div id='userSpeaking' style='display:none'>You are Speaking</div>
+</style>
+
+<div id='intro'>
+  <h1>A basic demo of <a href='http://github.com/latentflip/hark'>hark.</a></h1>
+
+  <h2>Either speak into your microphone, or play the audio clip</h2>
+  Requires Chrome 27+. By <a href='http://twitter.com/philip_roberts'>@Philip_Roberts</a>.
+</div>
+
+<div class='pane'>
+  <div class='wrap'>
+    <img src='mlk.png'>
+    <audio controls>
+      <source src='ihaveadream.mp3' type='audio/mpeg'/>
+    </audio>
+  </div>
+  <div id='mlkSpeaking' class='notification' style='display:none'>Mlk is Speaking</div>
+</div>
+
+<div class='pane'>
+  <video width=320></video>
+  <div id='userSpeaking' class='notification' style='display:none'>You are Speaking</div>
+</div>
 <script src='demo.bundle.js'></script>