Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js
const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";
function searchSong() {
let songName = document.getElementById("song-name").value;
fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
headers: {
"Authorization": `Bearer ${ACCESS_TOKEN}`
}
})
.then(response => response.json())
.then(data => {
let songResults = data.tracks.items;
if (songResults.length > 0) {
let songList = document.createElement("ul");
for (let i = 0; i < songResults.length; i++) {
let song = songResults[i];
let songItem = document.createElement("li");
songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;
songList.appendChild(songItem);
}
let songResultsDiv = document.getElementById("song-results");
songResultsDiv.innerHTML = "";
songResultsDiv.appendChild(songList);
} else {
let songResultsDiv = document.getElementById("song-results");
songResultsDiv.innerHTML = "Sorry, no songs found.";
}
})
.catch(error => {
const errorMessage = document.getElementById("error-message");
errorMessage.innerText = error;
});
}
function selectSong(songId) {
fetch("db.php", {
method: "POST",
body: JSON.stringify({songId: songId}),
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert("Song added to the list!");
} else {
alert("Error adding song to the list.");
}
})
.catch(error => {
console.log(error);
});
}
Hier ist dann noch die Index.html:
<!DOCTYPE html>
<html>
<head>
<title>DJ Song Request</title>
<script src="script.js"></script>
</head>
<body>
<h1>DJ Song Request</h1>
<form>
<label for="song-name">Enter song name:</label>
<input type="text" id="song-name" name="song-name">
<button type="submit" onclick="searchSong()">Search</button>
</form>
<div id="song-results"></div>
</body>
</html>
Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D
