Next.js Discord

Discord Forum

Importing audio files not working

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
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

25 Replies

@Ray I think you don't need to import it? `<audio src="/audio/test.mp3">`
Brown bearOP
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
Brown bearOP
I dont, ive just tried everything else.
I mean maybe i do
but i just want functionality first
Ray
<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} />;
};
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
Ray
what is the path of your mp3
Brown bearOP
project/public/audio/test.mp3
maybe it needs to be project/renderer/public/audio/test.mp3
no that didnt fix it
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 />