2013-03-04 5 views
5

Ich habe gerade angefangen, JavaScript zu lernen und als meinen ersten Versuch möchte ich einen benutzerdefinierten Audio-Player erstellen, der die audio-CD von audio als Quelle für Musik verwendet.Wie benutzt man Soundcloud api um in den html5 Audio Player zu streamen?

Bisher ist es das, was ich habe ein:

<!DOCTYPE html> 
<html> 
<head> 



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://connect.soundcloud.com/sdk.js"></script> 

<script> 
window.onload = function() { 
SC.initialize({ 
    client_id: '10e27db0dacd00954d7160b4c092a6e2' //Demo ID 
}); 

SC.stream("/tracks/75868018", function(sound){ 
    $("audio-test").attr("src", sound.uri); 
}); 
}; 
</script> 



</head> 
<body> 

<audio id="audio-test" controls></audio> 

</body> 
</html> 
+0

Benötigen Sie ein wenig mehr als das - können Sie den JavaScript-Steuercode in einen Pastebin legen, damit wir einen Blick darauf werfen können? – CodeMoose

+0

@CodeMoose hinzugefügt, auch Link zum Blogpost, den ich für diesen html5-Player verwende. – Ilja

+0

Perfekt, danke! – CodeMoose

Antwort

7

Ok, habe es herausgefunden. Das Problem war das .stream() - es soll einen vorkompilierten Player liefern, der von der .play() - Funktion bereitgestellt wird. Wenn Sie stattdessen SC.get() verwenden, können Sie auf die Eigenschaften des Tracks zugreifen und ihn in ein Audio-Tag einbetten. Siehe meinen Code: http://jsfiddle.net/LpzpK/6/

Es gibt immer noch ein Problem - die Tracks sind als 401 verboten markiert, so dass der Spieler immer nur "Loading". Sie müssen einen Weg finden, um die Titel, die Sie spielen möchten, öffentlich zu machen.

+0

Vielen Dank für die großartige Hilfe, ich glaube, ich habe gesehen Ein Blick auf den Umgang mit 401 in der Dokumentation verboten, werde ich versuchen, es herauszufinden;) – Ilja

+4

hat es funktioniert! muss nur an/solid? client_id = YOUR_ID an sound.uri;)) thnx wieder um Hilfe! – Ilja

+0

Kein Problem - viel Spaß! – CodeMoose

2

Auf einen flüchtigen Blick sieht es aus wie alle Soundcloud API-Objekte mit einer URI-Eigenschaft kommen, die direkt auf die Ressource verbindet. In Ihrem Fall wäre es sound.uri.

Oben auf Ihrem Player-Code haben Sie ein <audio>-Tag - ich denke, Sie werden es src auf den URI-Wert für den Track, den Sie spielen möchten. Sie können dies tun, indem Sie eine ID, um es angebracht und

SC.stream("/tracks/293", function(sound){ 
    $("[audio_id]").attr("src", sound.uri); 
}); 

Aufruf ersetzt [audio_id] mit dem, was ID Sie für den Tag wählen. Sie werden wahrscheinlich immer noch etwas tun müssen, um den Player jedes Mal neu zu initialisieren/neu zu starten, aber das wird Ihnen hoffentlich helfen. Lass es mich wissen, wie es funktioniert!

+0

Versuchte es scheint nicht zu funktionieren. Ich habe meinen Player dramatisch vereinfacht, um alles besser zu verstehen, aber ich kann es immer noch nicht zur Arbeit bringen, hier ist mein neuer Code http://pastebin.com/A76pgjMf – Ilja

+0

Ich werde das in eine Geige werfen und damit herumspielen - zurück zu dir in einem Bit – CodeMoose

+0

Ich bekomme nicht die Callback-Funktion zu laufen. Müssen Sie etwas tun, um das Objekt zu instanziieren (var SC = new soundcloud();) oder etwas? – CodeMoose

Verwandte Themen