title: HTML5 custom player not working with Soundcloud api uri
body: <p>I am using a jQuery plugin which turns simple <code>&lt;audio&gt;&lt;/audio&gt;</code> into a set of different elements which are than controlled by javascript, basically creates a custom html5 player.
  You can find a blog post on this plugin here: <a href="http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/" rel="nofollow">http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/</a>
  it explains this plugin in depth.</p>
  
  <p>anyway, for some reason it is not working when I generate <code>src=""</code> for the player via     Soundcloud api. Basically I get song url from Soundcloud and than add it as src to the audio tag.</p>
  
  <p>The issue is that once page is loaded it says <code>src="unknown"</code> (or something along these lines)</p>
  
  <p>Here is HTML markup which demonstrates use of both Soundcloud api and Custom player plugin.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  
  &lt;link rel="stylesheet" href="/reset.css"&gt;
  &lt;link rel="stylesheet" href="/player.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;audio id="audio-test" controls&gt;&lt;/audio&gt;
  
  &lt;!-- Javascript/jQuery --&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//connect.soundcloud.com/sdk.js"&gt;&lt;/script&gt;
  &lt;script src="/player.js"&gt;&lt;/script&gt; &lt;!-- /js/player.js --&gt;
  
  &lt;script&gt;
  // Soundcloud
  SC.initialize({
      client_id: '7a17129ba9cd5fff34f847e3539829b7'
  });
  
  SC.get("/tracks/81815566", {}, function(sound){
      $("#audio-test").attr("src", sound.uri + "/stream?client_id=7a17129ba9cd5fff34f847e3539829b7");
  });
  
  //Custom Player
  $( function() { $( 'audio' ).audioPlayer(); } );
  &lt;/script&gt;
  
  &lt;!-- END Javascript/jQuery --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here are additional files that you may need to see player in full functionality:</p>
  
  <p><strong>player.css</strong> <a href="http://pastebin.com/HBUFvUw2" rel="nofollow">http://pastebin.com/HBUFvUw2</a> <br>
  <strong>reset.css</strong>  <a href="http://pastebin.com/jstmq0dB" rel="nofollow">http://pastebin.com/jstmq0dB</a> <br>
  <strong>player.js (the plugin)</strong> <a href="http://pastebin.com/MKrUgRDF" rel="nofollow">http://pastebin.com/MKrUgRDF</a> <br> <hr></p>
  
  <p><strong>Or just download whole project from here:</strong> <a href="http://www.filedropper.com/example_1" rel="nofollow">http://www.filedropper.com/example_1</a></p>