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...
View demo Download sourceToday 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...
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...
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 ...
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...
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...
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...
Recent Comments