Importing audio files not working

[red maple]

So I’m working on the Electron-next-typescript example and I’m trying to import a test.mp3 file into an AudioPlayer.tsx file and it refuses to import the audio.

When I run `import audio from “/audio/test.mp3” and it’s at the public/audio/test.mp3 I get the module not found error

[grizzled valley]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[mighty matrix]

I think you don't need to import it?
<audio src="/audio/test.mp3">

[red maple]

so im trying to run the audio api

import { useState, useEffect } from "react";

const AudioPlayer = () => {
  const [audio, setAudio] = useState(null)

  useEffect(() => {
    setAudio(new Audio("/test.mp3"));
    audio.play();
  });


  return <button type="button">P</button>;
};

export default AudioPlayer;

doesnt seem to work at all

audio.current.play also doesnt work

[mighty matrix]

why do you need state?

[red maple]

I dont, ive just tried everything else.

I mean maybe i do

but i just want functionality first

[mighty matrix]

<audio autoPlay src="/audio/test.mp3" />

const AudioPlayer = () => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      ref.current.src = "/audio/test.mp3";
      ref.current.play();
    }
  }, []);

  return <audio ref={ref} />;
};

[red maple]

still nothing

for either one

import { useState, useEffect, useRef } from "react";

const AudioPlayer = () => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      ref.current.src = "/audio/test.mp3";
      ref.current.play();
    }
  }, []);

  return <audio ref={ref} />;
};

export default AudioPlayer;

thats my exact code atm

no error but still silent

[mighty matrix]

what is the path of your mp3

[red maple]

project/public/audio/test.mp3

maybe it needs to be project/renderer/public/audio/test.mp3

no that didnt fix it

[mighty matrix]

no

the url should be /audio/test.mp3

I think browser blocked it

check your browser console

and try to render this and you should be able to play it
<audio ref={ref} src="/audio/test.mp3" muted autoPlay controls />