I was surprised by how many new things I ended up learning and how many interesting features of Elm I got to use.
- I learned how to use the audio tag and how to play a specific audio file when a button is clicked.
- I got to use ports as part of enabling audio playback with the HTMLMediaElement.
- 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.
- 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.
- 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.
- This is not Elm specific but I learned that setting
0made the audio playback smoother when I was rapidly clicking the drum pads.
That's all folks!
Check out the demo.