Browse files

mp3 support cross browser

  • Loading branch information...
1 parent 37982e4 commit e8bf2cd0a9f71bce375ead940b079fe756931754 andy committed Jan 13, 2013
View
BIN app/assets/.DS_Store
Binary file not shown.
View
9 app/assets/javascripts/welcome.js.coffee
@@ -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,11 @@ 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
View
16 app/assets/stylesheets/welcome.css.scss
@@ -11,7 +11,7 @@ html {
}
#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;}
+#song-container { display: block; float: left; width: 65%; height: 100%; margin: 9% 0 0px 0px;}
#whale-img { width: 100%;}
@@ -31,17 +31,3 @@ html {
#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;
-}*/
View
20 app/views/welcome/index.html.erb
@@ -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("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("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("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("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>

0 comments on commit e8bf2cd

Please sign in to comment.