Playing sound in reactjs

Question

import React, { Component } from \'react\'
import { Button, Input, Icon,Dropdown,Card} from \'semantic-ui-react\'
import { Link } from \'react-router-dom\'
import $          


        

Answer 1

Uncaught TypeError: Cannot read property 'setState' of undefined

The error occurs because of how the this keyword works in JavaScript. I think the Audio should play just fine if we solve that issue.

If you do a console.log(this) inside play() you will see that this it is undefined and that's why it throws that error, since you are doing this.setState().Basically the value of this inside play() depends upon how that function is invoked.

There are two common solutions with React:

1. Using bind() to set the value of a function's this regardless of how it's called:

constructor(props) {
  super(props);
  this.play() = this.play.bind(this);
}

2. Using arrow functions which don't provide their own this binding

 {this.play()}}>Play

Now you will have access to this.setState and this.audio inside play(), and the same goes for pause().