Search code examples
soundcloudjplayer

Creating a docked music player for SoundCloud and mp3s


I'm trying to create a website that pulls free songs from multiple sources and lets users play them by clicking on their cover art, and launching them in a docked music player on the bottom of the page. Soundcloud's api offers me a lot of songs, but they are in a streaming api format, not in mp3 form.

The music players that SoundCloud offers are great for these streaming songs, but it won't work with the mp3s I'm pulling from other sites. Mp3 players like Jplayer are great for the mp3s, but I can't figure out how to get it to work with the streaming soundcloud format.

Think of a site like ex.fm: http://ex.fm/search/bob%20dylan They pull their audio tracks from many sources but it is all playable through their one player.

Any help with this would be great.

Thanks


Solution

  • Check SoundCloud API http://developers.soundcloud.com/docs/api/reference#tracks

    There is a stream_url property for every track that's streamable outside of SoundCloud.

    You need to register your app on Soundcloud and get API Key. With that key you can stream the tracks in your own player.

    Edit, thanks to gryzzly. Example of SoundCloud API used with jPlayer:

    var SOUNDCLOUD_API = 'http://api.soundcloud.com',
        CLIENT_ID = '?client_id=REPLACE_WITH_YOUR_CLIENT_ID';
    
    $(document).ready(function() {
      var apiRequest;
    
      $.get(SOUNDCLOUD_API + '/tracks/6981096.json' + CLIENT_ID)
       .done(handleRepsonse);
    
      function handleResponse (soundData) {
        $("#jquery_jplayer_1").jPlayer({
          ready: function () {
            $(this).jPlayer("setMedia", {
              // stream_url is good enough for jPlayer,
              mp3: soundData.stream_url + CLIENT_ID
            });
          },
          swfPath: "http://www.jplayer.org/2.1.0/js"
        });
      }
    
    });
    

    And you can check it live at jsbin.com/ajaken/4/edit