0

I am struggeling on finding out why my button dont play a sound when I click on it. The console.log() test works fine, but the -part dont. I also tried some npm-packets to solve the problem, but it seems like my code has a general problem. Whats wrong with it? Can someone help me?

The main.js :

import Button from './button';

class Drumpad extends Component {
  constructor(props) {
    super(props);
        this.state = { 
              Q:
              {
                id: 'Q',
                name: 'Q',
                src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
              },
          }
    }
  render() {
    return (
      <div style={test}>
        <div id='row1'>
        <Button cfg={this.state.Q}/>
        </div>
      </div>
    )
  }
}

And the button.js:

class Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
        }
      }
      handleClick = () => {
        console.log(this.props.cfg.src);
        return (
          <audio ref='audioClick' src={this.props.cfg.src} type='audio/mp3' autoPlay>
          );
        };
  render() {

    return (
      <div>
        <button style={buttonStyle} onClick={this.handleClick}>
            <h1>{this.props.cfg.name}</h1>
        </button>
      </div>
    )
  }
}
  • Possible duplicate of [Playing sound in reactjs](https://stackoverflow.com/questions/47686345/playing-sound-in-reactjs) – Jibin Joseph Apr 19 '19 at 19:04
  • Hey Brune, this was not a report but a friendly tag so that you and others can reference to a previously asked question which is similar to yours. That's how stackoverflow works, I hope you read the guidelines? – Jibin Joseph Apr 20 '19 at 12:43

1 Answers1

2

The handleClick method in button.js returns an <audio> element, which is redundant, since you would like to play the sound onClick.

Instead I used a Audio constructor to create an instance of the audio clip, using the url provided as props, which I set to state.

Then I use a callback to invoke the play() method on it.

  handleClick = () => {
    const audio = new Audio(this.props.cfg.src);
    this.setState({ audio }, () => {
      this.state.audio.play();
    });
  };

So your button.js becomes something like this:

import React, { Component } from "react";

const buttonStyle = {};

export default class Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      audio: false
    };
  }

  handleClick = () => {
    console.log(this.props.cfg.src);
    const audio = new Audio(this.props.cfg.src);
    this.setState({ audio }, () => {
      this.state.audio.play();
    });
  };

  render() {
    return (
      <div>
        <button style={buttonStyle} onClick={this.handleClick}>
          <h1>{this.props.cfg.name}</h1>
        </button>
      </div>
    );
  }
}

Your main.js remains as is.

Here is a working codesandbox.

Jibin Joseph
  • 1,265
  • 7
  • 13
  • Thank you so much. I`m going to check the solution this evening and report if everything is good :)))) –  Apr 20 '19 at 12:28
  • Please do, I have attached the codesandbox tho and it works there. – Jibin Joseph Apr 20 '19 at 12:44
  • Thanks for your help, the solution works. I will now going to understand whats wrong with my solution. –  Apr 20 '19 at 16:46
  • Consider upvoting / accepting the answer if it works for you. :) – Jibin Joseph Apr 20 '19 at 17:39
  • Upvoted! Thank you very much. You know, I learn for my own and sometimes it`s very hard to find my way :))) –  Apr 21 '19 at 15:56