Javascript soundboard
November 4, 2019 12:34 PM   Subscribe

I'm coding a soundboard using HTML5 audio elements triggered by a Javascript onClick. What are the little tricks that an experienced coder would use to make this work as well as possible?

I'm a beginner Javascript coder, i.e. I know enough to be dangerous, but not enough to avoid all the bugs! I'm making a soundboard that contains about 120 small mp3s (averaging about 9kb per file), each triggered by a small button on the page.

What I have so far: each mp3 is called through HTML5 audio with a "preload='metadata'", a shared class, and an individual ID.

The buttons on the page have a JavaScript onClick that calls a function. That function does the following:
  • pauses all audio currently playing, by using a jQuery class selector and pause method.
  • loads the desired audio file. I included this because iOS seems to require a reload if you want to play the same audio more than once
  • resets the time to 0, in case it was paused halfway through earlier
  • plays the desired audio file
So far, so good, it seems to be working okay. The audio is a little delayed because it has to reload it each time, but it otherwise works fine.

And yet! I'm worried that I'm making some fundamental mistake that will cause me woes once it goes live. Experienced JavaScript coders, how can I refine this script so that it avoids all of the traps I don't know about?
posted by Paragon to Computers & Internet (7 answers total) 2 users marked this as a favorite
I used Howler for a similar project and it saved me a lot of headaches. Highly recommended!
posted by sportbucket at 12:57 PM on November 4, 2019 [1 favorite]

Yeah, you’ll want to use a library for this, if you want it to work consistently. I have a project that is stuck because it just kept breaking as browsers update to stay ahead of auto-playing sound. Howler looks great, we have also been looking at tone.js.
posted by rockindata at 1:27 PM on November 4, 2019

+1 for sportbucket's reply - Howler is fantastic, don't reinvent the wheel. Be glad someone else has worked around the inconsistencies and platform variations. Having just done some work with HTML5 audio, my first questions was 'I dimly remember there was some issues around having to click before sound would play, is this still an issue?'. Howler Just Works (yes, it is still an issue, and Howler creatively intercepts the first mouseup event on your page's HTML to play a silent sound, bypassing this restriction in a consistent and clean way).
posted by davemee at 1:41 PM on November 4, 2019

Libraries are great but sometimes there's nothing like wading in and building something from scratch to get the blood pumping and to figure out if you really love coding.

I am a feral programmer myself at about the Conscious Competence level. If you want me to test and give feedback message me. :)

It sounds like you are a natural!
posted by i_mean_come_on_now at 1:51 PM on November 4, 2019

I should mention that I use libraries very reluctantly. In my experience they lead to page bloat and all kinds of inefficiencies. I'm typically a big fan of reinventing wheels for my own particular use.

Audio in javascript, though, is a total pain the the ass, and Howler is excellent.
posted by sportbucket at 2:43 PM on November 4, 2019

One thing that can make your life a little easier is using ‘audio sprites’ — combining all your audio clips into one sound file, along with a reference listing the start time & duration for each individual sound. Once this file is loaded / cached, you only have to set the currentTime for each new button press, rather than loading a new sound each time. Howler may have built-in support for this, can’t remember.
posted by sixswitch at 2:44 PM on November 4, 2019

Thank you all, while I very much enjoy exploring and experimenting (and truly appreciate your offer i_mean), a library like Howler will serve my needs perfectly. Thank you for the advice!

(And yes, apparently Howler can handle audio sprites very well.)
posted by Paragon at 5:33 PM on November 4, 2019

« Older A seedy query   |   Identify This Tree Newer »
This thread is closed to new comments.