Skip to content
Elm CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
src
.gitignore
README.md
drum-machine.png
elm.json
index.html

README.md

Drum Machine

A screenshot of the Drum Machine

This Elm app is based on freeCodeCamp's Build a Drum Machine front-end project. Its look and feel is "borrowed" from this example CodePen app.

Takeaways

I was surprised by how many new things I ended up learning and how many interesting features of Elm I got to use.

  1. I learned how to use the audio tag and how to play a specific audio file when a button is clicked.
  2. I got to use ports as part of enabling audio playback with the HTMLMediaElement.
  3. I figured out how to write a custom decoder for key up and down events so that the keyboard could be used to control the drum pads.
  4. When the volume is changed the display is updated to show the current volume and after a short period of time (currently 500ms) the volume information is cleared. In order to do that I had to learn how to do the equivalent of setTimeout in Elm. This led me to discover Process.sleep.
  5. An empty display causes the display rectangle's height to collapse such that when text is shown it makes the rectangle's height adjust abruptly. To fix this problem I needed to make Elm output a non-breaking space.
  6. This is not Elm specific but I learned that setting currentTime to 0 made the audio playback smoother when I was rapidly clicking the drum pads.

That's all folks!

Check out the demo.

You can’t perform that action at this time.