0

I am trying to do drum kit with dynamic import but dynamic import returns a promise.I am sending audio strings from container component to DrumKit.js.I tried every solution for this problem, but I couldn't handle it.

import '../styles/DrumKit.css'
import React from 'react'
class DrumKit extends React.Component{
  constructor(props){
    super(props);
    this.playSound=this.playSound.bind(this);//We need different methods 
    for each of drumkits.
    this.endSound=this.endSound.bind(this);
    this.state={
        playing:false,
        className:'simpleButton',

    };
    window.addEventListener('keydown',this.playSound);
    this.audio=new Audio(import(`../sounds/${this.props.audio}.wav`));

   }
   endSound(){
    this.setState({
        playing:false
    })
   }
   playSound(event){
    if(event.keyCode===this.props.code||event.type==='click') {
        if(this.audio!==undefined){
            this.audio.play()
        }
    }
    else{
        return ;
    }
    this.setState({
        playing:true
    });
   }
     render(){
      const playing=this.state.playing? "isRinging" : "";
    return (
          <div>
            <button
                 onTransitionEnd={this.endSo"und}
                 className={this.state.className}
                 id={playing}
                 onClick={this.playSound}>
                <kbd>{this.props.letter}</kbd>
                <span className='sound'>{this.props.ring}</span>
            </button>
        </div>
    )
}

} export default DrumKit;

     index.js:1509 Uncaught Error: The error you provided does not contain 
     a stack trace.
     at B (index.js:1509)
     at G (index.js:1816)
     at index.js:1831
     at index.js:1850
     at index.js:1343
     B @ index.js:1509
     G @ index.js:1816
     (anonymous) @ index.js:1831
     (anonymous) @ index.js:1850
     (anonymous) @ index.js:1343

DrumKit.js:25 Uncaught (in promise) DOMException

Jeroen Heier
  • 3,520
  • 15
  • 31
  • 32
clau0onix
  • 1
  • 1
  • `import` expects to load a JavaScript module, not a `.wav` file. Use a normal XHR or the `fetch` API. – Bergi Sep 25 '19 at 19:03
  • I am new at React and my mentor wants it this way – clau0onix Sep 25 '19 at 19:20
  • Then you should probably ask your mentor how this is supposed to work. Maybe you are using some module loader that also supports other formats, I just noticed you also `import` a CSS file. – Bergi Sep 25 '19 at 19:23
  • In any case, and this is probably the reason for the DOM exception, the `new Audio` constructor does not take a promise as its argument. Instead, write `audioPromise = import(…).then(data => new Audio(data));`. Notice also that you probably [should not load the file from inside the constructor](https://stackoverflow.com/q/24398699/1048572) - in React rather use the `componentDidMount` hook - and that you need to care about what should happen during the loading or when it fails. – Bergi Sep 25 '19 at 19:26
  • When i write (import(`../sounds/${this.props.audio}.wav`)).then(data => new Audio(data)); I took an error,and it's says Cannot convert object to primitive value – clau0onix Sep 25 '19 at 20:47

0 Answers0