audio

Creative Audio Visualizers

By Yannis Yannakopoulos on March 6, 2018

An exploration of modern, line-style sound visualization powered by p5.js and its p5.sound library. ...

Interactive Musical Instruments

By Mary Lou on December 6, 2016

Experimental ideas for playful musical interactions powered by MIDI.js and the Web Audio API. Play instruments or make sounds by interacting with content. ...

Above & Beneath: Featured Content Layout Effect

By Mary Lou on July 28, 2016

A landing page template with a featured content section and background sounds that change according to the view. ...

Interactive Record Player

By Mary Lou on June 15, 2016

An experimental template with an interactive old school record player powered by the Web Audio API. ...

How to Create an Interactive Animated SVG Drum Kit

By Josh Ellis on March 16, 2016

A tutorial on how to create an animated and interactive SVG drum kit with GSAP and jQuery. ...

Web Audio Stylophone

By Stuart Memo on June 10, 2013

Get started with the Web Audio API by learning how to recreate the classic miniature synthesizer. ...

Responsive & Touch-Friendly Audio Player

By Osvaldas Valutis on December 4, 2012

Audio Player: Responsive & Touch-Friendly

A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used. ...

Old School Cassette Player with HTML5 Audio

By Mary Lou on July 12, 2012

Vintage format meets modern web tech: an HTML5 audio player with realistic controls. Today we want to share an audio player with you that looks like an old school mu ...

Audio Slideshow with jPlayer

By Tyler Craft on April 24, 2012

Today we'll share an audio slideshow with you, i.e. a slideshow that will be synced with some audio. We are using the open source audio framework jPlayer. ...

Fullscreen Slideshow with HTML5 Audio and jQuery

By Jay Salvat on July 5, 2011

In today’s tutorial we'll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to ...

Circular Discography Template with jQuery

By Mary Lou on April 11, 2011

Today we want to share a simple website template with you. The template will show some discography or music albums in a rounded fashion, rot ...

Music Portfolio Template with HTML5 and jQuery

By Mary Lou on July 26, 2010

Today we want to share a music portfolio template with you. The idea is to create an artist portfolio with a discography line up and HTML5 audio player jPlayer. The ...