Best jQuery Video & Audio Plugins & Tutorials with Demo

Create high quality cinemagraphs with CSS3 and jQuery

Create high quality cinemagraphs with CSS3 and jQuery

Create high quality cinemagraphs that offer a richer range of colours and a larger set of dimensions than the usual animated GIF options, by using JPEG sprites with CSS3 and jQuery.

In this tutorial we’ll show you how to create a full screen-capable cinemagraph using a different technique. Instead of rendering our animation using GIF, we’ll create a sprite using JPG as the format, allowing us to scale up our artwork to practically any size, and render a full spectrum of colour. You’ll learn how to break video into individual frames, arrange the frames into a single sprite that loads efficiently in the browser, and use CSS3 (with jQuery as a backup) to flip between the frames, creating a rich, high-quality cinemagraph.

Coding a Vimeo API Instant Search App with jQuery

Coding a Vimeo API Instant Search App with jQuery

In this tutorial I want to explain how we can build a small Vimeo instant search webapp. I’ll be creating the frontend with jQuery and the backend on PHP. There is actually a full developer’s API with references for programmers. I’ll stick to explaining the more convoluted ideas so that you can follow along with my source code.

I will first explain how we can put together the HTML document so it runs our frontend Ajax functions. Let’s include a reference to the most recent jQuery library which is used for Ajax calls. I’m also using another file v.js for our custom API commands.

Dancer.js : A high-level audio javascript API

Dancer.js : A high-level audio javascript API

dancer.js is a high-level audio API, usable with both Mozilla’s Audio Data API and Webkit’s Web Audio API with flash fallback, designed to make sweet visualizations.

Features:

  • Use real-time audio waveform and frequency data and map it to any arbitrary visualization
  • Use Dancer to get audio data from any preexisting audio source
  • Leverage kick detection into your visualizations
  • Simple API to time callbacks and events to any section of a song
  • Supports Web Audio (webkit), Audio Data (mozilla) and flash fallback (v9+)
  • Extensible framework supporting plugins and custom behaviours

Pedalboard.js : JavaScript framework for Audio effects for guitars

Pedalboard-js is a ground-breaking, first of its kind, novel open source JavaScript framework for developing audio effects and applying them to sound sources, and it’s particularly good at guitar effects.
The API and all the abstraction is built around the concept of guitar effects — pedals and stomp boxes, pots and switches.Right now it only supports Safari and Chrome Nightly.
You design your pedal with the powerful Webkit audio API, attach pots and switches to it, style it via CSS3 and voila.
Bring multiple pedals together to create a pedalboard, easily adjust their settings and routing. Prepare as many pedalboards as you’d like, e.g. for your favorite styles. Easily switch pedalboards for a completely different sound.

Virtual Piano Chords and Scales as a jQuery plugin

Virtual Piano Chords and Scales as a jQuery plugin

Virtual Piano Chords is a jQuery plugin to easily create virtual piano chord/scale to better understand how chords and scales related to each other visually and mathematically.

The Options are

  • number_of_keys : To specify the number of keys needed
  • key_width : Key Width in pixels
  • key_height : Key Height in pixels
  • chord_color : Color of the Chord
  • scale_color: Color of the Scale used

jSound : jQuery plugin for playing sounds on any html tag element

jSound : jQuery plugin for playing sounds on any html tag element

JSound is a simple jQuery plugin for playing sounds on any html tag element ,it works only on modern browser with html5.
You can define sounds everytime the cursor hover or clicks an element or leaves the element.Kinda like that awesome music Google Doodle.

Stratus 2 : jQuery powered SoundCloud player

Stratus 2 : jQuery powered SoundCloud player

Stratus is a jQuery powered SoundCloud player that lives at the bottom (or top) of your website or blog.You can add tracks to Stratus right from your page. Simply give a SoundCloud track link the class of stratus and the player will do the rest. This works great for the discography section of your site.

Allofthelights.js : jQuery plugin to turn off the light and enjoy your videos

Allofthelights.js : jQuery plugin to turn off the light and enjoy your videos

Allofthelights.js is a jQuery plugin to turn off the light and enjoy your videos.Alloffthelights.js calculates the video’s offset and creates four div in position:absolute wrapped around it. The offset is recalculated when the light is turned on or the window resized.

Features:

  • Works with any video iframe
  • Responsive video
  • Custom background (color, opacity)
  • Fade transition
  • Switch button enterily customizable
  • Control animation speed
  • Support of lot of players
  • Modern browsers support

BigVideo.js : jQuery Plugin for Big Background Video

BigVideo.js : jQuery Plugin for Big Background Video

This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don’t have autoplay for ambient video.

Audio-Gallery-Suite (A complete audio gallery solution made with HTML5/CSS3/jQuery-JS/C#)

Audio-Gallery-Suite audio gallery solution made with HTML5/CSS3/jQuery-JS/C#

Audio-Gallery-Suite is a complete audio gallery suite/solution that includes a web audio gallery and a software for managing playlists, uploading audios and managing the web audio gallery. The Audio-Gallery-Suite is built up using the latest technology and harnesses their power to put up a sophisticated solution. The Audio-Gallery-Suite is made in a way to be easily setup and deployed by anyone who wishes to use it. I hope that this project proves useful for anyone who intends to use it.
Audio-Gallery-Suite is a complete audio gallery solution made with HTML5/CSS3/Jquery-JS/PHP-ajax/C# that includes a web audio gallery and a software for managing the web audio gallery.