Skip to content
文档
生日彩蛋项目
开始修改文件
src目录
main目录
Music.vue

Music.vue 文件 指导修改

目录树位置：✅main/Music.vue 你的main目录下的 Music.vue 文件

⚠️

如果你不需要自定义音乐播放，直接使用了我原来默认的音乐id，那么此文件不需要修改。反正，如果你修改了，或者自定义了音乐ID，我觉得你还是很有必要看一下这篇修改指导的。

Api、音乐的读取逻辑、运行方式

我先制作了一个思维导图，你可以先把它看清楚(右键选择在新标签页中打开图像) 思维导图

这个思维导图里面的内容大概就是说，App.vue会喊Music.vue放个音乐，App.vue首先得自己传入一个ID。但是Music.vue会根据特定的ID来选择音乐链接，不是特定的ID才会使用api接口。

这是为什么？因为在之前写这个项目的时候，我一直都是用的Api+id去请求，但是网易云Api老是网络繁忙。于是我就加入了新的根据对应ID选择播放链接的功能。

综上所述，如果你修改了App.vue里面的歌曲id，那么在这里，你也应该修改对应的链接保证它不会因为我的网易云api网络繁忙而不播放。当然如果你对我的网易云api很有信心的话，你也可以不改，只不过我不保证可用性哦~

假如你的 App.vue 修改后：

 <Music ref="musicPlayer" :initialTrackId="'1234'" :shouldAutoPlayOnLoad="false" :isInEggHuntPage="showEggHunt" />

那么你的 Music.vue

    // 加载音轨函数
    const loadTrack = async (trackId) => {
      if (trackId === '1234') {
        // 如果trackId为1234，使用特定链接
        const trackUrl = '这里换成你的音乐链接';
 
        // 创建 Howler 音频对象
        sound.value = new Howl({
          src: [trackUrl],
          volume: props.initialVolume,
          autoplay: props.shouldAutoPlayOnLoad,
          mute: props.isMuted,
          onend: onMusicEnd,
        });
index.vueheader.vue