Experimental ideas for playful musical interactions powered by MIDI.js and the Web Audio API. Play instruments or make sounds by interacting with content.
Best jQuery Video & Audio Plugins & Tutorials with Demo
meSing.js : JavaScript Singing Synthesis Library
meSing.js is a JavaScript singing synthesis library that uses the Web Audio API’s DSP capabilities in conjunction with the meSpeak.js speech synthesis library to provide a vocal synthesizer for the web. First, the lyrics with corresponding MIDI notes are parsed and fed to meSpeak.js; the resulting text-to-speech output is then converted into a series of AudioBufferSourceNodes, which are subsequently processed and adjusted for pitch, rhythm, and expression.
Waud.js : Web Audio Library with HTML5
Waud is a simple and powerful web audio library that allows you to go beyond HTML5’s <audio>
tag and easily take advantage of Web Audio API. It abstracts Web Audio API making it consistent and reliable across multiple platforms and browsers. It also falls back to HTML5 Audio on non-modern browsers where Web Audio API is not supported.
Features:
- Base64 Pack
- Audio Sprites
- iOS Audio Unlock1
- Auto Mute2
- Simple API
- Zero Dependencies
SuperEmbed.js : Fluid width for Embedded Videos
SuperEmbed.js detects YouTube, Vimeo, Vine, VideoPress, DailyMotion, and more embedded videos on webpages and makes them responsive. Essentially, this means they strech to fill their container while still maintaining the original aspect ratio.
- Works without external libraries like JQuery
- Works automatically with YouTube, Vimeo, Kickstarter, CollegeHumor, Hulu, Flickr, Vine, VideoPress, DailyMotion, Twitch.tv, and Vid.me embedded videos
- Responsive videos maintain their original aspect ratio
- Responsive layout can be forced or blocked with classes applied to the embed code
- Extremely tiny, the minified version is only 1.4 KB
Lightgallery.js : JavaScript Lightbox Gallery
Lightgallery.js is a full featured JavaScript lightbox gallery. No dependencies.
- Fully responsive.
- Modular architecture with built in plugins.
- Touch support for mobile devices.
- Mouse drag supports for desktops.
- Double-click/Double-tap to see actual size of the image.
- Animated thumbnails.
- Social media sharing.
- YouTube, Vimeo, Dailymotion, VK and HTML5 video support.
- 20+ Hardware-Accelerated CSS3 transitions.
- Full screen support.
- Supports zoom.
Responsive YouTube Player with Playlist : jQuery Plugin
Responsive YouTube Player with Playlist.Since Youtube API V3.0, it’s mandatory to create a YT API key in order to get the playlists contents programatically… there aren’t other ways to do this. The old XML Feed used in the V.01 of RYPP has been removed by Youtube and no longer exists.
Interactive Record Player : Javascript Experiment
Today we’d like to share an experimental old school record player template with you. The idea is to tap into the incredibly awesome Web Audio API and see what we can do with it. The demo starts with an initial grid view, powered by Masonry. Once a grid item is clicked, a circle expands and covers the grid, revealing the selected album. Now we are in a slideshow view where we can browse through the records.