Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

mp3 support cross browser

  • Loading branch information...
commit d3ebd007184608e32307cc3ea44b1888879006f3 1 parent e05a544
authored January 13, 2013 Andrew Glass committed January 16, 2013
BIN  .DS_Store
Binary file not shown
BIN  app/.DS_Store
Binary file not shown
BIN  app/assets/.DS_Store
Binary file not shown
BIN  app/assets/images/.DS_Store
Binary file not shown
BIN  app/assets/images/download.png
BIN  app/assets/images/download_button.png
17  app/assets/javascripts/welcome.js.coffee
@@ -34,7 +34,7 @@ playlistHandler = ->
34 34
     song   = $("a[data-track=#{trackNumber}]").attr('data-song')
35 35
     track  = $("a[data-track=#{trackNumber}]").attr('data-track')
36 36
     title  = $("a[data-track=#{trackNumber}]").attr('data-title')
37  
-    $(".mp3player").attr('src', song)
  37
+    $(".mp3player").attr('src', song + browserFormat() )
38 38
     $(".mp3player").attr('data-current', track)
39 39
     $(".mp3player")[0].play()
40 40
     turnOnSongImage(trackNumber)
@@ -56,4 +56,19 @@ playlistHandler = ->
56 56
     console.log("playin")
57 57
     $(".mp3player")[0].play()
58 58
 
  59
+  browserFormat= ->
  60
+    myAudio = document.createElement('audio'); 
  61
+    if myAudio.canPlayType
  62
+      canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
  63
+      canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
  64
+      return ".mp3" if canPlayMp3
  65
+      return ".ogg" if canPlayOgg
59 66
 
  67
+  browserFormatLogger= ->
  68
+    myAudio = document.createElement('audio'); 
  69
+    if myAudio.canPlayType
  70
+      canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
  71
+      canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
  72
+      alert("can play mp3? " + canPlayMp3)
  73
+      alert("can play ogg? " + canPlayOgg)
  74
+      alert("playing format: " + browserFormat())
40  app/assets/stylesheets/welcome.css.scss
@@ -10,38 +10,26 @@ html {
10 10
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cd6c5', endColorstr='#cbd8d6',GradientType=0 ); /* IE6-9 */
11 11
 }
12 12
 
13  
-#whale-container { display: block; float: left; width: 25%; height: 100%; margin: 6% 0 0 6%; }
14  
-#song-container  { display: block; float: left; width: 65%; height: 100%; margin: 14% 0 0px 0px;}
  13
+#container  { margin: 0 0% 0 8%;}
  14
+#whale-container { float: left; width: 30%; height: 100%; padding: 16% 0 10% 0%; }
  15
+#song-container  { float: left; width: 61%; height: 100%; padding: 7% 0 10% 0%; margin-left: 15px;}
15 16
 
16  
-#whale-img       { width: 100%;}
  17
+/*#whale-img       { miwidth: 385px;}
  18
+*/
  19
+#album           { max-height: 120px; margin: 20px 0 12px 5px; display: block;}
17 20
 
18  
-#album           { max-height: 148px; margin: 20px 0 20px 5px; display: block;}
19 21
 
20  
-.song-images     {display: block;}
  22
+.song-images     { display: block;}
21 23
 
22  
-.play            { height: 55px;}
23  
-.download        { height: 55px;}
24  
-.songname        {   }
  24
+.play            { height: 50px;}
  25
+.download        { height: 50px;}
  26
+.songname        { margin-bottom: 7px; position: relative; }
25 27
 
26  
-.frog            { height: 60px; margin-left: 8px;}
27  
-.selfish         { height: 65px; }
28  
-.reco            { height: 65px; }
29  
-.formal          { height: 60px; }
  28
+.frog            { height: 50px; top: 6px; margin-left: 4px;}
  29
+.selfish         { height: 52px; top: 7px; margin-left: 5px;}
  30
+.reco            { height: 52px; top: 5px; margin-left: 4px;}
  31
+.formal          { height: 48px; top: 5px; margin-left: 5px;}
30 32
 
31 33
 #credits         { width: 70%; margin-left: auto; margin-right: auto; display: block;}
32 34
 
33 35
 .mp3player       { display: none;}
