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

我为你做了谷歌搜索。有一个非常好的sdk / api for soundcloud，它甚至可以帮助嵌入：https://developers.soundcloud.com/docs/api/sdks#embedding

使用它非常容易嵌入soundcloud链接：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键即可触发“更改”事件。

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

1 个答案: