cross browser audio play support

LooseButton · Apr 2, 2013 · 10392f8 · 10392f8
1 parent 6fa4810
commit 10392f8
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,11 @@ Triggio
 
 Web app that connects events send from trusted sources to sounds that are played.
 
+Meteorite is used instead of meteor (https://github.com/oortcloud/meteorite)
+
+
+## Audio files
+Please provide audio clips in mp3 format. Since Triggio uses [audio.js](http://kolber.github.com/audiojs/) it support most browser with flash used as fallback
 
 ### Useful Commands
 

diff --git a/client/triggio.coffee b/client/triggio.coffee
@@ -2,6 +2,7 @@ Events = new Meteor.Collection "events"
 
 if Meteor.isClient
 
+  # For testing
   window.play_sound ||= play_sound
 
   Meteor.startup ->
@@ -38,6 +39,17 @@ if Meteor.isClient
 
 
 play_sound = (sound_id) ->
-  player = $('#clip_player').attr 
-    'src': "/clips/#{sound_id}.mp3"
-  player[0].play()
+  # Remove any existing audio players
+  $('#clip_player').remove()
+  $('.audiojs').remove()
+
+  # Create a new audio player that autoplays
+  # This is done so audiojs can do its flash initialization if browser does not support mp3
+  audio = $('<audio>').attr
+    id: 'clip_player'
+    autoplay: true
+    preload: 'auto'
+    hidden: 'hidden'
+    src: "/clips/#{sound_id}.mp3"
+  $('body').append audio
+  audiojs.createAll()
diff --git a/public/audiojs/audio.min.js b/public/audiojs/audio.min.js
diff --git a/public/audiojs/audiojs.swf b/public/audiojs/audiojs.swf
diff --git a/public/audiojs/player-graphics.gif b/public/audiojs/player-graphics.gif
diff --git a/public/clips/.DS_Store b/public/clips/.DS_Store
diff --git a/triggio.html b/triggio.html
@@ -1,15 +1,15 @@
 <head>
   <title>Triggio | The Event Player by Loose Button Engineering</title>
+
+  <script src="/audiojs/audio.min.js"></script>
 </head>
 
 <body>
   <div class="trigger-header">
     <h1>Triggio</h1>
     <h4>By Loose Button Engineering</h4>  
   </div>
-  {{> events}}
-
-  <audio id="clip_player" autoplay="autoplay" preload="auto" hidden="hidden"></audio>
+  {{> events}}  
 </body>
 
 <template name="events">

diff --git a/triggio.less b/triggio.less
@@ -8,6 +8,8 @@ html {
 
 }
 
+.audiojs { display: none; }
+
 .trigger-header {
     margin-top: 50px;
     text-align: center;