使用输入文本从souncloud的URL链接预览内容

Question

I want to to copy the link https://soundcloud.com/weezer/weezer-king-of-the-world to input box. It needs to show the preview of the link. I have tried using iframe but it didnt work as i wanted. You could use following html code with id and other necessary info for reference

<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

I did the googling for you. There is a very well documented sdk/api for soundcloud, which even helps with the embedding: https://developers.soundcloud.com/docs/api/sdks#embedding

with this its very easy to embbed an soundcloud link: 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> 

i'm not sure why it works because I did not specify a api key, but you should defenetly register a api key for your site.

you may want to change it back to paste, atm just hit enter to trigger the "change" event.