Fork me on GitHub

MediaAlignedText Player Demo

The Hobbit - J.R.R Tokien

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means comfort.

It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with panelled walls, and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats - the hobbit was fond of visitors.

HTML for the Player Demo

In HTML Head 
<!-- Include necessary css and javascript -->
<link type="text/css" href="css/skin/jplayer.blue.monday.css" rel="stylesheet" />
<link type="text/css" href="css/mediaAlignedText.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery.mediaAlignedText.js"></script>


<!-- Setup Player -->
<script type="text/javascript">
    var media_files = [{
        "title":"The Hobbit - Chapter 1a",
        "media_type":"AUDIO",
        "media": {
            mp3: "media_files/hobbit-1a.mp3",
            wav: "media_files/hobbit-1a.wav"
        }
    }];
    $(document).ready(function(){
        $('#jquery_jplayer_1').mediaAlignedText({
            'media_files': media_files
        });
    });
</script>
In HTML Body - see the HyperAudio section of the developer guide for more information on the time aligned tagging listed below. 
        <div id="jquery_jplayer_1"></div>
        <div id="mat_jplayer_controls"></div>
        <div id="mat_text_viewer">
            <h3>The Hobbit - J.R.R Tokien</h3>
             <span data-time_start="0">In</span>
             <span data-time_start="1160">a</span>
             <span data-time_start="1460">hole</span>
             <span data-time_start="1720">in</span>
             <span data-time_start="1920">the</span>
             <span data-time_start="2190">ground</span>
             <span data-time_start="2790">there</span>
             <span data-time_start="3020">lived</span>
             <span data-time_start="3300">a</span>
             <span data-time_start="3530">hobbit</span>.
             ...
             <span data-time_start="41220">fond</span>
             <span data-time_start="41470">of</span>
             <span data-time_start="41660">visitors</span>. 
        </div>
get the source code on GitHub : jrweth/MediaAlignedText