Sound Space

Written by Super User.

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.

Sound Space is included for FREE with Vibe. You can also purchase it separately HERE.

Features

  • 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)
  • Playlist
  • Random
  • Shuffle
  • 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:

  • title
  • description
  • cover
  • target


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