Skip to content

tonyjcamp/html5-media-chapters

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Currently only working in Google Chrome, Safari and FireFox

Summary

The beginnings of a jQuery plugin that will allow you to time stamp an element, attach an event handler to it which will load an audio file, and jump to the specified time stamp.

I chose to use the yayQuery podcasts as a demo because they taught me so much. Learn, and share. Thanks Rebecca Murphey, Adam Sontag, Alex Sexton, Paul Irish. Follow these people on github and twitter. You will learn a ton.

How To Use

Give the element that will handle the click event a data-filname attribute which will serve as the filename to load into the audio player. For this attribute, you don't include the file extension. The extension defaults to .mp3, but can be changed. For example:

<span class="episode_title" data-filename="yayquery_0">Episode 0</span>

Now that you have your click handler and file to load, you need to add a chapter to the audio file. For that you need to add a data-timestamp attribute to the click handler for the chapter. For example:

<a href="#" class="loader" data-timestamp="2:45">_js Library</a>

This example would jump the yayquery_0.mp3 file to the 2 minute 45 second mark and start playing from there.

Next you need to call the new plugin on the click handler. It can be basic like so (uses default values for file type, directory and element classes):

$('.episode_title').mediaChapter();

By default, the plugin will look for HTML5 audio players with a class of audio, this can be overwritten by specifying a class of your choice like so:

$('.episode_title').mediaChapter({
  audioElement: $('.myaudio') // this is your audio class, name it whatever you like
});

Here are some more customizable variables you can use to suit your needs:

audioElement: $('.audio'), // Audio player that will load the audio file
audioChapter: $('.loader'), // Element that will have the data-timestamp for the chapter
audioDirectory: 'mp3' // Directory where audio files live

Changelog:

v.1.1 : January 19th, 2011

General

  • Now checks for audio type based on browser. You will need to have .ogg and .mp3 files for this to work properly.

v.1.0 : January 3rd, 2011

General

  • Very first commit. Still rough, but eff it.

About

Create timestamps on audio tags, and jump to them

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published