Category: audio

Creative Audio Visualizers

Today we’ll explore how to build a basic, line-style music visualization in the browser. We’ll be using p5.js for our drawings and its p5.sound library for analyzing sounds. The demo is kindly sponsored by monday.com: the visual & intuitive project management and software development tool. If you woul...

Interactive Musical Instruments

View demo Download source Today we’d like to share a little musical experiment with you. The demo has a couple of playful audio interactions that allow you to play music on instruments or simply make sounds by holding the mouse pressed and move around. All of the instruments, except the last set of small i...

Vocalizer

Cool little lib from Atif Azam that allows you to wrap a name in a span and it puts a little 🔊 button to hear the pronunciation. The audio comes from NameShouts. You can’t contribute your own pronunciations to NameShouts, best I can tell, but the lib allows you to provide an alternate source. I made a dem...

Create a Music Jam Station with Vanilla JavaScript

The HTML5 audio player has given rise to some new and exciting possibilities, especially when it comes to music related web applications. I hope to introduce you to some of these possibilities by walking you through how I created this jam station. This project originally began as an experiment, but over time evolved ...

Screamy Bird

During San Francisco’s Stupid Shit No One Needs and Terrible Ideas “Hackathon”, Glen Chiaccheri made a game where you have to literally scream your way through it. Make sure to check it out in Firefox, as Chrome and Safari don’t support the getUserMedia API fully. This is the API that allows web developers to r...

How to Create an Interactive Animated SVG Drum Kit

View demo Download source Today we’re going to create an animated SVG drum kit that can be played by clicking, tapping or using your keyboard, and that can also be programmed to play by itself! We’ll be making use of GreenSock’s TweenMax animation library, jQuery and the <audio> element. Creati...

Make a Voice-Controlled Audio Player with the Web Speech API

The Web Speech API is a JavaScript API that enables web developers to incorporate speech recognition and synthesis into their web pages. There are many reasons to do this. For example, to enhance the experience of people with disabilities (particularly users with sight problems, or users with limited ability to move th...