projects tag: web audio api
Audio Visual Slider
An application I created at the height of the COVID-19 pandemic as part of the course content of a Dynamic Web 1 (JavaScript) course I was (and still am) teaching. We had just migrated to online learning, and I wanted to create an application that visualized what we were all feeling. I selected images that expressed those feelings, and synched the animations with the beat of music I chose. It was a rough time, but my students for that class were really amazing. I was truly inspired by them.
$stack:appendChild/css in js animation/css keyframes/css transitions/DOMContentLoaded event/event listeners/getElementsByTagName/innerhtml property/input event/manipulating the dom/modern javascript/node sass/project/web audio api
Dragging Bubbles App
I have always wanted to closely tie audio and audio volume controls with visual and creating multiple audio sources, which I tie to one input of type range. So what better way than with the HTML5 Web Audio and HTML5 Canvas 2D APIs!
$stack:ajax/canvas 2D/click event/create buffer source/create gain/create media element source/input event/mobile friendly/modern javascript/pointerdown event/pointermove event/pointerout event/pointerover event/pointerup event/node sass/project/set at target time/web audio api
Making Music in the Browser
An app which makes sounds on the web page when clicking it or dragging the computer's or mobile device's pointing device around the screen.
$stack:css animation/css attr/css in js/css keyframes/css pseudo selectors/gh pages/modern javascript/node sass/npm/project/touch events/web audio api
Rockin Synth
A piano keyboard application built with JavaScript, es6 modules, the Web Audio API, event delegation, Sass, and more.
$stack:babel/e.keyCode/e.which/es6 modules/eslint/event delegation/event listeners/kbd tags/prettier/project/transitions/web audio api
Web Audio API AJAX
A Web Audio API app which uses AJAX to retrieve a locally hosted audio file.
$stack:ajax/babel/buffer/canvas/cdnjs/code refactoring/confetti-js/eslint/gh-pages/modern javascript/node-sass/npm/prettier/project/random colors/scripts/web audio api/webpack/workflow refactor