URLからのコンテンツのプレビュー入力テキストを使用したsouncloudのリンク

Question

入力ボックスにリンクhttps://soundcloud.com/weezer/weezer-king-of-the-worldをコピーしたいと思います。リンクのプレビューを表示する必要があります。私はiframeを使用してみましたが、私が望むようにそれは仕事をしませんでした。参照するIDと他の必要な情報を含む次のHTMLコードを使用できます。

<input id="song-link" placeholder="Paste Soundcloud link here" name="song_link" type="text"> 
    </div> 
    <iframe width="100%" height="166" scrolling="no" frameborder="no" src="" id="soundcloud_iframe"></iframe> 
<script type="text/javascript"> 
$('#song-link').on('paste', function() { 
var element = this; 
    setTimeout(function() { 
    var text = $(element).val(); 
    // do something with text 

document.getElementById("soundcloud_iframe").src = text; 
}, 1); 
    }); 
    </script> 

Answer 1

私はあなたのためにグーグルをしました。でも埋め込みで助けてSoundcloud、のために非常によく文書SDK/APIがあります：https://developers.soundcloud.com/docs/api/sdks#embedding

このてSoundcloudリンクをembbedへの非常に簡単で：https://jsfiddle.net/orac4bv5/2/

$('#song-link').change(function() { 
 
    var link = $('#song-link').val(); 
 
    \t \t SC.oEmbed(link, { 
 
    \t element: document.getElementById('putTheWidgetHere') 
 
    \t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script> 
 

 
<input id="song-link" placeholder="Paste Soundcloud link here" name="song_link" type="text"> 
 
<div id="putTheWidgetHere"></div>

私はなぜ私はapiキーを指定していないので、なぜ動作しているのかわかりませんが、あなたのサイトにはapiキーをdefenetly登録する必要があります。

あなたはそれをペーストするように戻したいかもしれません。atmは "change"イベントを引き起こすためにenterを押します。