Spotify Login ?

[Walk Me Home]

Hallöchen,

da ich mich seit mehreren Tagen damit rumschlage wende ich mich mal hier an Euch:

#Und zwar würde ich gerne über die Spotify Api mich bei Spotify einloggen und einen Song abspielen. Also ein kleiner "Player" den ich in eins meiner bestehenden Projekte einbauen wollen würde.

Leider scheitere ich kläglich, da online einfach kein gescheites Tutorial besteht. (Client ID für die APi ist vorhanden) Und die Codes die ich finde und für mein Projekt denke nutzen zu können, funktionieren alle nicht.

Kann mir da jemand weiterhelfen?

Beste Grüße

[DMW007]

Hi,

was hast du denn bisher gemacht bzw. versucht? Ohne konkrete Codeausschnitte und API-Aufrufe können wir schlecht helfen und sagen, warum das nicht funktioniert.

Wenn ich mir die Dokus von existierenden .NET Librarys für die Spotify-API anschaue, sehe ich auch keinerlei Hinweise auf solch eine Funktion. Über die Schnittstelle scheint es nur möglich zu sein, die Wiedergabe auf einem registrierten Spotify-Client (PC, Handy etc) zu starten. Wobei es mich auch gewundert hätte, wenn ein proprietärer Dienst wie Spotify ihre Musik für Drittanbieter abrufbar gestaltet.

Die einzige Alternative, welche ich für dein Ziel sehe, ist das Web Playback SDK. Das ist ein web-basierter Player, der den Spotify-Client quasi fernsteuert. Ist noch recht frisch und befindet sich dementsprechend im Beta-Studium. Wenn du zwingend eine Desktop-Anwendung entwickeln willst, könntest du eine solche HTML-Seite mittels WebBrowser-Control rendern, wenn auch etwas umständlich. Ansonsten bleiben dir nicht viele andere Möglichkeiten, als den Song einzubetten, was aber auch nicht gerade flexibler ist.

[Walk Me Home]

Die Webplayer SDK Version habe ich auch schon ausprobiert. Da habe ich eine Verbindung herstellen können und auch einen Song abspielen lassen. Da würde ich gerne die aktive Device Liste angezeigt haben. Nur leider bekomme ich da immer folgendes angezeigt:

script.js:83 GET https://api.spotify.com/v1/me/player/devices 401
play @ script.js:83
(anonymous) @ script.js:60
(anonymous) @ spotify-player.js:2
f._onEvent @ spotify-player.js:2
f._handleMessages @ spotify-player.js:2
s._receiveMessage @ spotify-player.js:2
script.js:88 {
  "error": {
    "status": 401,
    "message": "No token provided"
  }
}

Wobei ich aber den token soweit mit übergebe:

fetch('https://api.spotify.com/v1/me/player/devices' ,{}, { headersdevice })
  .then(function(response) {
    return response.text();
  }).then(function(text) { 
  	// <!DOCTYPE ....
  	console.log(text); 
  });

hier meine Header Deklartion:

 const headersdevice = {
  Accept: 'application/json',
  'Content-Type': 'application/json',
  getOAuthToken: cb => { cb(_token); },
  Authorization: 'Bearer '  + _token ,
  type: "GET"
};

Nur leider wird mir egal wie ich es verändere die selbe Fehlermeldung angezeigt.

[Walk Me Home]

Hi,

was hast du denn bisher gemacht bzw. versucht? Ohne konkrete Codeausschnitte und API-Aufrufe können wir schlecht helfen und sagen, warum das nicht funktioniert.

Wenn ich mir die Dokus von existierenden .NET Librarys für die Spotify-API anschaue, sehe ich auch keinerlei Hinweise auf solch eine Funktion. Über die Schnittstelle scheint es nur möglich zu sein, die Wiedergabe auf einem registrierten Spotify-Client (PC, Handy etc) zu starten. Wobei es mich auch gewundert hätte, wenn ein proprietärer Dienst wie Spotify ihre Musik für Drittanbieter abrufbar gestaltet.

