Sound Space is a responsive, jQuery music player with loads of options. You can customize just about everything. This audio player is supported by all major browsers (Firefox, Chrome, Safari, IE7-9, Opera etc.) and mobile devices like iPhone, iPad, Android etc. You can add self-hosted MP3 files and tracks from SoundCloud very easily.
- Responsive Player
- Keyboard shortcuts
- Fully customizable colors
- Top or Bottom positioning (note it is automatically moved to top on mobile)
- Stream from folder or SoundCloud
- Social Networking Links (SoundCloud only)
- Progress Bar and Track Timer
- Cover Art
- Show player at start
- Lots more. See the params to the right.
How to set a link to play a track
You can also link to the player from within the content by using a special CSS class: "fap-single-track"
Here is some example code:
<a class="fap-single-track" href="http://soundcloud.com/infectiousmusicuk/sweet-disposition-by-the-temper-trap">The Temper Trap - Sweet Disposition</a>
This code outputs this link: The Temper Trap - Sweet Disposition
If you are linking to a track on SoundCloud, it will automatically include a title. If you link to a local file, make sure to add a title so the player knows what song is what. Like this:
<a class="fap-single-track" href="/media/loco.mp3" rel="http://vibe.pixelpointcreative.com/images/covers/311.jpg" title="311-Loco" >311 - Loco</a>
This code outputs this link: 311 - Loco
How to add cover art for local mp3s
In the file description box, you can use 4 parameters for your local mp3s. They are:
Here is an complete example with 2 tracks added. You can add as many as you want, each on an ew line.
trackname.mp3::url=http://www.yoururlhere.com&title=Artist Title&desc=Track Title&cover=http://yoururlhere.com/images/covers/albumcover.jpg&target=_blank
trackname2.mp3::url=http://www.yoururlhere.com&title=Artist2 Title&desc=Track2 Title&cover=http://yoururlhere.com/images/covers/albumcover2.jpg&target=_self