Permalink
Browse files

mp3 support cross browser

  • Loading branch information...
1 parent e05a544 commit d3ebd007184608e32307cc3ea44b1888879006f3 andy committed with Andrew Glass Jan 14, 2013
View
BIN .DS_Store
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -34,7 +34,7 @@ playlistHandler = ->
song = $("a[data-track=#{trackNumber}]").attr('data-song')
track = $("a[data-track=#{trackNumber}]").attr('data-track')
title = $("a[data-track=#{trackNumber}]").attr('data-title')
- $(".mp3player").attr('src', song)
+ $(".mp3player").attr('src', song + browserFormat() )
$(".mp3player").attr('data-current', track)
$(".mp3player")[0].play()
turnOnSongImage(trackNumber)
@@ -56,4 +56,19 @@ playlistHandler = ->
console.log("playin")
$(".mp3player")[0].play()
+ browserFormat= ->
+ myAudio = document.createElement('audio');
+ if myAudio.canPlayType
+ canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
+ canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
+ return ".mp3" if canPlayMp3
+ return ".ogg" if canPlayOgg
+ browserFormatLogger= ->
+ myAudio = document.createElement('audio');
+ if myAudio.canPlayType
+ canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
+ canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
+ alert("can play mp3? " + canPlayMp3)
+ alert("can play ogg? " + canPlayOgg)
+ alert("playing format: " + browserFormat())
@@ -10,38 +10,26 @@ html {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cd6c5', endColorstr='#cbd8d6',GradientType=0 ); /* IE6-9 */
}
-#whale-container { display: block; float: left; width: 25%; height: 100%; margin: 6% 0 0 6%; }
-#song-container { display: block; float: left; width: 65%; height: 100%; margin: 14% 0 0px 0px;}
+#container { margin: 0 0% 0 8%;}
+#whale-container { float: left; width: 30%; height: 100%; padding: 16% 0 10% 0%; }
+#song-container { float: left; width: 61%; height: 100%; padding: 7% 0 10% 0%; margin-left: 15px;}
-#whale-img { width: 100%;}
+/*#whale-img { miwidth: 385px;}
+*/
+#album { max-height: 120px; margin: 20px 0 12px 5px; display: block;}
-#album { max-height: 148px; margin: 20px 0 20px 5px; display: block;}
-.song-images {display: block;}
+.song-images { display: block;}
-.play { height: 55px;}
-.download { height: 55px;}
-.songname { }
+.play { height: 50px;}
+.download { height: 50px;}
+.songname { margin-bottom: 7px; position: relative; }
-.frog { height: 60px; margin-left: 8px;}
-.selfish { height: 65px; }
-.reco { height: 65px; }
-.formal { height: 60px; }
+.frog { height: 50px; top: 6px; margin-left: 4px;}
+.selfish { height: 52px; top: 7px; margin-left: 5px;}
+.reco { height: 52px; top: 5px; margin-left: 4px;}
+.formal { height: 48px; top: 5px; margin-left: 5px;}
#credits { width: 70%; margin-left: auto; margin-right: auto; display: block;}
.mp3player { display: none;}
-
-/*.songname1 {
-height: 70px;
-margin-left: 14px;
-}
-.songname2 {
-height: 61px;
-}
-.songname3 {
-height: 63px;
-}
-.songname4 {
-height: 56px;
-}*/
@@ -1,4 +1,4 @@
-<div id="container row-fluid show-grid">
+<div id="container" >
<div id="whale-container" >
<%= image_tag "whale.png", :id => "whale-img" %>
</div>
@@ -9,51 +9,53 @@
<div class="song-images">
<%= link_to image_tag("play_button_black.png", :class => "play", :id => "1"),
"#", :class => "song", :data => {:track => "1",
- :song => "/assets/songs/Frog_Pie.mp3"} %>
+ :song => "https://s3.amazonaws.com/chrisjohns/Frog_Pie"} %>
- <%= link_to image_tag("download.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Frog_Pie" }%>
+ <%= link_to image_tag("download_button.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Frog_Pie" }%>
<%= link_to image_tag("frog_pie.png", :class => "songname frog", :id => "1"),
"#", :class => "song", :data => {:track => "1",
- :song => "/assets/songs/Frog_Pie.mp3"} %>
+ :song => "https://s3.amazonaws.com/chrisjohns/Frog_Pie"} %>
</div>
<div class="song-images">
<%= link_to image_tag("play_button_black.png", :class => "play", :id => "2"),
"#", :class => "song", :data => {:track => "2",
- :song => "/assets/songs/I_Know_This_Is_Selfish_But.mp3"} %>
+ :song => "https://s3.amazonaws.com/chrisjohns/I_Know_This_Is_Selfish_But"} %>
- <%= link_to image_tag("download.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "I_Know_This_Is_Selfish_But" }%>
+ <%= link_to image_tag("download_button.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "I_Know_This_Is_Selfish_But" }%>
<%= link_to image_tag("selfish.png", :class => "songname selfish", :id => "2"),
"#", :class => "song", :data => {:track => "2",
- :song => "/assets/songs/I_Know_This_Is_Selfish_But.mp3"} %>
+ :song => "https://s3.amazonaws.com/chrisjohns/I_Know_This_Is_Selfish_But"} %>
</div>
<div class="song-images">
<%= link_to image_tag("play_button_black.png", :class => "play", :id => "3"),
"#", :class => "song", :data => {:track => "3",
- :song => "/assets/songs/Your_Recollection_Not_Mine.mp3"} %>
+ :song => "https://s3.amazonaws.com/chrisjohns/Your_Recollection_Not_Mine"} %>
- <%= link_to image_tag("download.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Your_Recollection_Not_Mine" }%>
+ <%= link_to image_tag("download_button.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Your_Recollection_Not_Mine" }%>
<%= link_to image_tag("recollection.png", :class => "songname reco", :id => "3"),
"#", :class => "song", :data => {:track => "3",
- :song => "/assets/songs/Your_Recollection_Not_Mine.mp3"} %>
+ :song => "https://s3.amazonaws.com/chrisjohns/Your_Recollection_Not_Mine"} %>
</div>
<div class="song-images">
<%= link_to image_tag("play_button_black.png", :class => "play", :id => "4"),
"#", :class => "song", :data => {
:track => "4",
- :song => "/assets/songs/Formal_Leftovers.mp3"} %>
+ :song => "https://s3.amazonaws.com/chrisjohns/Formal_Leftovers"} %>
- <%= link_to image_tag("download.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Formal_Leftovers" }%>
+ <%= link_to image_tag("download_button.png", :class => "download"), {:controller => "welcome", :action => "download", :song_name => "Formal_Leftovers" }%>
<%= link_to image_tag("formal_leftovers.png", :class => "songname formal", :id => "4"),
"#", :class => "song", :data => {
:track => "4",
- :song => "/assets/songs/Formal_Leftovers.mp3",
+ :song => "https://s3.amazonaws.com/chrisjohns/Formal_Leftovers",
:title => "Phoney Phranchise"} %>
</div>
</div>
</div>
- <audio id="player" class="mp3player" type="audio/mpeg" width="300" height="32" src="" controls="controls" data-current="" autobuffer=""></audio>
+ <audio controls id="player" class="mp3player" data-current="" autobuffer="">
+ <source id="audio-source" src=""/>
+ </audio>
@@ -24,6 +24,7 @@
# config.assets.manifest = YOUR_PATH
# Specifies the header that your server uses for sending files
+ config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # For Heroku
# config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
# config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx
View
Binary file not shown.
View
Binary file not shown.
View
Deleted file not rendered
View
Deleted file not rendered
View
Deleted file not rendered
Deleted file not rendered
View
Deleted file not rendered
View
@@ -1,20 +0,0 @@
----
-album.png: album-1e6089ecc1a762af11c69ebd0de0f2f6.png
-credits.png: credits-b587134c2497ff03ee8af4b60680d03f.png
-download.png: download-84b55eb3bba6d1cf58bc6febf4b017b3.png
-formal_leftovers.png: formal_leftovers-53734abd1a72f6767724c329161d9990.png
-frog_pie.png: frog_pie-547e58bffdc2fc73eeb7e611b3c041ef.png
-play_button_black.png: play_button_black-be41f17abfbb4111fd6dc75fa0b8a93e.png
-play_button_white.png: play_button_white-6ed267ba0042fb391e19bfcbcfeba96e.png
-recollection.png: recollection-9cff0d83cc44fc8f7386d835cd9c5d31.png
-selfish.png: selfish-d715e33e1aef216a9f5dbd8a4afab58f.png
-whale.png: whale-267d810a3b742d8b5553f6c6d6ac9be1.png
-application.js: application-2444276d49cb79de2ffef8ec42847896.js
-six.mp3: six-55c2ff44b35db22683473227fc14196b.mp3
-application.css: application-6af154fe0a1395fa5d6f2dad2b8c0e70.css
-fontawesome-webfont.eot: fontawesome-webfont-7cf1b0de49e2f8672c9ad6d9e382115f.eot
-fontawesome-webfont.svg: fontawesome-webfont-4d19fdd70a080778557b652cb4868557.svg
-fontawesome-webfont.ttf: fontawesome-webfont-1e29be0bb354c9f664cbca7df9a966d8.ttf
-fontawesome-webfont.woff: fontawesome-webfont-9c0e35b95bf9cea29c77678ebf71a29d.woff
-twitter/bootstrap/glyphicons-halflings-white.png: twitter/bootstrap/glyphicons-halflings-white-13553a5bf21ae3cc374006592488ec64.png
-twitter/bootstrap/glyphicons-halflings.png: twitter/bootstrap/glyphicons-halflings-ab3144065a860d198f1d7d9a4882640c.png
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
View
Deleted file not rendered
Binary file not shown.
Binary file not shown.
View
Deleted file not rendered
View
BIN public/favicon.ico 100644 → 100755
Binary file not shown.

0 comments on commit d3ebd00

Please sign in to comment.