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:
The full soundboard is available here