BANTUAN DIPERLUKAN!!!

Saya cuba mencipta Sistem permintaan Spotify di mana pengguna memasukkan tajuk nyanyian dan artis. API kemudian mengembalikan hasil dan daripada hasil itu pengguna kemudian boleh memilih trek yang betul dan menambahkannya pada baris gilir spotify. Saya telah memasukkan CSS/HTML dan JS (tolak kod Pengesahan).

HTML

`

Sistem Permintaan Muzik Spotify

Sistem Permintaan Muzik Spotify

Artis:

        <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(respon => {
jika (!respon.ok) {
buang Ralat baharu(Ralat HTTP! Status: ${response.status});
}
return response.json();
})
.then(data => {
const searchResultsDiv = document.getElementById('searchResults');
searchResultsDiv.innerHTML = data.tracks.items.map(track =>

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

).menyertai('');
document.getElementById('addToQueue').disabled = palsu;
})
.catch(error => console.error('Ralat semasa carian:', ralat));
});

document.getElementById('addToQueue').addEventListener('click', function() {
const selectedTrack = document.querySelector('input[name="track"]:checked').value;
console.log(URI trek yang dipilih: ${selectedTrack});
fetch(https://api.spotify.com/v1/me/player/queue?uri=${selectedTrack}, {
kaedah: 'POST',
pengepala: {
'Kebenaran': Pembawa ${token}
}
})
.then(respon => {
console.log('API Response:', response); // Log keseluruhan respons
jika (!respon.ok) {
buang Ralat baharu(Ralat HTTP! Status: ${response.status});
}
return response.json();
})
.then(data => {
console.log('Track ditambahkan pada baris gilir!', data);
})
.catch(error => console.error('Ralat menambah trek pada baris gilir:', ralat));
});`

Bolehkah seseorang menyemak sama ada saya telah mengekod dengan betul kerana ia tidak berfungsi

Atas ialah kandungan terperinci BANTUAN DIPERLUKAN!!!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!