Playing MP3s On Your Rails Site With mp3_player

mp3_player is a simple plugin I built to play mp3s online through my rails application.

The plugin in based on a php/flash based plugin by Martin Laine

(This is how it looks while playing)

To install this plugin and try it out type the following in your terminal window:

script/plugin install git://github.com/GavinM/mp3_player.git

and then

script/generate mp3_player mp3s_folder

This adds a folder called ‘mp3s_folder’ in your public directory with a test mp3 file from Martin’s original plugin and a shock-wave file ‘player.swf’ to your public directory which is the flash object you’ll be adding to your views.

To use the player, simply call the helper method mp3_player() in the view:

<%= mp3_player "/mp3s_folder/your_song.mp3" %>

or, if you’re using paperclip

<%= mp3_player @my_model.mp3.url %>

The player can be fully customised by specifying the following options:

:autostart => #start the song on page load, defaults to false
:loop => #play the track continuously, defaults to false
:width => #width of the player when open in pixels, defaults to 290
:id => #id of the div wrapping the player, defaults to "#{track_name}_player"
:class => #class of the div wrapping the player, defaults to "mp3_player"
:bg => #background colour, defaults to "BBBBBB"
:left_bg => #background color of the left tab, defaults to "AAAAAA"
:right_bg => #background colour of the right tab, defaults to "AAAAAA"
:right_bg_hover => #colour of the right background as the cursor hovers over, defaults to "EEEEEE"
:left_icon => #the color of the speaker icon on the left, defaults to "222222"
:right_icon => #colour of the play/pause icon on the right, defaults to "222222"
:right_icon_hover => #colour of the play/pause icon as the cursor hovers over, defaults to "222222"
:text => #colour of the text, defaults to "222222"
:slider => #colour of the slider bar, defaults to "333333"
:loader => #colour of the loaded data so far, defaults to "DDDFFF"
:track => #colour of the track on the slider, defaults to "888888"
:border => #colour of the buffer border, defaults to "333333"

Simply pass these options as parameters after the file name like so:

<%= mp3_player @my_model.mp3.url, :width => 240, :text => "333333" %>

Easy!

Written by

Photo of Gavin Morrice
Gavin Morrice

Software engineer based in Scotland

Connect with me