Search code examples
htmlaudiosoundcloudaudio-player

Stream public tracks from SoundCloud to custom html5 player, what am I doing wrong?

I found a good custom HTML5 audio player and successfully redesigned it for my needs. Now I want to stream a publicly available tracks from SoundCloud to my new player. I had tried to add api.soundcloud.com (all variations) links to "scr" property with no luck. I spent several hour googling for the solution - nothing so far.

If I understand it correctly to stream "public" tracks I don't need a "Client ID", so I don't know what to do to make it work. Is it more than just a add api link to "scr"?

I'd tried this (adding api link to scr, track id is just an example): 

<div class="audio-player">
    <div id="play-btn"></div>
    <div class="audio-wrapper" id="player-container" href="javascript:;">
      <audio id="player" ontimeupdate="initProgressBar()">
			  <source src="http://api.soundcloud.com/tracks/2775534">
			</audio>
    </div>
    <div class="player-controls scrubber">
      <p>Oslo <small>by</small> Holy Esque</p>
      <span id="seekObjContainer">
			  <progress id="seekObj" value="0" max="1"></progress>
			</span>
      <br>
      <small style="float: left; position: relative; left: 15px;" class="start-time"></small>
      <small style="float: right; position: relative; right: 20px;" class="end-time"></small>

    </div>
    <div class="album-image" style="background-image: url('https://artwork-cdn.7static.com/static/img/sleeveart/00/051/614/0005161476_350.jpg')"></div>
  </div>

CodePen (original player source code)

Solution

  • AFAIK SoundCloud has stopped accepting the new app registration but if you already have a client_id, you can use this

    You need to provide the "streaming_url" of the track in the audio player source, which will look something like this, I can't provide my "client_id" here as it may break the rule of the community but just a google search can give you lot of working "client_id" for track id you can use this: 459194895

    https://api.soundcloud.com/tracks/{trackid}/stream?client_id={clientid}