Even though audio on websites is predominantly ignored and most of the times hated, there are websites where audio is necessary. Starting with sites where people go to listen to songs or various websites where certain actions trigger a small audio file to make the experience more interesting.
I have to tell you that when you are seeing this article you shouldn’t be thinking about those horrible sites that were popular a decade ago where the audio files where being embedded with the help of ordinary HTML and were really annoying. Times have changed and nowadays, when audio is used on web, is used with the help of jQuery plugins mostly and only in those cases that is absolutely necessary and the visitor won’t consider it to be annoying, but the contrary, interesting for his experience on the site.
Having said these, I’m presenting you the jQuery audio libraries that are at the moment available and you can use on your web design projects. I hope I didn’t leave out any, but if I did, use the contact form and I’ll add it.
Buzz!: A Javascript HTML5 Audio library
Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It degrades silently on non-modern browsers.
jPlayer: jQuery HTML5 Audio / Video Library
jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.
Audiolet
Audiolet is a JavaScript library for real-time audio synthesis and composition from within the browser. It uses graph-based routing and pattern-based scheduling to make complex audio simple to program, and easy to understand.
audiolib.js: a powerful toolkit for audio written in JS
audiolib.js is bundled with some tools to make an audio developer’s life in a browser much easier, such as sink.js for a consistent API between the experimental browser audio APIs. To complement that, audiolib.js also bundles pcmdata.js that is a WAV encoder/decoder, so that you can turn the recordings you make using Sink.js into WAV files that the user can save. Other tools include the AudioWorker API that allows you to create web workers from strings or functions, bundling audiolib.js and its plugins, all ready to use from the worker.
alac.js: An Apple Lossless decoder in the browser
The Apple Lossless Audio Codec (ALAC) is an audio codec developed by Apple and included in the original iPod. ALAC is a data compression method which reduces the size of audio files with no loss of information. A decoded ALAC stream is bit-for-bit identical to the original uncompressed audio file.
music.js
music.js is a music creation library for javascript. It includes functions and data sets to generate notes, intervals, chords, and scales.
dynamicaudio.js
An interface for writing audio with Firefox’s new audio data API with a Flash fallback for older browsers.
drPlayer: simple and free jQuery plugin for creating MP3 playlists
XAudioJS: A minimal cross-browser API for writing PCM audio samples
This simple JavaScript library abstracts the push-for-audio API of Mozilla Audio, the MediaStream API in experimental Firefox Nightlies, and the passive callback API of Web Audio. This library introduces an abstraction layer that provides a push-for-audio and a callback API in one. We even provide a flash fallback to bring us to a total of 4 APIs supported.
SoundManager 2
Despite being one of the senses, sound has largely been missing from the web due to inconsistent technology support. SoundManager 2 bridges this gap, making it easier to use audio across a growing variety of devices and platforms, both desktop and mobile.
Supporting HTML5 audio can be tedious in modern browsers, let alone legacy ones. With real-world visitors using browsers ranging from mobile Safari to IE 6 across a wide range of devices, there can be many support cases to consider.
SoundManager 2 gives you a single, powerful API that supports both new and old, using HTML5 audio where supported and optional Flash-based fallback where needed. Ideally when using SoundManager 2, audio “just works.”
BeatDetektor
SoundJS
SoundJS is a library that provides browsers with a JavaScript sound API that first tries audio files with native HTML5 Audio and falls back to Flash when necessary.
Specifically, the SoundJS API offers the ability to play the same sound file more than once at a time, even while the same sound is already playing. This is also known as multi-layering sounds.
AudioFX Javascript Library
jQuery Multimedia Portfolio
This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.
AudioNode.js
jMedia
jmedia is a jQuery plugin for unobtrusive, accessible and flexible multi-media embedding
Audio Data
The HTML5 specification introduces the < audio > and < video > media elements, and with them the opportunity to dramatically change the way we integrate media on the web. The current HTML5 media API provides ways to play and get limited information about audio and video, but gives no way to programatically access or create such media. We present a new Mozilla extension to this API, which allows web developers to read and write raw audio data.
Audio data is made available via an event-based API. As the audio is played, and therefore decoded, sample data is passed to content scripts in a framebuffer for processing after becoming available to the audio layer–hence the name, MozAudioAvailable. These samples may or may not have been played yet at the time of the event. The audio samples returned in the event are raw, and have not been adjusted for mute/volume settings on the media element. Playing, pausing, and seeking the audio also affect the streaming of this raw audio data.
Audia: a library for simplifying the Web Audio API
In the latest version of Chrome, sound playback was unreliable, bits and pieces were missing from the API, and things just did not work as expected. Safari faired better, but it still felt like Audio was not ready for prime time. However, I think the problem was more of using the wrong tool for the job. Games need responsive, reliable, sometimes even dynamic sound playback, and because of this, Audio is not the best choice for game development.
A good way to think about it is by comparing the Image and Audio tags. Both are simple HTML elements that really just want src attributes, from which they’ll fetch the media and display it in the document. For advanced image manipulation, Canvas is used, and for advanced audio manipulation, AudioContext can be used.
It turns out, the Web Audio API is here today and it is pretty badass. (By “here today” I really just mean Chrome, but it exists and works great even in the stable channel.)
jMP3
jMP3 (javaScript MP3 player) is an easy way make any MP3 playable directly on most any web site (to those with Flash & javaScript enabled),
using the sleek Flash Single MP3 Player & the fantabulous jQuery.
Simple Player – A very simple HTML5 audio player plugin for jQuer
Simple Player is a jQuery plugin that allows web developers to control audio files on their webpage. Supports style up via CSS. All browsers that supports HTML5 audio tag that allow mp3 or ogg format supported by this plugin.
Source: http://feedproxy.google.com/~r/DesignResourceBox/~3/hOarDMj3frQ/
No comments:
Post a Comment