使用輸入文本從souncloud的URL鏈接預覽內容

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

與此非常容易嵌入音雲鏈接： https ://jsfiddle.net/orac4bv5/2/

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

 <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密鑰。

您可能需要將其更改回粘貼，atm只需按Enter即可觸發“更改”事件。