Next.js 15: Unable to serve static audio file from public directory

Question

Problem Description

I'm trying to play an MP3 audio file in my Next.js 15 application, but the audio files in the public/audio/ directory are not being served. When I check the browser's developer tools, the audio folder is not generated/served at all, although

Environment

Next.js: 15.3.5
Node.js: 22.14.0
Browser: Edge (latest)

Project Structure

sample-project/
├── public/
│ └── audio/
│  └── sample.mp3 (38KB file exists)
├── app/
│ └── todolist/
│  └── page.tsx
│  └── todoList.tsx
└── package.json

Code

todoList.tsx (relevant part):

const playDeleteSound = async () => {
  try {
    const audio = new Audio('/audio/sample.mp3');
    await audio.play();
  } catch (error) {
    console.log('Audio playback error:', error);
  }
};

What I've Tried

Direct URL access: Accessing http://localhost:3000/audio/sample.mp3 returns 302
Browser dev tools: No audio folder appears in the Sources tab

Expected Behavior

The MP3 file should be served as a static asset from the public directory, accessible at /audio/sample.mp3, just like images are served from public/images/.

Actual Behavior

302 when accessing the audio file URL directly
No audio folder visible in developer tools
new Audio() fails to load the file

Questions

Is there a specific configuration needed to serve audio files from the public directory?
Are there any known limitations with static audio assets?
What's the recommended approach for handling audio files in Next.js 15?

Additional Notes

Images in public/images/ work perfectly fine
Designating a certain URL of mp3 file online as the parameter of Audio instead of '/audio/sample.mp3' also works perfectly fine
File certainly exists and no mistakes with its file path (38KB MP3 file)

Any help would be greatly appreciated!

If you must go with the Audio approach, I would try to utilize this function within a useEffect. Do you get the error caught logged in the console? I believe the web audio API can, for the most part, only be utilized on the client side, so ensure this is within 'use client' as well. — clxrity
– clxrity, Commented Jul 12 at 20:04

Borewit · Accepted Answer · 2025-08-29 17:10:30Z

I cannot reproduce your issue. If I setup a project, according to your description, it works just fine.

I created a default project Next.js 15 project:

npx create-next-app@latest

Added an MP3 to public/audio/sample.mp3

Replaced the page.tsx with:

"use client";

const playDeleteSound = async () => {
  try {
    const audio = new Audio("/audio/sample.mp3");
    await audio.play();
  } catch (error) {
    console.log("Audio playback error:", error);
  }
};

export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <button
        onClick={playDeleteSound}
        className="px-6 py-3 rounded-2xl bg-blue-600 text-white text-lg font-semibold shadow-md hover:bg-blue-700 transition"
      >
        ▶ Play Sound
      </button>
    </div>
  );
}

It shows a play button, when I click that, it starts playing the file.

Full project code: https://github.com/Borewit/serve-mp3-with-nextjs

Collectives™ on Stack Overflow

Next.js 15: Unable to serve static audio file from public directory

Problem Description

Environment

Project Structure

Code

What I've Tried

Expected Behavior

Actual Behavior

Questions

Additional Notes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem Description

Environment

Project Structure

Code

What I've Tried

Expected Behavior

Actual Behavior

Questions

Additional Notes

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related