Die einzige Alternative, welche ich für dein Ziel sehe, ist das Web Playback SDK. Das ist ein web-basierter Player, der den Spotify-Client quasi fernsteuert. Ist noch recht frisch und befindet sich dementsprechend im Beta-Studium. Wenn du zwingend eine Desktop-Anwendung entwickeln willst, könntest du eine solche HTML-Seite mittels WebBrowser-Control rendern, wenn auch etwas umständlich. Ansonsten bleiben dir nicht viele andere Möglichkeiten, als den Song einzubetten, was aber auch nicht gerade flexibler ist.

Nach einiger Herumbastelei habe ich es endlich geschafft, dass mir über die SPotify Web Api die verfügbaren Geräte in der Console angezeigt wird.

Nun würde ich halt gerne etwas genauer damit arbeiten und Beispielsweise nur die IDs herausfiltern. Leider ist mir das bisher nicht gelungen, da bei folgendem Code:

 var newData = JSON.stringify(data.id)
document.getElementById('devices').innerHTML = newData;

Erscheint nur "undefined" wenn es ausgeführt wird.

Ein

 var newData = JSON.stringify(data.id(0))
document.getElementById('devices').innerHTML = newData;

führt nur dazu dass angezeigt wird dass id keine Funktion von Data ist.

In der Console wird folgendes angezeigt (nach console.log(data) )

{devices: Array(2)}
devices: Array(2)
0:
id: "xxxx"
is_active: false
is_private_session: false
is_restricted: false
name: "xxxx"
type: "Computer"
volume_percent: 100
__proto__: Object
1:
id: "xyd"
is_active: false
is_private_session: false
is_restricted: false
name: "abc"
type: "Computer"
volume_percent: 74
__proto__: Object

Kann mir da jemand weiterhelfen?

[DMW007]

"No token provided" ist ein mit dem Authorisierungs-Token, falls jemand ein ähnliches Problem hat.
Dein Id-Problem ist keines der Spotify-API, sondern fehlerhaftes JS. data ist ein Array von Objekten. JSON.stringify macht hier keinen Sinn, da die Daten anscheinend bereits geparst wurden. Wenn sie das nicht wären (d.H. ein JSON-String liegt vor), wäre das die falsche Richtung. JSON.stringify wandelt ein Objekt in JSON um. Zum Parsen der API-Antwort wäre JSON.parse(jsonString) notwendig. Da du keinen Code gepostet hast, muss man der Ausgabe der Variable nach Mutmaßen, dass du bereits zuvor geparst hast und dieser Schritt daher wegfällt.

Dein Array sieht also vereinfacht wie folgt aus:

var data = [

    {

        id: 123, 

        name: 'test1'

    }, {

        id: 124, 

        name: 'test2'

    }

]

Das Aufrufen von data.id ist hier nicht möglich, weil es sich um einen Array handelt. Dies würde nur funktionieren, wenn du ein einzelnes Objekt vorliegen hättest:

var singleObject = {

    id: 123,

    name: 'test1'

}

console.log(singleObject.id)

>> 123

Um die Ids aus dem Array zu extrahieren, benötigst du map (äquivalent zu LINQ's Select aus .NET)

data.map(x => x.id) 



>> Array [ 123, 124 ]

Da es sich um mehrere Ids handelt, bekommst du hier wieder einen Array. Wenn du die im #devices HTML-Element anzeigen lassen willst, kannst du zu Testzwecken einfach mit einem Trennzeichen dort anzeigen:

document.getElementById('devices').innerHTML = data.map(x => x.id).join(',')

Unabhängig davon was genau du machen willst, wird das aber für ein praktisches Nutzungsszenario wahrscheinlich nicht viel bringen. Dafür wird es mehr Sinn machen, wenn du dir HTML-Elemente dynamisch erstellst. Beispielsweise eine Liste, die alle Geräte enthält. Dort kannst du mittels data-Attributen Meta-Infos wie die Id übergeben, um diese dann an anderer Stelle weiterzuverarbeiten. Beispielsweise in einem Event-Handler, der beim Klick auf solch ein Element irgendwas damit macht (Wiedergabe auf diesem Gerät starten/stoppen).