JSFiddle - React, Tailwind, and code Playground

by wsgrah

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<div class="entireclip">
    <audio id="T106" controls="true" preload="auto">
        <source src="http://faulkner.lib.virginia.edu/static/audio/T106.mp3" type="audio/mpeg; codecs='mp3';"></source>
        <source src="http://faulkner.lib.virginia.edu/static/audio/T106.ogg" type="audio/ogg; codecs='vorbis'"></source>
         </audio>
</div>

<hr/>

<div class="clip">
    <p><i class="icon-play-sign" id="wfaudio02_1.1" data-start="00:00:00.00" data-end="00:00:23.93"></i></p>
   <p>Welcome. There's nothing to be said here tonight except that Mr. William Faulkner will read a selection from the "Spotted Horses." Sir.</p>
</div>

<hr/>

<div class="clip">
    <p><i class="icon-play-sign" id="wfaudio02_1.2" data-start="00:00:23.94" data-end="00:00:44.37"></i></p>
   <p>I can see now this is going to become a very bad habit with me, to
stand up like this with a lot of nice people that don't dare say, "Shut up and sit down." This is about the horses. </p>
</div>

<hr/>

<div class="clip">
    <p><i class="icon-play-sign" id="wfaudio02_1.3" data-start="00:00:44.59" data-end="00:01:55.07"></i></p>
   <p>When the Texan, picking his teeth with a splintered kitchen match, emerged from the house twenty minutes later, the tethered wagons and riding horses and mules extended from the lot gate to Varner's store, and there were more than fifty men now standing along the fence beside the gate, watching him quietly, a little covertly, as he approached, rolling a little, slightly bowlegged, the high heels of his carved boots printing neatly into the dust. "Morning, gents," he said. "Here, bud," he said to the little boy, who stood slightly behind him, looking at the protruding butt of the pistol. He took a coin from his pocket and gave it to the boy. "Run to...

CSS

i { font-size: 2em; }

JavaScript

$(document).ready(function() {
  $('.icon-play-sign').click(function() {
    $(this).hide('slow');
    var start = $(this).data('start');
    var end = $(this).data('end');

    var audio = new Audio();
    var canPlayOgg = !!audio.canPlayType && audio.canPlayType('audio/ogg; codecs="vorbis"') !== "";
      
    var file = $('.entireclip > audio').attr('id');
    

    var baseUrl = "http://faulkner.lib.virginia.edu/static/audio/";
    baseUrl += canPlayOgg ? file + ".ogg" : file + '.mp3';
    baseUrl += "#t=" + start + "," + end;

    console.log(baseUrl);

    audio.setAttribute('src', baseUrl);
    audio.controls = true;
    audio.preload = 'auto';

    $(this).parent().append(audio);

    audio.play();

    console.log('start ', start);
    console.log('end ', end);

  });

});