jquery

— Resource (external link)

Skills: CSS, HTML5, JavaScript, jQuery

Tags: @font-face, css, javascript, jquery, mobile

Modernizr is a handy JavaScript library that detects the capabilities of the browser viewing your site, and then dynamically adds classes to the <html> root element on the page, based on what it detects. You can then write your CSS and jQuery selectors using these classes. An example use would be to detect support for the @font-face CSS property (I am doing that on this site). You can also use it to detect support for various HTML5 elements. I have also heard of people using it to make their sites more mobile browser-friendly.

Cool audio player solution for pages with multiple audio clips

— Blog Post

Skills: JavaScript, jQuery

Tags: audio, css, javascript, jquery, mp3, tutorials

This tutorial demonstrates one way of setting up an audio player for a page with multiple audio clips. The end result is the following.

Rain and thunder

Elevator door

Door handle creaking

Applause

School bell

Here's a little background on what led to this solution. Some time ago, I was asked to build a small site that included dozens of audio clips on one page. The client suggested I base this site on an existing site of hers that also had a page with dozens of audio clips. Visitors to the site could play different audio clips by clicking on a play button for each clip. The play buttons for the clips were laid out in a table similar to the one depicted below:

Table of audio clip play buttons