34  
-
35  
-/*.songname1 {
36  
-height: 70px;
37  
-margin-left: 14px;
38  
-}
39  
-.songname2 {
40  
-height: 61px;
41  
-}
42  
-.songname3 {
43  
-height: 63px;
44  
-}
45  
-.songname4 {
46  
-height: 56px;
47  
-}*/
30  app/views/welcome/index.html.erb
... ...
@@ -1,4 +1,4 @@
1  
-<div id="container row-fluid show-grid"> 
  1
+<div id="container" > 
2 2
   <div id="whale-container" >
3 3
     <%= image_tag "whale.png", :id => "whale-img" %>
4 4
   </div>
@@ -9,51 +9,53 @@
9 9
       <div class="song-images">
10 10
       <%= link_to image_tag("play_button_black.png", :class => "play", :id => "1"),
11 11
           "#", :class => "song", :data => {:track => "1",
12  
-                                           :song => "/assets/songs/Frog_Pie.mp3"} %>
  12
+                                           :song => "https://s3.amazonaws.com/chrisjohns/Frog_Pie"} %>
13 13
 
14  
-      <%= link_to image_tag("download.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Frog_Pie" }%>
  14
+      <%= link_to image_tag("download_button.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Frog_Pie" }%>
15 15
 
16 16
       <%= link_to image_tag("frog_pie.png", :class => "songname frog", :id => "1"),
17 17
           "#", :class => "song", :data => {:track => "1",
18  
-                                           :song => "/assets/songs/Frog_Pie.mp3"} %>
  18
+                                           :song => "https://s3.amazonaws.com/chrisjohns/Frog_Pie"} %>
19 19
       </div>
20 20
       <div class="song-images">
21 21
       <%= link_to image_tag("play_button_black.png", :class => "play", :id => "2"),
22 22
           "#", :class => "song", :data => {:track => "2",
23  
-                                           :song => "/assets/songs/I_Know_This_Is_Selfish_But.mp3"} %>
  23
+                                           :song => "https://s3.amazonaws.com/chrisjohns/I_Know_This_Is_Selfish_But"} %>
24 24
 
25  
-      <%= link_to image_tag("download.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "I_Know_This_Is_Selfish_But" }%>
  25
+      <%= link_to image_tag("download_button.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "I_Know_This_Is_Selfish_But" }%>
26 26
 
27 27
       <%= link_to image_tag("selfish.png", :class => "songname selfish", :id => "2"),
28 28
           "#", :class => "song", :data => {:track => "2",
29  
-                                           :song => "/assets/songs/I_Know_This_Is_Selfish_But.mp3"} %>
  29
+                                           :song => "https://s3.amazonaws.com/chrisjohns/I_Know_This_Is_Selfish_But"} %>
30 30
       </div>
31 31
       <div class="song-images">
32 32
       <%= link_to image_tag("play_button_black.png", :class => "play", :id => "3"),
33 33
           "#", :class => "song", :data => {:track => "3",
34  
-                                           :song => "/assets/songs/Your_Recollection_Not_Mine.mp3"} %>
  34
+                                           :song => "https://s3.amazonaws.com/chrisjohns/Your_Recollection_Not_Mine"} %>
35 35
 
36  
-      <%= link_to image_tag("download.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Your_Recollection_Not_Mine" }%>
  36
+      <%= link_to image_tag("download_button.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Your_Recollection_Not_Mine" }%>
37 37
 
38 38
       <%= link_to image_tag("recollection.png", :class => "songname reco", :id => "3"),
39 39
           "#", :class => "song", :data => {:track => "3",
40  
-                                           :song => "/assets/songs/Your_Recollection_Not_Mine.mp3"} %>
  40
+                                           :song => "https://s3.amazonaws.com/chrisjohns/Your_Recollection_Not_Mine"} %>
41 41
       </div>
42 42
       <div class="song-images">
43 43
       <%= link_to image_tag("play_button_black.png", :class => "play", :id => "4"),
44 44
           "#", :class => "song", :data => {
45 45
                                           :track => "4",
46  
-                                          :song => "/assets/songs/Formal_Leftovers.mp3"} %>
  46
+                                          :song => "https://s3.amazonaws.com/chrisjohns/Formal_Leftovers"} %>
47 47
 
48  
-      <%= link_to image_tag("download.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Formal_Leftovers" }%>
  48
