js怎么读取歌词

JavaScript读取歌词的几种方法有：读取本地文件、从服务器获取、解析嵌入式歌词文件、使用API。通过读取本地文件和从服务器获取的方式，可以方便地获取歌词数据，而解析嵌入式歌词文件和使用API则提供了更灵活和动态的解决方案。下面将详细介绍其中一个方法——使用API来读取歌词。

使用API读取歌词通常是最便捷的方式，因为它不仅能动态获取歌词，还能根据歌曲信息自动匹配歌词。通过调用第三方歌词API，可以轻松获取歌词数据，并将其展示在网页上。下面是一个简单的示例，展示如何使用API获取歌词并在网页上显示。

async function fetchLyrics(artist, song) {
    const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
    if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    return data.lyrics;
}
document.getElementById('fetchButton').addEventListener('click', async () => {
    const artist = document.getElementById('artist').value;
    const song = document.getElementById('song').value;
    try {
        const lyrics = await fetchLyrics(artist, song);
        document.getElementById('lyrics').innerText = lyrics;
    } catch (error) {
        console.error('Error fetching lyrics:', error);
    }
});

接下来，我们将详细探讨其他几种方法，并深入了解如何优化和增强歌词读取功能。

一、读取本地文件

1、使用FileReader API

FileReader API允许网页应用读取本地文件内容。用户可以通过文件输入选择器选择本地歌词文件，并使用FileReader读取文件内容。

<input type="file" id="fileInput">
<pre id="lyricsDisplay"></pre>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('lyricsDisplay').innerText = e.target.result;
        };
        reader.readAsText(file);
    }
});
</script>

2、解析本地文件内容

读取文件后，可以进一步解析文件内容。例如，如果歌词文件是一个LRC文件，可以提取时间戳和歌词文本。

function parseLRC(lrc) {
    const lines = lrc.split('n');
    const lyrics = lines.map(line => {
        const match = line.match(/[(d{2}:d{2}.d{2})](.*)/);
        if (match) {
            return { time: match[1], text: match[2] };
        } else {
            return null;
        }
    }).filter(item => item !== null);
    return lyrics;
}

二、从服务器获取

1、使用Fetch API

Fetch API是现代浏览器提供的一种替代XMLHttpRequest的方式，用于执行网络请求。可以通过Fetch API从服务器获取歌词文件。

async function fetchLyricsFromServer(url) {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
    }
    const lyrics = await response.text();
    return lyrics;
}
fetchLyricsFromServer('https://example.com/lyrics.txt')
    .then(lyrics => {
        document.getElementById('lyricsDisplay').innerText = lyrics;
    })
    .catch(error => {
        console.error('Error fetching lyrics:', error);
    });

2、处理歌词文件

获取歌词文件后，可以进一步处理歌词数据。例如，将歌词按照时间戳进行排序，方便后续显示。

function processLyrics(lyrics) {
    const lines = lyrics.split('n');
    const parsedLyrics = lines.map(line => {
        const match = line.match(/[(d{2}:d{2}.d{2})](.*)/);
        if (match) {
            return { time: match[1], text: match[2] };
        } else {
            return null;
        }
    }).filter(item => item !== null);
    return parsedLyrics.sort((a, b) => a.time.localeCompare(b.time));
}

三、解析嵌入式歌词文件

1、解析LRC文件

LRC文件是一种常见的歌词文件格式，其中包含时间戳和歌词文本。可以使用正则表达式解析LRC文件内容。

function parseLRC(lrc) {
    const lines = lrc.split('n');
    const lyrics = lines.map(line => {
        const match = line.match(/[(d{2}:d{2}.d{2})](.*)/);
        if (match) {
            return { time: match[1], text: match[2] };
        } else {
            return null;
        }
    }).filter(item => item !== null);
    return lyrics;
}
const lrc = `[00:12.00]Line 1 lyrics
[00:15.00]Line 2 lyrics`;
const parsedLyrics = parseLRC(lrc);
console.log(parsedLyrics);

2、显示解析后的歌词

解析LRC文件后，可以将歌词按照时间戳显示在网页上，并同步播放进度。

