Users with modern browsers are increasing each day and making use of features like HTML5 audio sounds more and more logical.

AudioPlayer.js is a jQuery plugin for quickly placing a HTML5-powered audio player to any web page.

The player’s interface is chic (doesn’t use any images for that), has a responsive layout and touch support.

It has the major controls (play/pause, volume and duration) and weights only 4kb.

Displaying video on websites is both easy and hard as a good video experience usually requires a custom-styled, cross-browser and fast player.

Flowplayer, the popular HTML5 video player, offers a great experience with a completely customizable feature set.

One of the most important things when playing video is probably the browser support. The player does that perfectly with HTML5 by default and falling back to Flash when needed.

Flowplayer’s interface is completely customizable and it comes with 3 beautiful skins. Also, its layout is fluid and works in any screen size with no extra settings.

There is a web-based designer to create a completely new skin and also see how flexible it is.

It can be controlled very easily (keyboard and touch events support) and offers a (native) fullscreen mode too.

Cuepoints can be defined for any video, sub-titles can be added and the videos can even be displayed in slow-motion.

For a better customization, any HTML can be shown when the videos are preloading and once they are ended (good for presentations and branding).

Flowplayer integrates well with Google Analytics and can track “how long a video is played, how many times it is played and in which format (HTML5 or Flash).

Each video file is embeddable (if enabled) with the help of a share button that auto-generates an embed link.

All the functionality of the player can be controlled with a powerful API and it has callbacks on every level to interact with any event.

The player is open source and free to use under the GPL license. For commercial use, it requires a license.

And, Flowplayer team provides great support (paid support exists) and an active user community that discusses on their product forum.

How to join the giveaway?

Flowplayer is giving away 3 * Commercial licenses ($95 value/each) and in order to join:

• please comment to this post

And, the winners will be selected randomly on 06 May 2013 (1 week later) with the query below:

SELECT * FROM wp_comments WHERE comment_post_id=4037 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to all.

The winners

Here they are:

• bigcloud (comment #1263775)
• Techspy (comment #1263756)
• Federico Garcia (comment #1263809)

Congratulations.

Today, creating cool videos for any platform (web, TV, etc.) is not that hard with the help of high-quality footage.

VideoBlocks is a professional stock footage website to find 100,000+ stock videos, motion backgrounds, sound effects, production music and more.

Info: VideoBlocks is giving away 3 * 1 month (unlimited downloads) subscriptions ($79 value/each) to WRD readers and details can be found at the end of this post.

The website has a huge library which is well-categorized (slow-motion, nature, people, locations or cartoon, ambiance, horror.. for sounds) which eases browsing and locating the right resources.

In contrary to what you would expect, they are offered for a good price with a single plan of “unlimited downloads”. They can be used in any type of projects and no additional fees for that.

VideoBlocks’ library grows regularly with new resources being added each day and their footage is already being used by media giants ABC, MTV or National Geographic.

How to join the giveaway?

Commenting to this post is enough. Winners will be selected on 27 March 2013 (1 week later) with the query below and announced as an update to this post.:

SELECT * FROM wp_comments WHERE comment_post_id=3885 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck.

The winners:

• dlv (comment #1182947)
• Luca (comment #1182707)
• pablo luis rey (comment #1186747)

Congratulations to the winners and thanks to everyone for joining.

The Web Audio API that is developed by Google is easier to work with and has more features compared to alternatives. But, it still lacks of browser support.

Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.

It accepts multiple file formats for cross-browser compatibility, has caching and can play many sounds at the same time (it is also mute/un-mute them one-by-one or globally).

The sounds can be looped, a fadeIn/fadeOut effect exists and standard media controls are just a part of the library.

It is lightweight (5kb), has support for chaining methods and doesn’t require any JS frameworks.

HTML5 audio is awesome, so easy to implement and works fast. The only thing that can stop you from using it is the lack of support for older browsers.

Audio5js is a lightweight JavaScript library that solves this compatibility issue nicely.

It provides support for multiple codecs and fallback to a Flash-powered MP3 player when needed.

The library auto-detects the browser, knows its capabilities and loads the right player with the right codec.

An API exists for controlling the player and has the functions for “load, play, playPause, pause, volume and seek”.

Also, there are methods for getting the details (playing, duration, position, load-percent, seekable or not) of the item being played

SoundCloud is an awesome application with a huge music library and it has multiple ways for integrating any selected tracks to websites.

Stratus, a free-to-use and jQuery-powered widget, offers an alternative and tight integration with a player that can sit in the bottom or top of web pages.

The widget accepts any number of tracks, sets, users or groups to play, can be set to auto-play and has an optional animation on initial load.

There are controls for volume, sharing, commenting/favoriting and a pop-up player link exists so that users changing pages won’t lose the tracks.

Besides mentioning the tracks/sets as a list, adding a custom class to any SoundCloud link also works (handy for websites with lots of SoundCloud links) and the player can be skinned with CSS.

BigVideo.js is a jQuery plugin for easily inserting fit-to-fill background videos to websites.

It can play a video silently or can be used as a playlist to enable users to choose any item they prefer.

The plugin is built on top of Video.js, makes use of jQuery UI and has player controls so that the background video can be controlled.

And, it can also show images which is handy for creating a fallback for devices that don't support auto-play.

Info: The demos of the resource don't work as the source video files are unavailable.

Acorn Media Player is a jQuery plugin for creating a customizable HTML5 media player with support for accessibility.

The player can be completely controlled with keyboard (with standard tab-based navigation), has screen-reader support + accessible themes and various other accessibility tweaks.

There is also support for closed captions and a dynamic transcript generated from the selected captions is provided.

Acorn Media Player can be themed with ease, can display videos in fullscreen, informs users on loading processes with loading + buffering indicators and can even remember the volume level used with HTML5 localStorage.

The sliders (seek and volume) can either use jQuery UI's widgets or a custom one is provided as well and few other options exist (like the direction of the volume slider) for further customization.

You'll remember JSMad, a pure JavaScript MP3 decoder (which was previously featured at WRD).

It came with ID3 support, works perfect in Firefox and requires "enabling Web Audio API" in Chrome.

The developers of JSMad have recently released a similar resource named ALAC.js.

It is also JavaScript library but for decoding/playing ALAC files (that are supported on iPhone, iPad, most iPods, Mac and iTunes).

Although HTML5 audio is the most compatible way to play audio in iOS devices, ALAC.js can be an alternative.

P.S. it is a port of the recently open sourced Apple Lossless decoder.

In parallel with the popularity of videos on web, HTML5 video is already being used widely. And, for sound, HTML5 audio is gaining ground for sure.

AreWePlayingYet? is an initiative and open source test suite that aims to bring more harmony into HTML5 Audio implementations.

Using the suite, anyone can easily test HTML5 audio capabilities of a browser and find out the features supported/unsupported.

It is built by SoundCloud and also enables us to quickly add new tests (if wanted).