How to play local mp3 or midi file with react-music-player component

Question

I'm using the music player component from react-jinke-music-player to use it in my dash application, I'm wondering how can I play local mp3 files or midi files(not even working using urls) instead of urls.

Here is what I've tried so far:

MusicComponent.react.js

import React, {Component} from 'react';
import ReactJkMusicPlayer from 'react-jinke-music-player';
import PropTypes from 'prop-types';

const audioList1 = [
  {
    name: 'name',
    singer: 'singer name',
    cover:
      'http://res.cloudinary.com/alick/image/upload/v1502689731/Despacito_uvolhp.jpg',
    musicSrc:
      './gnawa.mp3',
  },
]
const options = {
  // audio lists model
  audioLists: audioList1,
  ... etc
}

export default class MusicComponent extends Component {
    render() {
        return (
            <div>
                <ReactJkMusicPlayer {...options}/>,
            </div>
        );
    }
}

MusicComponent.defaultProps = {};

MusicComponent.propTypes = {
    /**
     * The ID used to identify this component in Dash callbacks.
     */
    id: PropTypes.string,
};

Here's a slice of the project structure:

As you can see the mp3 file is in the same location as the MusicComponent.react.js component, why absolute path ./gnawa.mp3 not working here ?

And any help or advice will be appreciated. Thank you in advance.

Answer 1

As you can see the mp3 file is in the same location as the MusicComponent.react.js component, why absolute path ./gnawa.mp3 not working here ?

Because the absolute URL that ./gnawa.mp3 resolves to does not map on to that file … and you haven't done anything to give a URL to that file.

You need to either:

• Put the file somewhere it has an actual HTTP(S) URL and use that URL
• Have the user pick the file with a <input type="file"> and then read it using the FileReader API
• import it into a variable after having configured whatever bundler your project is using to support that file format (e.g. as per this question).