1

Trying to stream sound on page from soundcloud, as it said on API, but unfortunately there's no sound when I'm click on button. Otherwise, when I "run" this code here or on jsfiddle - it works! It must be problem that I'm trying to run it from local disc? How can I solve it?

SC.initialize({
  client_id: '53902af7a344bb0351898c47bc3d786f'
});

 $("#stream").on("click", function(){
    SC.stream("/tracks/49712607", function(sound){
    sound.play();
    });
  });
<!DOCTYPE html>
<html>
<head>
    <title>music</title>
    <meta charset="windows-1251">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://connect.soundcloud.com/sdk-2.0.0.js"></script>
    <script src="script.js"></script>
</head>
<body>
       <div id='player'>player       
       <input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" />
       </div>
 </body>
 </html>

Fiodor Zhabskyy
  • 21
  • 2

1 Answers1

1

You need to execute your call to the SDK while your files are hosted on a web server. But you can have the web server running form your local machine.

The problem is trying to run things from the filesystem. When doing so, you get the error: NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

To ensure you do have this error, please try the basic example from SoundCloud.

See also this question.

What technology to choose then depends on what you feel comfortable with...

For instance I do most of my local apps with Node.JS. Maybe the simplest way would be to use http-server as noted in your comment.

Launch it on the command line with: http-server <your-directory> -o. With -o your default browser will open and list the files in your-directory.

Notice that the SoundCloud docs are using the JQuery .live() function call but it is deprecated! That made their code work despite the DOM not being ready yet.

Here, you want to use the regular .on() function and have the binding of the click event handler done once the DOM is ready. For that you use $(document).ready(function() { ... });

Here's the code I used.

<!DOCTYPE html>
<html>
<head>
    <title>music</title>
    <meta charset="windows-1251">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//connect.soundcloud.com/sdk-2.0.0.js"></script>
    <script>
    SC.initialize({
        client_id: "53902af7a344bb0351898c47bc3d786f"
    });

    $(document).ready(function() {
        $("#stream").on("click", function(){
            SC.stream("/tracks/49712607", function(sound){
                sound.play();
            });
        });
    });
    </script>
</head>
<body>
    <div id='player'>player       
        <input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" />
    </div>
</body>
</html>
Community
  • 1
  • 1
ThomasKrauss
  • 11
  • 3
  • thanks for your answer! I didn't find any 'easy-to-understanding' manual for installing and using any node server, so I don't understand how to use Inertia web server that you recomend. But after hours of reading and testing... :) I'd opened my page with https://www.npmjs.com/package/http-server and I'm happy about it! But - the audio stream doesn't playing anyway. In console there are no mistakes or warnings – Fiodor Zhabskyy Aug 16 '15 at 22:17
  • one more thing - it's "HTTP/1.1 304 Not Modified" message on console for jquery, soundcloud and my own js – Fiodor Zhabskyy Aug 17 '15 at 00:35
  • Also tried to launch site with http://anvilformac.com/index.html - the same result in web console: opened site, GET scripts and soundcloud sdk, but not playing by clicking button. – Fiodor Zhabskyy Aug 17 '15 at 09:10
  • I had the error message with [the basic example](http://connect.soundcloud.com/examples/basic.html). The streaming code was totally silent. The question I linked was from a year ago. Maybe things have changed... Anyway, it's not the SDK that refuses to run, it's the SoundCloud server that refuses to serve the file and sends the error message (I've checked the source code). I will get back to you if I find time today to fully test my proposition. – ThomasKrauss Aug 17 '15 at 09:24
  • it would be great, pay attention that in example they use old src="//connect.soundcloud.com/sdk.js" now it's src="http://connect.soundcloud.com/sdk-2.0.0.js" – Fiodor Zhabskyy Aug 17 '15 at 09:44
  • Didn't see that one, thanks! I have updated my answer. Both sdk.js and skd-2.0.0.js work on my machine. – ThomasKrauss Aug 17 '15 at 10:20
  • $(document).ready(function() { ... }); - sure! you're perfectly right. the same result give 'defer' attribute on src, but $(document).ready must be in code certainly. thank you for help! – Fiodor Zhabskyy Aug 17 '15 at 11:55