Best jQuery Video & Audio Plugins & Tutorials with Demo

    SFX.js : Simple JavaScript audio wrapper for easy Sound Effects

    SFX.js : Simple JavaScript audio wrapper for easy Sound Effects

    Simple audio wrapper for easy sound effects on your website. SFX.js plays OGG files when browser supports them, and falls back to MP3 otherwise. OGG is prioritized because it is an open format with developer friendly licensing, unlike MP3… If a browser support for OGG files will be ubiquitous, I’d like to drop support for MP3 in SFX.js.

    SFX works in Chrome, Opera, Firefox, Safari (with issues), and IE9+ (haven’t tested other browsers). Supported file types are:

    • Chrome: OGG + MP3
    • Opera: OGG
    • Firefox: OGG
    • Safari: MP3
    • IE9: MP3

    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.