js如何获得音频的歌词

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，还是手动创建歌词文件，都有其适用的场景和优缺点。根据具体需求选择合适的方法，并结合多种方法实现最优的解决方案。

相关问答FAQs：

1. 如何使用JavaScript获得音频的歌词？
JavaScript可以通过以下步骤来获得音频的歌词：
2. 使用HTML5的