Drum Machine - Audio Element?

JavaScript
1

Greetings, all. I’m working through the Drum Machine React challenge, and I can’t figure out how to get the audio elements to play.

I’ve done Simon already, which had audio elements, but that was Vanilla JS, so this is my first time messing with React Audio.

What’s the best way to handle this?

3

Using ref is how I ended up doing it. I read that post, but the author seemed so apprehensive about using ref that I tried to find another way first. That post, and other posts about React Audio on the FCC forum are all pretty empty of confident responses.

There’s nothing on reactjs.org about audio. Seems like audio is one of React’s weaknesses, according to
Maciej Matuszewski.

Thanks for posting your pen for me to look at. Seems like, without downloading a library, React doesn’t do well with sound. After Simon, I don’t think JavaScript handles it very well, either.

1 Like
4

I’m a bit late to this. I thought I’d share this solution with the Audio element. I found using this making it very simpler than the rest of the React examples I found.
Using the new Audio(‘url’);

class App extends React.Component {
  constructor(props) {
    super(props);
   this.track= new Audio('https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js');
  }

and then calling the play() method on it onClick

2 Likes
5

That’s definitely the way to go. There’s no React Audio API that I know of. React pretty much lets you use Vanilla JS in your code, so using the Audio API I think is the way to go.

When we’re talking about FCC projects, though, an audio tag should be present in your code if I remember correctly, so I think React Refs are a must (or trick the tests by adding a dummy audio tag which does nothing).

6

Actually, thanks for bringing this back up; I just realized I never actually finished my Drum Machine. I need to go add the key-press controls. Don’t know how I overlooked that.

That solution seems pretty straightforward, not sure why I didn’t come across it then. I do recall from building the Simon game that you need to also call .load() otherwise the clip won’t play correctly. Maybe that’s not the case, but that’s something I ran into back then that caused me trouble.

JavaScript saves the last played location of the file when you call .play(), so if the clip finishes, then the ‘last played’ spot is actually the very end of the clip, so there’s no sound the next time. Or, in my case, the clip got shorter and shorter every time I hit the pad until there was no sound at all.

7

You need to set currentTime back to 0 again.

8

Yeh, had a nightmare trying to figure out the ref attributes so I used: getElementById to play the audio instead, it seemed a lot more intuitive to me.
here is my solution: