Getting song from Soundcloud using widget embedded in own website

Question

I am developing an application that uses SoundCloud API. I am using frames for having the soundcloud widget on my page. I made a search bar where user can put an input (such as singer name) and based on that input I am trying to format a URL that will go and retrieve track or playlist from SoundCloud (anything that works)

Right now - it is unable to get the url due to invalid formatting - kindly suggest the best open ended url format so that users can search any singer/song to get back a the correct url (which then gets added to the player).

Code:

EJS file:

    <html>
    <head>
    <title>MIX Mashup Page</title>

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script type='text/javascript' src='./javascripts/form.js'></script>
    <link rel='stylesheet' href='stylesheets/style2.css' />
    <script type='text/javascript' src='http://connect.soundcloud.com/sdk.js'>                </script>
    <script type='text/javascript' src='https://w.soundcloud.com/player/api.js'></script>  
    <script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>

    </head>
    <body>
    <button id ='mixes'> MIXES </button>

    <h1> MIX </h1>
    Search Track to Play <input id = "searchbar" type="text" name="Search"/>        <button id ='search'>Search</button>

    <iframe id="sc-widget" src="https://w.soundcloud.com/player/?url=http://soundcloud.com/christineandthequeens/tilted&single_active=false" width="33%" height="365" scrolling="no" frameborder="yes"></iframe>
    </body>
    </html>

Javascript File:

    $(document).ready(function() {
    SC.initialize({
    client_id:'3dcb8913f19ee91a5f6c203c56333d75'
    });

    $("#stream").click(function(){
    SC.stream("/tracks/293", {autoPlay: true});
    });


    var iframeElement   = document.querySelector('iframe');
    var widget1         = SC.Widget(iframeElement);


    (function(){
    var widgetIframe = document.getElementById('sc-widget'),
    widget       = SC.Widget(widgetIframe);

    widget.bind(SC.Widget.Events.READY, function(){
    widget.bind(SC.Widget.Events.PLAY, function(){
    // get information about currently playing sound
    widget.getCurrentSound(function(currentSound){
    console.log('sound ' + currentSound.get('') + 'began to play');
     });
     });
    // get current level of volume
    widget.getVolume(function(volume){
    console.log('current volume value is ' + volume);
     });
    // set new volume level
    widget.setVolume(50);
    // get the value of the current position
    });

    }());
    })

    $(function() { 
    $("#search").click(function(){
    //storing values from the url 
    var searchrequest = $("#searchbar").val();
    result = "https://w.soundcloud.com/player/?                url=http://soundcloud.com/"+searchrequest;
    console.log(searchrequest);
    //$('iframe src').html(result); 
    console.log(result);
    $("#sc-widget").attr("src", result);   
    });
    });

Hartger Hartger · Accepted Answer · 2015-12-14T10:19:39

Your current code works as long as the user adds the exact artist username and a slash in the query. fiddle

I would suggest using the soundcloud tracks api to query and display a list of matching results which the user can choose from.

BTW: The widget api has a load(url, options) method for reloading the widget with a different resource.

Getting song from Soundcloud using widget embedded in own website

1 Answers