+      <%= link_to image_tag("download_button.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Formal_Leftovers" }%>
49 49
 
50 50
       <%= link_to image_tag("formal_leftovers.png", :class => "songname formal", :id => "4"),
51 51
           "#", :class => "song", :data => {
52 52
                                           :track => "4",
53  
-                                          :song => "/assets/songs/Formal_Leftovers.mp3",
  53
+                                          :song => "https://s3.amazonaws.com/chrisjohns/Formal_Leftovers",
54 54
                                           :title => "Phoney Phranchise"} %>
55 55
       </div>
56 56
   </div>
57 57
 </div>
58 58
 
59  
-  <audio id="player" class="mp3player" type="audio/mpeg" width="300" height="32" src="" controls="controls" data-current="" autobuffer=""></audio>
  59
+  <audio controls id="player" class="mp3player" data-current="" autobuffer="">
  60
+    <source id="audio-source" src=""/>
  61
+  </audio>
1  config/environments/production.rb
@@ -24,6 +24,7 @@
24 24
   # config.assets.manifest = YOUR_PATH
25 25
 
26 26
   # Specifies the header that your server uses for sending files
  27
+  config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # For Heroku
27 28
   # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
28 29
   # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx
29 30
 
BIN  public/.DS_Store
Binary file not shown
BIN  public/assets/.DS_Store
Binary file not shown
BIN  public/assets/album.png
BIN  public/assets/credits.png
BIN  public/assets/download.png
BIN  public/assets/formal_leftovers.png
BIN  public/assets/frog_pie.png
20  public/assets/manifest.yml
... ...
@@ -1,20 +0,0 @@
1  
----
2  
-album.png: album-1e6089ecc1a762af11c69ebd0de0f2f6.png
3  
-credits.png: credits-b587134c2497ff03ee8af4b60680d03f.png
4  
-download.png: download-84b55eb3bba6d1cf58bc6febf4b017b3.png
5  
-formal_leftovers.png: formal_leftovers-53734abd1a72f6767724c329161d9990.png
6  
-frog_pie.png: frog_pie-547e58bffdc2fc73eeb7e611b3c041ef.png
7  
-play_button_black.png: play_button_black-be41f17abfbb4111fd6dc75fa0b8a93e.png
8  
-play_button_white.png: play_button_white-6ed267ba0042fb391e19bfcbcfeba96e.png
9  
-recollection.png: recollection-9cff0d83cc44fc8f7386d835cd9c5d31.png
10  
-selfish.png: selfish-d715e33e1aef216a9f5dbd8a4afab58f.png
11  
-whale.png: whale-267d810a3b742d8b5553f6c6d6ac9be1.png
12  
-application.js: application-2444276d49cb79de2ffef8ec42847896.js
13  
-six.mp3: six-55c2ff44b35db22683473227fc14196b.mp3
14  
-application.css: application-6af154fe0a1395fa5d6f2dad2b8c0e70.css
15  
-fontawesome-webfont.eot: fontawesome-webfont-7cf1b0de49e2f8672c9ad6d9e382115f.eot
16  
-fontawesome-webfont.svg: fontawesome-webfont-4d19fdd70a080778557b652cb4868557.svg
17  
-fontawesome-webfont.ttf: fontawesome-webfont-1e29be0bb354c9f664cbca7df9a966d8.ttf
18  
-fontawesome-webfont.woff: fontawesome-webfont-9c0e35b95bf9cea29c77678ebf71a29d.woff
19  
-twitter/bootstrap/glyphicons-halflings-white.png: twitter/bootstrap/glyphicons-halflings-white-13553a5bf21ae3cc374006592488ec64.png
20  
-twitter/bootstrap/glyphicons-halflings.png: twitter/bootstrap/glyphicons-halflings-ab3144065a860d198f1d7d9a4882640c.png
BIN  public/assets/play_button_black.png
BIN  public/assets/play_button_white.png
BIN  public/assets/recollection.png
BIN  public/assets/selfish.png
BIN  public/assets/songs/.DS_Store
Binary file not shown
BIN  public/assets/songs/six1.mp3
Binary file not shown
BIN  public/assets/whale.png
BIN  public/favicon.ico 100644 → 100755
Binary file not shown

0 notes on commit d3ebd00

Please sign in to comment.
Something went wrong with that request. Please try again.