Next.js项目本地音频文件实现遇阻，求可行方案及资料

核心问题说明 #

Next.js 的静态资源处理机制和普通 React 项目不同，直接使用相对路径或未正确配置资源导入，会导致音频文件无法被正确解析，这也是你遇到 DOM 存在 audio 元素但无法工作的主要原因。无需额外配置 file-loader（Next.js v12+ 基于 Webpack 5，已内置资源处理能力），以下是针对不同路由体系的可行方案：

Pages Router 实现方案 #

方法1：利用 public 目录存放音频 #

将音频文件放在项目根目录的 public/audio/ 文件夹下（没有则创建），直接使用根相对路径引用：

import ReactAudioPlayer from 'react-audio-player';

function AudioComponent() {
  return (
    <div>
      {/* 原生 audio 标签 */}
      <audio controls src="/audio/demo.mp3"></audio>
      {/* react-audio-player 组件 */}
      <ReactAudioPlayer
        controls
        src="/audio/demo.mp3"
        volume={0.5}
      />
    </div>
  );
}

export default AudioComponent;

注意：public 目录下的资源引用时不需要加 public 前缀，直接从根路径开始写。

方法2：直接导入音频文件 #

将音频放在项目的 assets/audio/ 目录（与 pages 同级），通过 ES 模块导入方式引用：

import demoAudio from '../assets/audio/demo.mp3';
import ReactAudioPlayer from 'react-audio-player';

function AudioComponent() {
  return (
    <ReactAudioPlayer
      controls
      src={demoAudio}
    />
  );
}

export default AudioComponent;

App Router 实现方案 #

App Router 中需要注意客户端组件的声明（使用第三方音频库时需添加 'use client' 指令）：

'use client';
import ReactAudioPlayer from 'react-audio-player';
import demoAudio from '../assets/audio/demo.mp3';

export default function AudioPage() {
  return (
    <div>
      {/* 原生标签 + 导入的音频路径 */}
      <audio controls src={demoAudio}></audio>
      {/* 第三方库 + public 目录路径 */}
      <ReactAudioPlayer controls src="/audio/demo.mp3" />
    </div>
  );
}

常见问题修复 #

1. IDE 提示音频文件引用报错 #

在项目根目录创建 types/audio.d.ts 文件，添加类型声明以解决 IDE 类型检查问题：

declare module '*.mp3' {
  const src: string;
  export default src;
}

declare module '*.wav' {
  const src: string;
  export default src;
}

declare module '*.ogg' {
  const src: string;
  export default src;
}

2. 音频无法播放（Network 404） #

打开浏览器控制台的 Network 面板，检查音频文件的请求路径是否正确：

• 若使用 public 目录，路径必须是 /audio/xxx.mp3，不能包含 public
• 若使用导入方式，确保文件路径拼写正确，Next.js 会自动处理为带哈希的资源 URL

3. use-audio 库正确用法 #

'use client';
import { useAudio } from 'use-audio';

function AudioPlayer() {
  const { play, pause, isPlaying } = useAudio({
    src: '/audio/demo.mp3', // 或导入的音频路径
    autoplay: false,
    loop: false,
  });

  return (
    <div>
      <button onClick={isPlaying ? pause : play}>
        {isPlaying ? '暂停' : '播放'}
      </button>
    </div>
  );
}

export default AudioPlayer;

内容的提问来源于stack exchange，提问作者WKD-Development