Question

我正在开发一个使用SoundCloud API的应用程序。我正在使用框架在我的页面上显示soundcloud小部件。我创建了一个搜索栏，用户可以在其中输入输入（例如歌手名称），并根据该输入我尝试格式化一个URL，该URL将从SoundCloud（任何可行的）中检索曲目或播放列表

现在 - 由于格式无效而无法获取网址 - 请提示最佳的开放式网址格式，以便用户可以搜索任何歌手/歌曲以获取正确的网址（然后将其添加到播放器中））。

代码：

EJS文件：

    <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文件：

    $(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);   
    });
    });

Answer 1

只要用户在查询中添加确切的艺术家用户名和斜杠，您当前的代码就会起作用。 fiddle

我建议使用soundcloud track api查询并显示用户可以选择的匹配结果列表。

BTW：小部件api有一个load(url, options)方法，用于使用不同的资源重新加载小部件。

使用嵌入在自己网站中的小部件从Soundcloud获取歌曲

1 个答案: