projects tag: input event
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.
#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!
#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