Drum Machine, targeting <audio> problem

JavaScript
1

I am having trouble using my spinIt method (my name for the method to play the audio clip). I cannot get it to target the audio element on a variable basis.

I would really like line 60 to be something like let clip = this.childElement or something like that, but I can’t find anything like that out there. I have tried to use getElementById to get the keyName from my sounds array in my state object, but I’m not able to target a particular item within the array when I use the variable i, because the spinIt method is outside of the .map loop. I’ve been at this for hours but I can’t find anything that will let me put something in the getElementById paranthesis that responds to and changes with whichever Div I click on.

Here is a link to a fork of what I have so far on codepen: https://codepen.io/siege211/pen/QBqyEW?editors=0111
And here’s the javascript so far:

const catSounds = [{
    keyName: 'Q',
    keyCode: 81,
    url: 'http://audiosoundclips.com/wp-content/forum/uploads/2015/01/Cat-meow-1.mp3'
  }, {
    keyName: 'W',
    keyCode: 87,
    url: 'http://audiosoundclips.com/wp-content/forum/uploads/2015/01/Cat-meow-2.mp3'
  }, {
    keyCode: 69,
    keyName: 'E',
    url: 'http://audiosoundclips.com/wp-content/forum/uploads/2015/01/Cat-meow-3.mp3'
  }, {
    keyCode: 65,
    keyName: 'A',
    url: 'http://audiosoundclips.com/wp-content/forum/uploads/2015/01/Cat-meow-4.mp3'
  }, {
    keyCode: 83,
    keyName: 'S',
    url: 'http://audiosoundclips.com/wp-content/forum/uploads/2015/01/Cat-meow-5.mp3'
  }, {
    keyCode: 68,
    keyName: 'D',
    url: 'http://audiosoundclips.com/wp-content/forum/uploads/2015/01/Cat-meow-6.mp3'
  }, {
    keyName: 'Z',
    keyCode: 90,
    url: 'http://audiosoundclips.com/wp-content/forum/uploads/2015/01/Cat-meow-7.mp3'
  }, {
    keyCode: 88,
    keyName: 'X',
    url: 'http://audiosoundclips.com/wp-content/forum/uploads/2015/01/Cat-meow-8.mp3'
  }, {
    keyName: 'C',
    keyCode: 67,
    url: 'http://audiosoundclips.com/wp-content/forum/uploads/2015/01/Cat-meow-9.mp3'
  },
];

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state= {
      sounds: catSounds,
      padNumber: 0
    }
    //this bindings here
    this.spinIt = this.spinIt.bind(this);
  }
  spinIt() {
    let clip = document.getElementById('E');
    clip.play();
    console.log(this.state.sounds);
  }
  //event handlers here, including render method
  render() {
    const PADS = this.state.sounds.map(
    (x,i) => {
      return (
      <div 
        className='drum-pad' 
        id={'clip'+i}
        onClick={this.spinIt}>{x.keyName}
        <audio
          className='clip'
          id={x.keyName}
          src={x.url}
          ref={
                 function(el) {
                   self._input = el;
                 }
               }>  
        </audio>
      </div>)});
    return (
      <div id='theMachine'>
        <div id='display'>Display</div>
        {/*<Pads />*/}
        {PADS}
      </div>
  );}
}

ReactDOM.render(<App />, document.getElementById('drum-machine'));
1 Like
2

Hey, gang. It’s me again back with another video. I’ve found my own solution to this, so I don’t need help with this question anymore.

One of the major frustrations I had with this is that I knew it would be easy to solve if I could just put put an argument into the {this.spinIt} method that’s attached to the onClick property of line 63. However, when I would try to put
onClick={this.spinIt(argument)}>
the project would always crash. However, I found out that you CAN use arguments while assigning onClick methods as long as you use ES6 arrow syntax. Here’s what the onClick assignment looks like now that I’ve gotten it working:

onClick={ ()=> this.spinIt(x.keyName)}>{x.keyName}

And the function itself that is being assinged to onClick now looks like this:
spinIt(y) {
let clip = document.getElementById(y);
clip.play();
}

The ‘y’ parameter is successfully being filled by {x.keyname}, which is exactly what’s being used to name the id of the audio tag.

It’s kind of amazing/dumb to me that parameters only seem to work with arrow syntax, and maybe this isn’t actually the case, but either way it’s been a big breakthrough for me.

1 Like
3

very nice solution dear

1 Like