需要帮助！

我正在尝试创建一个 Spotify 请求系统，用户可以在其中输入歌曲名称和艺术家。然后 API 返回结果，用户可以根据结果选择正确的曲目并将其添加到 Spotify 队列中。我已经包含了 CSS/HTML 和 JS（减去授权代码）。

HTML

`

Spotify 音乐请求系统

Spotify 音乐请求系统

艺术家：

        <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(响应 => {
if (!response.ok) {
抛出新错误（HTTP 错误！状态：${response.status}）；
}
返回response.json();
})
.then(数据 => {
const searchResultsDiv = document.getElementById('searchResults');
searchResultsDiv.innerHTML = data.tracks.items.map(track =>

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

）。加入（''）;
document.getElementById('addToQueue').disabled = false;
})
.catch(error => console.error('搜索时出错：', error));
});

document.getElementById('addToQueue').addEventListener('click', function() {
const selectedTrack = document.querySelector('input[name="track"]:checked').value;
console.log(选定的曲目 URI: ${selectedTrack});
fetch(https://api.spotify.com/v1/me/player/queue?uri=${selectedTrack}, {
方法：'POST'，
标题：{
“授权”：不记名${token}
}
})
.then(响应 => {
console.log('API 响应：', 响应); // 记录整个响应
if (!response.ok) {
抛出新错误（HTTP 错误！状态：${response.status}）；
}
返回response.json();
})
.then(数据 => {
console.log('轨迹已添加到队列中！', data);
})
.catch(error => console.error('将曲目添加到队列时出错：', error));
});`

有人可以检查一下我的编码是否正确，因为它不起作用

以上是需要帮助！的详细内容。更多信息请关注PHP中文网其他相关文章！