HILFE ERFORDERLICH!!!

Ich versuche, ein Spotify-Anfragesystem zu erstellen, bei dem ein Benutzer den Gesangstitel und den Künstler eingibt. Die API gibt dann die Ergebnisse zurück und aus diesen Ergebnissen kann der Benutzer dann den richtigen Titel auswählen und ihn zur Spotify-Warteschlange hinzufügen. Ich habe CSS/HTML und JS (ohne Auth-Codes) eingefügt.

HTML

`

Spotify-Musikanforderungssystem

Spotify Music Request System

Künstler:

        <label for="song">Song Title:</label>
        <input type="text">
<p><br>
`</p>

<p><strong>CSS</strong></p>

<p>`body {<br>
  font-family: Arial, sans-serif;<br>
  margin: 0;<br>
  padding: 0;<br>
  background-image: url('Image preview.png');<br>
  background-size: contain; /* Ensures the image fits within the browser window <em>/<br>
  background-repeat: no-repeat; /</em> Prevents the image from repeating <em>/<br>
  background-position: center; /</em> Centers the image on the page <em>/<br>
  background-attachment: fixed; /</em> Ensures the background stays fixed while scrolling */<br>
  display: flex;<br>
  justify-content: center;<br>
  align-items: center;<br>
  height: 100vh;<br>
}</p>

<h2>
  
  
  results {
</h2>

<p>margin-top: 20px;<br>
}</p>

<p>.track {<br>
  padding: 10px;<br>
  border: 1px solid #ddd;<br>
  cursor: pointer;<br>
  margin-bottom: 5px;<br>
}</p>

<p>.track:hover {<br>
  background-color: #f9f9f9;<br>
}</p>

<p>.request {<br>
  text-align: center;<br>
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */<br>
  padding: 20px;<br>
  border-radius: 10px;<br>
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);<br>
  width: 80%;<br>
  max-width: 500px;<br>
}</p>

<p>.songSearchForm {<br>
  margin: auto;<br>
  width: 100%;<br>
  padding: 10px;<br>
}</p>

<p>h1 {<br>
  margin-bottom: 20px;<br>
}</p>

<p>form {<br>
  display: flex;<br>
  flex-direction: column;<br>
  gap: 10px;<br>
}</p>

<p>label, input, button {<br>
  margin: 5px 0;<br>
}<br>
`</p>

<p><strong>JS</strong></p>

<p>`const token = 'MY-ACCESS-TOKEN'; // Replace with your new access token</p>

<p>document.getElementById('songSearchForm').addEventListener('submit', function(e) { <br>
    e.preventDefault(); </p>

<pre class="brush:php;toolbar:false">const artist = document.getElementById('artist').value; 
const song = document.getElementById('song').value; 
const query = `track:${song} artist:${artist}`; 

fetch(`https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=track`, { 
headers: { 'Authorization': `Bearer ${token}` 

}
})
.then(response => {
if (!response.ok) {
throw new Error(HTTP error! Status: ${response.status});
}
return Response.json();
})
.then(data => {
const searchResultsDiv = document.getElementById('searchResults');
searchResultsDiv.innerHTML = data.tracks.items.map(track =>

${track.name} von ${track.artists.map(artist => artist.name).join(', ')}

).verbinden('');
document.getElementById('addToQueue').disabled = false;
})
.catch(error => console.error('Fehler während der Suche:', Fehler));
});

document.getElementById('addToQueue').addEventListener('click', function() {
const selectedTrack = document.querySelector('input[name="track"]:checked').value;
console.log(Ausgewählter Track-URI: ${selectedTrack});
fetch(https://api.spotify.com/v1/me/player/queue?uri=${selectedTrack}, {
Methode: 'POST',
Überschriften: {
'Autorisierung': Inhaber ${token}
}
})
.then(response => {
console.log('API-Antwort:', Antwort); // Gesamte Antwort protokollieren
if (!response.ok) {
throw new Error(HTTP error! Status: ${response.status});
}
return Response.json();
})
.then(data => {
console.log('Track zur Warteschlange hinzugefügt!', data);
})
.catch(error => console.error('Fehler beim Hinzufügen eines Titels zur Warteschlange:', Fehler));
});`

Könnte bitte jemand überprüfen, ob ich richtig codiert habe, da es nicht funktioniert

Das obige ist der detaillierte Inhalt vonHILFE ERFORDERLICH!!!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!