FluidVids.js is a javascript plugin that allows iframes containing youtube or vimeo embeds to be fluid width, for responsive and fluid development.
All posts in Media
jQuery.WebcamQRCode : QR Code scanning in jQuery
WebcamQRCode is a jQuery plugin that uses the webcam user to scan a QR code and return the result to Javascript to be treated. This plugin was originally developed to scan the barcode of the product and automatically fill in the corresponding information on the form of an intranet.This plugin uses Flash to access the webcam.
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 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
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 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
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 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.
