Vorschau des Inhalts von URL-Link von souncloud mit Eingabetext

Ich möchte den Link https://soundcloud.com/weezer/weezer-king-of-the-world in das Eingabefeld zu kopieren. Es muss die Vorschau des Links angezeigt werden. Ich habe versucht, iframe zu verwenden, aber es hat nicht funktioniert, wie ich wollte. Sie könnten folgenden HTML-Code mit ID und andere notwendige Informationen als ReferenzVorschau des Inhalts von URL-Link von souncloud mit Eingabetext

<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>

Quelle

2016-07-11 Saugat Thapa

soundcloud stellt einen eingebetteten Code für html zur Verfügung, den Sie möglicherweise stattdessen verwenden möchten, andernfalls könnten Sie die Seite rendern (was nicht trivial ist), auch sollten Sie vorsichtig sein, wenn Sie das dürfen! – fehrlich

Ich habe keine Idee, die Seite zu rendern. Du könntest die Upload-Funktion von talenthouse song verwenden, um zu verstehen, was ich wirklich meinte. @XzenTorXz –

Sie verwenden die eingebettete Version von Soundcloud (klicken Sie auf teilen und einbetten), wenn Sie versucht haben, sollten Sie auch den Javascript-Code und iframe Code – fehrlich

Ich habe das googeln für Sie. Es gibt einen sehr gut dokumentiert sdk/api für Soundcloud, die auch bei der Einbettung hilft: https://developers.soundcloud.com/docs/api/sdks#embedding

damit sein sehr einfach, einen Soundcloud Link zu 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>

i Ich bin mir nicht sicher, warum es funktioniert, weil ich keinen API-Schlüssel angegeben habe, aber Sie sollten einen API-Schlüssel für Ihre Website defenely registrieren.

Vielleicht möchten Sie es wieder zu Paste, atm ändern nur drücken Sie die Eingabetaste, um das "Change" -Ereignis auszulösen.

Quelle

2016-07-11 18:04:14 fehrlich

Vorschau des Inhalts von URL-Link von souncloud mit Eingabetext

Antwort

Verwandte Themen