js如何获得音频的歌词

JS如何获得音频的歌词，主要通过解析嵌入在音频文件中的元数据、调用API获取歌词数据、手动创建歌词文件。其中，调用API获取歌词数据是最常见且高效的方法。许多音乐服务提供商，如Spotify、Genius等，都提供API接口，允许开发者通过HTTP请求获取歌词数据。接下来我们将详细介绍这三种方法，并探讨如何实现它们。

一、解析嵌入在音频文件中的元数据

音频文件通常包含多种元数据，如歌曲标题、艺术家、专辑封面等。有些文件还会嵌入歌词信息。解析这些元数据需要使用特定的库和工具。

1、使用ID3标签

ID3标签是MP3文件中常用的元数据格式。JavaScript中可以使用专门的库来解析ID3标签，从而获取嵌入的歌词。

1.1、引入ID3库

首先，需要引入一个ID3解析库，如jsmediatags：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>

1.2、解析音频文件

然后，使用该库解析音频文件并获取歌词信息：

jsmediatags.read(file, {
  onSuccess: function(tag) {
    const lyrics = tag.tags.lyrics ? tag.tags.lyrics.lyrics : 'No lyrics found';
    console.log(lyrics);
  },
  onError: function(error) {
    console.log(error);
  }
});

这种方法的优点是可以直接从文件中获取歌词，无需额外的API请求，但缺点是并不是所有音频文件都嵌入了歌词。

二、调用API获取歌词数据

调用API获取歌词数据是最常见且高效的方法。许多音乐服务提供商都提供API接口，允许开发者通过HTTP请求获取歌词数据。

1、选择API提供商

常见的歌词API提供商有：

Genius API
Musixmatch API
Lyrics.ovh API

1.1、Genius API

Genius API是一个强大的歌词服务，提供了丰富的歌词数据。使用Genius API需要先注册并获取API密钥。

1.2、Musixmatch API

Musixmatch API也提供了丰富的歌词数据，同时支持多种语言。使用Musixmatch API同样需要注册并获取API密钥。

2、调用API获取歌词

以Genius API为例，以下是获取歌词的步骤：

2.1、注册并获取API密钥

首先，前往Genius API官网注册并获取API密钥。

2.2、发送HTTP请求

然后，使用JavaScript发送HTTP请求获取歌词数据：

const accessToken = 'YOUR_GENIUS_API_TOKEN';
const songTitle = 'song title';
const artistName = 'artist name';
fetch(`https://api.genius.com/search?q=${songTitle} ${artistName}`, {
  headers: {
    'Authorization': `Bearer ${accessToken}`
  }
})
  .then(response => response.json())
  .then(data => {
    const lyricsPath = data.response.hits[0].result.path;
    return fetch(`https://genius.com${lyricsPath}`)
      .then(response => response.text())
      .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const lyrics = doc.querySelector('.lyrics').innerText;
        console.log(lyrics);
      });
  })
  .catch(error => {
    console.log(error);
  });

这种方法的优点是可以获取到最新、最准确的歌词数据，缺点是需要依赖外部服务，并且可能会有使用限制。

三、手动创建歌词文件

手动创建歌词文件是另一种获取歌词的方法。这种方法适用于无法通过解析元数据或调用API获取歌词的情况。

1、创建LRC文件

LRC文件是一种常见的歌词文件格式，包含了时间戳和对应的歌词文本。以下是一个简单的LRC文件示例：

[00:12.00]Line 1 lyrics
[00:17.20]Line 2 lyrics
[00:21.10]Line 3 lyrics

2、读取LRC文件

使用JavaScript读取并解析LRC文件：

fetch('path/to/lyrics.lrc')
  .then(response => response.text())
  .then(data => {
    const lines = data.split('n');
    const lyrics = lines.map(line => {
      const match = line.match(/[(d{2}):(d{2}.d{2})](.*)/);
      return match ? { time: parseFloat(match[1]) * 60 + parseFloat(match[2]), text: match[3] } : null;
    }).filter(Boolean);
    console.log(lyrics);
  })
  .catch(error => {
    console.log(error);
  });

这种方法的优点是完全自主，不受外部服务限制，缺点是需要手动创建和管理歌词文件。

四、结合多种方法实现完整功能

在实际应用中，可以结合多种方法实现获取歌词的完整功能。以下是一个综合示例：

function getLyrics(file, songTitle, artistName) {
  // 尝试解析嵌入的元数据
  jsmediatags.read(file, {
    onSuccess: function(tag) {
      const lyrics = tag.tags.lyrics ? tag.tags.lyrics.lyrics : null;
      if (lyrics) {
        console.log('Lyrics from metadata:', lyrics);
      } else {
        // 如果元数据中没有歌词，尝试调用API获取
        fetchLyricsFromAPI(songTitle, artistName);
      }
    },
    onError: function(error) {
      console.log(error);
      // 如果解析元数据失败，尝试调用API获取
      fetchLyricsFromAPI(songTitle, artistName);
    }
  });
}
function fetchLyricsFromAPI(songTitle, artistName) {
  const accessToken = 'YOUR_GENIUS_API_TOKEN';
  fetch(`https://api.genius.com/search?q=${songTitle} ${artistName}`, {
    headers: {
      'Authorization': `Bearer ${accessToken}`
    }
  })
    .then(response => response.json())
    .then(data => {
      const lyricsPath = data.response.hits[0].result.path;
      return fetch(`https://genius.com${lyricsPath}`)
        .then(response => response.text())
        .then(html => {
          const parser = new DOMParser();
          const doc = parser.parseFromString(html, 'text/html');
          const lyrics = doc.querySelector('.lyrics').innerText;
          console.log('Lyrics from API:', lyrics);
        });
    })
    .catch(error => {
      console.log(error);
      // 如果API获取失败，尝试读取本地LRC文件
      fetchLyricsFromLRC();
    });
}
function fetchLyricsFromLRC() {
  fetch('path/to/lyrics.lrc')
    .then(response => response.text())
    .then(data => {
      const lines = data.split('n');
      const lyrics = lines.map(line => {
        const match = line.match(/[(d{2}):(d{2}.d{2})](.*)/);
        return match ? { time: parseFloat(match[1]) * 60 + parseFloat(match[2]), text: match[3] } : null;
      }).filter(Boolean);
      console.log('Lyrics from LRC:', lyrics);
    })
    .catch(error => {
      console.log(error);
    });
}
// 示例调用
const file = document.querySelector('input[type="file"]').files[0];
const songTitle = 'song title';
const artistName = 'artist name';
getLyrics(file, songTitle, artistName);

通过结合解析元数据、调用API和读取LRC文件的方法，可以最大限度地确保获取到歌词数据。

五、其他注意事项

在实际开发中，还需注意以下几点：

1、处理异步操作

获取歌词涉及多个异步操作，如文件读取、HTTP请求等。需要合理处理异步操作，确保代码逻辑顺序正确。

2、错误处理

在每个步骤中都可能出现错误，需要添加适当的错误处理逻辑，以确保程序的稳定性。

3、用户体验

获取歌词的过程可能需要一定时间，可以考虑添加加载动画或提示信息，以提升用户体验。

通过以上方法和注意事项，可以有效地实现JS获取音频歌词的功能。无论是解析嵌入元数据、调用API，还是手动创建歌词文件，都有其适用的场景和优缺点。根据具体需求选择合适的方法，并结合多种方法实现最优的解决方案。