From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
You’ve certainly already encountered various playable instruments and audio experiments on the Web that are powered by the amazing Web Audio API. The Web Audio Demos and the Web Audio Examples are great resources for Web Audio experiments. Josh also made this demo where you can play on SVG drums, and this record shop template is also powered by the Web Audio API. Moreover, the Above & Beneath Layout Effect shows how you can couple sounds to specific “layout” states.
The schematically presented instruments can all be played by clicking on the interactive parts, i.e. the keys or strings. This will make the respective sound for that note. In addition, holding the mouse pressed and moving it will allow you to play sound sequences. The guitar will play back chords if you do this movement. Depending on the position, different chords will be given off. Try strumming around.
The section with the microphone (“Voice” section) will play a recorded sound. It will get louder if you move closer to the center.
The small instruments will all make sounds on click and whenever you click, a different sound or chord will be played.
Just have a try on all instrument sections and make some noise 🙂
Further Reading & Playing
- Web Audio API
- Sodaphonic, an online audio editor by Stuart Memo
- Web Audio Demos
- Web Audio Examples
- Interactive Record Player
- How to Create an Interactive Animated SVG Drum Kit by Josh Ellis
- Above & Beneath: Featured Content Layout Effect
References and Credits
- Sounds taken from this MIDI.js fork
- “Testing 1 2 3 4” sound
- Instrument icons designed by Freepik
- Mouse icon designed by Darius Dan from www.flaticon.com
- SiriWave JS
- Photography by Unsplash and Pexels
- Fonts used: Quicksand and Arapey
- Internet ExplorerSupported from version E
We hope you enjoy this experimental mash-up and find it useful and inspiring!