HTML Audio App: Creepy SFX for Haunted Walk

I was asked to find a bunch of spooky sound effects for a charity Haunted Walk event at work. I figured it would be much better to have an app for that, so I created a creepy SFX soundboard as a PWA.

The demo uses a hidden HTML audio element that is controlled by JavaScript events to play and pause the MP3 audio files. The PWA components have been removed from this demo, but it should still work.

There are responsive CSS breakpoints at 768px, 992px and 1200px to control the number of soundboard buttons on each row.

audio css grid halloween html javascript

Comments

New Comment

If you have a comment you'd like to share, feel free to leave it below. I moderate all comments before they are published. Markdown is enabled. See syntax for help.


I'll never share your email with anyone else.

Web Demos

My web demos exist as a playground for creating experiments written in HTML, CSS and JavaScript.

I have previously used CodePen for experimenting with HTML/CSS/JavaScript, but in the spirit of IndieWeb POSSE, I decided to start hosting my demos myself.

Folksonomy

I like tag all content on my site. See below for all tags used within my web demos.

Subscribe

Click the link below to subscribe to my Demo feed in your favourite news reader client:

RSS feed

Philip Newborough and a donkey enjoying a beer.

About

My name is and I’m a full stack web developer living and working in Lincoln, England. This website (philipnewborough.co.uk) serves as my personal homepage. When I’m not working with tech, I love to ride bicycles with my wife and friends.

← An IndieWeb Webring πŸ•ΈπŸ’ β†’