도움이 필요해요!!!

사용자가 노래 제목과 아티스트를 입력하는 Spotify 요청 시스템을 만들려고 합니다. 그런 다음 API는 결과를 반환하고 그 결과에서 사용자는 올바른 트랙을 선택하여 Spotify 대기열에 추가할 수 있습니다. CSS/HTML 및 JS(인증 코드 제외)를 포함했습니다.

HTML

`

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});
}
return response.json();
})
.then(데이터 => {
const searchResultsDiv = document.getElementById('searchResults');
searchResultsDiv.innerHTML = data.tracks.items.map(track =>

${track.name} by ${track.artists.map(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});
가져오기(https://api.spotify.com/v1/me/player/queue?uri=${selectedTrack}, {
메소드: 'POST',
헤더: {
'승인': 전달자 ${token}
}
})
.then(응답 => {
console.log('API 응답:', response); // 전체 응답을 기록합니다
if (!response.ok) {
새로운 오류 발생(HTTP 오류! 상태: ${response.status});
}
response.json()을 반환합니다.
})
.then(데이터 => {
console.log('트랙이 대기열에 추가되었습니다!', data);
})
.catch(error => console.error('큐에 트랙을 추가하는 중 오류 발생:', error));
});`

작동하지 않는데 제가 올바르게 코딩했는지 누군가 확인해 주실 수 있나요

위 내용은 도움이 필요해요!!!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!