微信小程序:音乐播放器（增加下载存储、歌词同步播放等功能））

Question

已经照着书上敲好了基础代码，也自己添加了上一曲的功能，剩下的就无能为力了，求万能网友们教教我吧！

Answer 1

引自免费微信小程序：皆我百晓生

要将微信小程序中的音乐播放器升级，加入下载存储与歌词同步播放功能，我们可以分步进行。首先，确保你已正确集成了微信小程序的基础音乐播放组件。下面，我将引导你完成下载存储和歌词同步功能。

1. 音乐下载存储

在微信小程序中，音乐文件通常存储在云端，但为了离线播放，我们需要将其下载到本地。可以使用wx.downloadFile API 来实现。

下载音乐文件

// 假设musicUrl是音乐的URL
function downloadMusic(musicUrl) {
  return new Promise((resolve, reject) => {
    wx.downloadFile({
      url: musicUrl,
      success(res) {
        // 文件保存在本地的临时路径
        const tempFilePath = res.tempFilePath;
        resolve(tempFilePath);
      },
      fail(err) {
        reject(err);
      }
    });
  });
}

存储音乐到本地缓存

下载完成后，你可以使用wx.saveFile将音乐存储到用户的本地文件系统。

async function saveMusicToLocal(musicUrl) {
  try {
    const tempFilePath = await downloadMusic(musicUrl);
    const saveResult = await new Promise((resolve, reject) => {
      wx.saveFile({
        tempFilePath,
        success(res) {
          // 返回文件的本地ID，用于后续操作
          resolve(res.savedFilePath);
        },
        fail(err) {
          reject(err);
        }
      });
    });
    return saveResult;
  } catch (error) {
    console.error('保存音乐失败:', error);
  }
}

2. 歌词同步播放

歌词同步通常依赖于一个包含时间戳和歌词文本的JSON文件。你需要解析这个文件并根据当前播放位置显示正确的歌词行。

解析歌词文件

假设你有一个歌词文件，其格式如下：

[
  {"time": 0, "lyric": "[ti:歌名]"},
  {"time": 15000, "lyric": "这是一句歌词"},
  {"time": 30000, "lyric": "这是另一句歌词"},
  ...
]

你可以这样读取和解析歌词文件：

function fetchLyrics(lyricsUrl) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: lyricsUrl,
      success(res) {
        const lyricsData = JSON.parse(res.data);
        resolve(lyricsData);
      },
      fail(err) {
        reject(err);
      }
    });
  });
}

同步歌词显示

接下来，你需要监听音乐播放进度，并根据进度更新歌词显示。你可以使用wx.getBackgroundAudioManager().onTimeUpdate事件。

let currentLyricIndex = 0;

function syncLyrics(lyricsData) {
  const audioManager = wx.getBackgroundAudioManager();
  audioManager.onTimeUpdate = () => {
    const currentTime = audioManager.currentTime * 1000; // 将时间转换为毫秒
    for (let i = currentLyricIndex; i < lyricsData.length; i++) {
      if (currentTime < lyricsData[i].time) {
        // 找到了当前时间对应或最接近的歌词行
        currentLyricIndex = i;
        wx.setStorageSync('currentLyric', lyricsData[currentLyricIndex].lyric);
        break;
      }
    }
  };
}

完整流程

结合上述步骤，你可以创建一个函数来下载音乐和歌词，然后同步播放。

async function setupMusicPlayer(musicUrl, lyricsUrl) {
  try {
    const musicPath = await saveMusicToLocal(musicUrl);
    const lyricsData = await fetchLyrics(lyricsUrl);
    wx.getBackgroundAudioManager().src = musicPath;
    syncLyrics(lyricsData);
  } catch (error) {
    console.error('设置音乐播放器时出错:', error);
  }
}

使用setupMusicPlayer函数初始化你的音乐播放器，传入音乐和歌词的URL。这将处理音乐下载、存储以及歌词的同步显示。希望这能帮助你完成微信小程序音乐播放器的增强功能！