Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

HTML5-based audio player for the Never Out Of Beta podcast

branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.md

Never Out Of Beta Audio Player

Introduction

A jQuery plugin that adds a HTML5 audio player to an MP3 and provides a list of bookmarks.

By providing a <dl /> of timecodes and links, the player will highlight them at the appropriate time. Each <dt /> becomes a link that will seek the <audio /> player appropriately.

Usage

The player expects HTML in the following format:

<div class="bookmarked-audio">
    <div class="metadata">
        <h1 class="title">Friendly and possibly verbose title</h1>
        <h2 class="timestamp">August 27, 2011</h2>
        <div class="description">
            <p>A description of the audio. Can contain as much or a little markup as required.</p>
        </div>
    </div>
    <a class="source" href="http://www.example.com/source-audio-file.mp3">Download audio.</a>

    <dl class="bookmarks">
        <h3>Bookmarks in this podcast:</h3>
        <dt>00:01</dt>
        <dd>
            <a class="link" href="http://www.google.com">Google</a>
        </dd>
        <dt>00:02</dt>
        <dd>
            <a class="link" href="http://www.bbc.co.uk">BBC</a>
        </dd>
    </dl>
</div>

Each <dt /> should be a timestamp in the format mm:ss

The corresponding <dd /> may contain any number of <p /> and <a /> elements relevant to that bookmark.

To transform the player, simply call $.noobPlayer(), for example:

$(document).ready(function() {
    $('.bookmarked-audio').each(function(index, value) {
        $(this).noobPlayer();
    });
});

Contributions

If you find any bugs or have a feature suggestion, please feel free to use the GitHub tracker. In the spirit of things, you're encouraged to fork this repository and do whatever you like with it.

Win the game by raising a pull request and having your changes accepted.

Something went wrong with that request. Please try again.