file: app/src/page.tsx

import Image from 'next/image'
import name from './name.mp3';
import soundIcon from '../assets/icons/sound.png'

export default function Home() {
var audio = new Audio(name);
<Image
src={soundIcon.src}
alt={'Speaker Icon that plays pronounciation'}
width={30} height={30}
onClick={() => audio.play()}
></Image>
}

I have added a app/src/types/sounds.d.ts file with this content:

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

Running the code throws this error:
Import trace for requested module:
./src/app/name.mp3
./src/app/page.tsx
⨯ ./src/app/name.mp3
Module parse failed: Unexpected character '♦' (1:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Don't understand what the error message is saying?

Another solution I've tried is using a html audio tag instead of "new Audio" object;

type Props = {
captionText: string,
mp3Src: string,
}

export default function AudioPlayButton({
captionText,
mp3Src,
}: Props) {
return <div>
<figure>
<figcaption>{captionText}:</figcaption>
<audio controls>
<source src={mp3Src} type="audio/mp3"></source>
</audio>
</figure>
</div>;
}

and in pages.tsx,
<AudioPlayButton captionText={'Play Pronunciation'} mp3Src={"./name.mp3"} allowDownload={true}></AudioPlayButton>

This will load correctly but with a file duration of 0:00 and in console log "404
Not Found GET http://localhost:3000/name.mp3"
The GET address is incorrect? What file directory is root supposed to match to? Also, this component works with public URLs like https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3 but not local files.. why??