使用嵌入到自己網站的小部件從Soundcloud獲取歌曲

我正在開發使用SoundCloud API的應用程序。我正在使用框架在我的頁面上使用soundcloud小部件。我做了一個搜索欄，用戶可以在其中輸入一個輸入（如歌手的名字），並基於該輸入我試圖格式化一個URL，將從SoundCloud中取回曲目或播放列表（任何有效的）使用嵌入到自己網站的小部件從Soundcloud獲取歌曲

Right現在 - 由於格式無效，無法獲取網址 - 請建議最佳開放式網址格式，以便用戶可以搜索任何歌手/歌曲以獲取正確的網址（然後將其添加到播放器中）。

代碼：

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

來源

2015-12-13 Medina Ali

您當前的代碼工作，只要用戶將確切的藝術家的用戶名和斜線查詢。 fiddle

我建議使用soundcloud跟蹤api來查詢和顯示用戶可以選擇的匹配結果列表。

順便說一句：小部件api有一個load(url, options)用不同資源重新加載小部件的方法。

來源

2015-12-14 10:19:39 Hartger

謝謝你的迴應。你可以舉一個使用負載的例子（url，options） –

[widget.load（url）']的示例（http://jsfiddle.net/ftwJr/42/） – Hartger

@MedinaAli這是否解決了你的問題？ – Hartger

使用嵌入到自己網站的小部件從Soundcloud獲取歌曲

回答

相關問題