助けが必要です!!!

ユーザーが曲のタイトルとアーティストを入力する 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(response => {
if (!response.ok) {
throw new Error(HTTP エラー! ステータス: ${response.status});
}
応答.json() を返します。
})
.then(データ => {
const searchResultsDiv = document.getElementById('searchResults');
searchResultsDiv.innerHTML = data.tracks.items.map(track =>

${track.name} by ${track.artists.map(artist =>artists.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(response => {
console.log('API レスポンス:', レスポンス); // レスポンス全体をログに記録します
if (!response.ok) {
throw new Error(HTTP エラー! ステータス: ${response.status});
}
応答.json() を返します。
})
.then(データ => {
console.log('トラックがキューに追加されました!', data);
})
.catch(error => console.error('トラックをキューに追加中にエラー:', error));
});`

機能しないので、誰かが正しくコーディングしたかどうかを確認してもらえますか

以上が助けが必要です!!!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。