Soundboards are fun

so I built one.

Posted by Simon Kaufmann on June 14, 2020 · 1 min read

If you work in the IT industry soundboards are quite well known. There are thousands already existing on the internet, but we wanted to have/create our own with the sounds we needed working in the support department.

We used the audio html element to embed the different sounds in the html file. When pressing a button, we then just play this item with the following code:

<!-- button -->
<div class="box" onclick="document.getElementById('sound1').play()">Hello IT</div>

<!-- sound -->
      <audio id="sound1" src="sounds/sound1.mp3"></audio>
      <audio id="sound2" src="sounds/alarm.mp4"></audio>

To have it available nicely, we’ve used a few meta tags. Like that we could easily adapt it to look nice on our phones, ipads and laptops.

<meta name="viewport" content="user-scalable=no, 
width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

The finished product:

Press me!

The full soundboard is available here