Best jQuery Video & Audio Plugins & Tutorials with Demo

Grooveplayer : A jQuery music player

Grooveplayer : A jQuery music player

Grooveplayer is a jquery music player plugin built off the open source jplayer multimedia plugin. The GUI resembles the unique look and feel of grooveshark. Grooveplayer allows you to organize and play your mp3 files. Creating a playlist is simple and effortless. All you have to do is edit a single json file and your ready to go!

Features:

  • Built with the free and open source jplayer multimedia plugin.
  • Effortless installation.
  • Grooveshark GUI look and feel.
  • JSON playlist for easy customization.
  • Custom background album art.

jQuery Responsive & Touch-Friendly Audio Player

jQuery Responsive & Touch-Friendly Audio Player

A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used. The jQuery plugin itself would be pretty much useless without the respective CSS which is responsible for the looks and some of the features summarized below.The plugin replaces targeted <audio> elements with some HTML and JavaScript events attached to it.

Don’t confuse this player with the whole media centre like iTunes or so. It is nothing like that. This is a tiny, lightweight player with a very clear purpose: to play a single audio file. I have built it having this credo in mind: “don’t solve problems that do not exist”. You don’t need complex plugins or ugly Flash players with thousands of useless functions to play that damn audio file. Be innovative, be subtle.

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