Nuxt3如何实现音乐播放器？出现Audio未定义报错怎么解决

Nuxt3完全支持实现音乐播放器功能，你遇到的报错属于SSR环境下的浏览器API调用问题，和框架能力无关。

报错根因 #

Nuxt3默认开启服务端渲染，组件的data()初始化逻辑会先在Node.js服务端执行。Audio是浏览器环境独有的Web API，服务端运行环境不存在该构造函数，直接在data()中执行new Audio()就会抛出ReferenceError: Audio is not defined错误。

修复步骤 #

• 不要在data()、setup顶层等会在服务端执行的位置直接初始化Audio实例，将实例初始化逻辑移到仅客户端执行的onMounted（选项式对应mounted）生命周期钩子中，该钩子只会在组件完成客户端挂载后触发。
• 修正音频资源引用路径：不要直接在src字段写@/assets/audio/xxx.mp3格式的字符串，这类路径不会被构建工具自动解析。两种处理方式可选：
  • 将音频文件放到项目public目录下，引用时直接写根路径，比如文件路径为public/audio/sample.mp3，src值填/audio/sample.mp3即可
  • 保留音频在assets目录的话，先通过import语法导入音频文件，再把导入结果赋值给src字段
• 如果需要在其他逻辑中调用浏览器API，可以先通过Nuxt内置的process.client变量判断当前运行环境，值为true时再执行对应逻辑，避免服务端执行报错。
• 若整个播放器组件不需要SSR，也可以直接把组件后缀改为.client.vue，Nuxt会自动将该组件标记为仅客户端渲染，不会在服务端执行组件内任何逻辑。

修正后的核心代码 #

export default {
  data(){
    return{
      current: {},
      index: 0,
      isPlaying: false,
      progress: 0,
      // 先初始化为null，不在服务端阶段创建Audio实例
      player: null,
      songs: [
        {
          title: 'Sample Song',
          artist: 'Sample Artist',
          // 示例为public目录下的音频路径
          src: '/audio/sample.mp3',
        },
      ],
    }
  },
  mounted() {
    // 仅客户端执行，可安全调用Audio构造函数
    this.player = new Audio()
    // 可在此处绑定播放进度更新、播放结束等事件监听
    this.player.addEventListener('timeupdate', () => {
      this.progress = this.player.currentTime / this.player.duration * 100
    })
  },
  methods: {
    // 播放暂停控制示例
    togglePlay() {
      if (!this.player) return
      this.isPlaying ? this.player.pause() : this.player.play()
      this.isPlaying = !this.isPlaying
    }
  }
}

内容的提问来源于stack exchange，提问作者Henry Oladeji