Genius API 在 HTML 中显示歌词

Question

如何使用 Genius Lyrics API 获取 HTML 格式的 all Too well（10 分钟版本）歌词？ 网址：https://genius-song-lyrics1.p.rapidapi.com/search/

HTML代码：

<div id="choices">
    <button class="integration-btn lyrics-btn">
        <p>Lyrics</p>
    </button>
    <button class="integration-btn">
        <p>Other Albums</p>
    </button>
    <button class="integration-btn">
        <p>Related Artists</p>
    </button>
</div>
<pre id="lyrics-content"></pre>

我想在歌词内容中显示输出（使用javascript），但我不知道该怎么做...... 我需要做什么才能获取歌曲的歌词？

Answer 1

<div id="choices">
    <button class="integration-btn lyrics-btn">
        <p>Lyrics</p>
    </button>
</div>
<pre id="lyrics-content"></pre>

<script>
    const lyricsButton = document.querySelector('.lyrics-btn');
    const lyricsContent = document.getElementById('lyrics-content');

    lyricsButton.addEventListener('click', async () => {
        try {
            const songTitle = 'Name of the song';
            const response = await fetch(`https://genius-song-lyrics1.p.rapidapi.com/search?q=${songTitle}`, {
                method: 'GET',
                headers: {
                    'X-RapidAPI-Key': 'YOUR_RAPIDAPI_KEY'
                }
            });

            if (!response.ok) {
                throw new Error('Error API request');
            }

            const data = await response.json();
            if (data.response.hits.length > 0) {
                const lyrics = data.response.hits[0].result.lyrics;
                lyricsContent.textContent = lyrics;
            } else {
                lyricsContent.textContent = 'No lyrics found.';
            }
        } catch (error) {
            console.error('Errore:', error);
            lyricsContent.textContent = 'Error fetching lyrics';
        }
    });
</script>

请记住将此 JavaScript 代码包含在您的 HTML 文档中，最好包含在结束标签之前的标签内。另外，请确保您的 API 密钥保持安全，并且不会在代码中公开暴露。