Uncaught (in promise) DOMException: Unable to decode audio data

[GitHubRakeshSharma]

Hi, I have an issue with loading a local file. I am completely new to React. I used Wavesurfer.js before without bigger problmes. I just cannot wrap my head around this... Here is the code (simply used the template):

import React from 'react';
// import ReactDOM from 'react-dom';
import Wavesurfer from 'react-wavesurfer';

require('wavesurfer.js');

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            playing: false,
            pos: 0
        };
        this.handleTogglePlay = this.handleTogglePlay.bind(this);
        this.handlePosChange = this.handlePosChange.bind(this);

    }
    handleTogglePlay() {
        this.setState({
            playing: !this.state.playing
        });
    }
    handlePosChange(e) {
        this.setState({
            pos: e.originalArgs[0]
        });
    }
    render() {
        return (

            <Wavesurfer
        audioFile={'./audio_source/04/lang_wort.mp3'}
        pos={this.state.pos}
        onPosChange={this.handlePosChange}
        playing={this.state.playing}
        />

    );
    }
}

Thanks for reading, Rakesh

(edited by @mspae for proper code formatting)

[mspae]

@GitHubRakeshSharma What do you mean with local file? Is it on your harddrive, or is it in the same location as the JS code you posted?

Do you get an error message?

[GitHubRakeshSharma]

I have put the file(s) into a folder in the same directory as the source files are... to be honest I already switched to making my own small wrapper for this lib. But now I have issues with creating a custom renderer. Seems like babel makes my life uneasy

[benwad]

In case it helps anyone, here's the solution I came up with for loading local files with a file input:

1. Add audioFile to the state:

this.state = {
  playing: false,
  pos: 0,
  audioFile: null,
};

2. Add a file input to load the file:

<input
  type="file"
  onChange={this.handleLoadSample}
/>
<Wavesurfer
  audioFile={this.state.audioFile}
  pos={this.state.pos}
  onPosChange={this.handlePosChange}
  playing={this.state.playing}
/>

3. Implement handleLoadSample to load the file.

  handleLoadSample(e) {
    this.setState({
      audioFile: e.target.files[0]
    });
  }

[mspae]

Maybe this is also related: https://stackoverflow.com/a/31360448/5097199

[mspae]

I'll close this for now. Please comment if you still have questions and I'll reopen.