Playing local mp3 files with react js without importing

Question

I want to create an app that shows different songs i've chosen, with react.js The problem is that it doesn't work with local files. Path is ok (just checked in the DOM) I've tried with relative path and absolute path but it is still the same.

I've tried a lot of things, such as importing react-sound, react-audio-player...

I've tried to directly import the mp3 file at the beginning of the file with "import song from "./songs/song.mp3" and it works, but it is useless as you have to add it manually if you want to add/delete songs.

When I press the play button, it always fails the promise and returns me the error :

DOMException: Failed to load because no supported source was found.

import React from "react";

const SongCard = (props) => {

const playAudio = () => {
  const audio = new Audio(props.song.path)
  const audioPromise = audio.play()
  if (audioPromise !== undefined) {
    audioPromise
      .then(() => {
        // autoplay started
        console.log("works")
      })
      .catch((err) => {
        // catch dom exception
        console.info(err)
      })
  }
}

  return (
    <div className="songCard">
      <div className="coverContainer">
        <img src=""/>
      </div>
      <div className="infoContainer">
        <div className="playPauseButton" onClick={playAudio}>►</div>
        <div className="songTitle">{props.song.nom}</div>
      </div>
    </div>
  );
};

export default SongCard;

Does anyone have an idea ?

Answer 1

Due to security issues, you won't be able to access local files programatically from JavaScript running in browser.

The only way you can get a hold of local files is by:

1. User selecting the file via a file <input>
2. User drag and dropping the files into your application

This way the user is explicitly giving you access to those files.

You can either design your application around those interactions, or

You can start a web server locally where it has access to your audio files and stream those to your app or upload the files to a cloud service.

Answer 2

you can do it by using this code:

const SongCard = (props) => {
const playAudio = () => {
    let path = require("./" + props.song.path).default;
    const audio = new Audio(path);
    const audioPromise = audio.play();
    if (audioPromise !== undefined) {
        audioPromise
            .then(() => {
                // autoplay started
                console.log("works");
            })
            .catch((err) => {
                // catch dom exception
                console.info(err);
            });
    }
};

return (
    <div className="songCard">
        <div className="coverContainer">
            <img src="" />
        </div>
        <div className="infoContainer">
            <div className="playPauseButton" onClick={playAudio}>
                ►
            </div>
            <div className="songTitle">{props.song.nom}</div>
        </div>
    </div>
);
};

export default SongCard;

it'll work if you change the "./" in the require to the relative path of the audio's dictionary, and send only the name of the audio file in the parent's props

I hope I was help you

Answer 3

Have you tried to use the <audio /> tag ?

Here is a React working audio exemple.

class App extends React.Component {
  render() {
    return (
     <div>
         <audio ref="audio_tag" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls autoPlay/>

     </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Find more information about the <audio /> tag here: https://www.w3schools.com/html/html5_audio.asp