AIDE BESOIN!!!

J'essaie de créer un système de requête Spotify dans lequel un utilisateur saisit le titre du chant et l'artiste. l'API renvoie ensuite les résultats et à partir de ces résultats, l'utilisateur peut ensuite sélectionner la bonne piste et l'ajouter à la file d'attente Spotify. J'ai inclus le CSS/HTML et le JS (moins les codes d'authentification).

HTML

`

Système de demande de musique Spotify

Système de demande de musique Spotify

Artiste :

        <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(réponse => {
si (!response.ok) {
lancer une nouvelle erreur (erreur HTTP ! Statut : ${response.status});
}
return réponse.json();
})
.then(data => {
const searchResultsDiv = document.getElementById('searchResults');
searchResultsDiv.innerHTML = data.tracks.items.map(track =>

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

).rejoindre('');
document.getElementById('addToQueue').disabled = false;
})
.catch(error => console.error('Erreur lors de la recherche :', erreur));
});

document.getElementById('addToQueue').addEventListener('click', function() {
const selectedTrack = document.querySelector('input[name="track"]:checked').value;
console.log (URI de la piste sélectionnée : ${selectedTrack} );
récupérer (https://api.spotify.com/v1/me/player/queue?uri=${selectedTrack}, {
méthode : 'POST',
en-têtes : {
'Autorisation' : Porteur ${token}
}
})
.then(réponse => {
console.log('Réponse API :', réponse); // Enregistrez l'intégralité de la réponse
si (!response.ok) {
lancer une nouvelle erreur (erreur HTTP ! Statut : ${response.status});
}
return réponse.json();
})
.then(data => {
console.log('Piste ajoutée à la file d'attente !', data);
})
.catch(error => console.error('Erreur lors de l'ajout de la piste à la file d'attente :', erreur));
});`

Quelqu'un pourrait-il vérifier si j'ai codé correctement car cela ne fonctionne pas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!