Hi Folks,

I'm trying to make a button or image that plays a 3 second audio clip to help people with name pronunciations. My project includes src folder and uses ts;

page.tsx

'use client'
import Image from 'next/image'
import soundIcon from '../assets/icons/sound.png'
import nameMp3 from '../public/resources/name'

export default function Home() {
const soundFile = new Audio(nameMp3);
return (
...some code
<Image
src={soundIcon.src}
style={hStyle.soundIcon}
alt={'Speaker Icon that plays pronounciation'}
width={30} height={30}
onClick={() => soundFile.play()} ></Image>
...some code
)
}

Where I add import mySound, an error shows "Cannot find module '../public/resources/name.mp3' or its corresponding type declarations". I have also tried moving the mp3 into a different directory but that doesn't help. I've tried importing without the file extension ".mp3" at the end but it will fail to compile, throwing Module not found: Can't resolve '../public/resources/name'

What is going on? Thank you