<ul id="lyricsList"></ul>
<script>
function displayLyrics(lyrics) {
    const lyricsList = document.getElementById('lyricsList');
    lyrics.forEach(line => {
        const li = document.createElement('li');
        li.dataset.time = line.time;
        li.innerText = line.text;
        lyricsList.appendChild(li);
    });
}
const lrc = `[00:12.00]Line 1 lyrics
[00:15.00]Line 2 lyrics`;
const parsedLyrics = parseLRC(lrc);
displayLyrics(parsedLyrics);
</script>

四、使用API

1、调用第三方歌词API

使用第三方歌词API可以动态获取歌词数据，并根据歌曲信息自动匹配歌词。

async function fetchLyrics(artist, song) {
    const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
    if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    return data.lyrics;
}
document.getElementById('fetchButton').addEventListener('click', async () => {
    const artist = document.getElementById('artist').value;
    const song = document.getElementById('song').value;
    try {
        const lyrics = await fetchLyrics(artist, song);
        document.getElementById('lyrics').innerText = lyrics;
    } catch (error) {
        console.error('Error fetching lyrics:', error);
    }
});

2、处理API返回的数据

获取到歌词数据后，可以根据需要对数据进行处理。例如，可以将歌词数据转换为HTML格式，并显示在网页上。

function displayLyrics(lyrics) {
    const lyricsContainer = document.getElementById('lyrics');
    lyricsContainer.innerText = lyrics;
}
async function fetchLyrics(artist, song) {
    const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
    if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    return data.lyrics;
}
document.getElementById('fetchButton').addEventListener('click', async () => {
    const artist = document.getElementById('artist').value;
    const song = document.getElementById('song').value;
    try {
        const lyrics = await fetchLyrics(artist, song);
        displayLyrics(lyrics);
    } catch (error) {
        console.error('Error fetching lyrics:', error);
    }
});

五、优化和增强功能

1、缓存歌词数据

为了提高性能，可以将歌词数据缓存起来，避免重复请求。可以使用LocalStorage或IndexedDB来缓存歌词数据。

function cacheLyrics(artist, song, lyrics) {
    localStorage.setItem(`${artist}-${song}`, lyrics);
}
function getCachedLyrics(artist, song) {
    return localStorage.getItem(`${artist}-${song}`);
}
async function fetchLyrics(artist, song) {
    const cachedLyrics = getCachedLyrics(artist, song);
    if (cachedLyrics) {
        return cachedLyrics;
    }
    const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
    if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    cacheLyrics(artist, song, data.lyrics);
    return data.lyrics;
}

2、同步歌词和音乐播放

为了同步显示歌词和音乐播放，可以使用HTML5 Audio API和JavaScript计时器，将歌词与音乐播放进度同步。

<audio id="audioPlayer" controls>
    <source src="song.mp3" type="audio/mpeg">
</audio>
<ul id="lyricsList"></ul>
<script>
function displayLyrics(lyrics) {
    const lyricsList = document.getElementById('lyricsList');
    lyrics.forEach(line => {
        const li = document.createElement('li');
        li.dataset.time = line.time;
        li.innerText = line.text;
        lyricsList.appendChild(li);
    });
}
function syncLyrics(audio, lyrics) {
    audio.addEventListener('timeupdate', () => {
        const currentTime = audio.currentTime;
        lyrics.forEach(line => {
            const timeParts = line.time.split(':');
            const timeInSeconds = parseInt(timeParts[0]) * 60 + parseFloat(timeParts[1]);
            if (currentTime >= timeInSeconds) {
                document.querySelectorAll('#lyricsList li').forEach(li => {
                    if (li.dataset.time === line.time) {
                        li.classList.add('highlight');
                    } else {
                        li.classList.remove('highlight');
                    }
                });
            }
        });
    });
}
const lrc = `[00:12.00]Line 1 lyrics
[00:15.00]Line 2 lyrics`;
const parsedLyrics = parseLRC(lrc);
displayLyrics(parsedLyrics);
syncLyrics(document.getElementById('audioPlayer'), parsedLyrics);
</script>

六、总结

JavaScript读取歌词的几种方法提供了灵活多样的解决方案。通过读取本地文件、从服务器获取、解析嵌入式歌词文件和使用API，可以满足不同应用场景的需求。为了提高用户体验，可以优化和增强功能，例如缓存歌词数据和同步歌词与音乐播放。通过这些方法和技巧，开发者可以轻松实现歌词读取和显示功能，提升网页应用的用户体验。