I got my start as a “webmaster” in the Crocker-ian sense. I wrote jSyncWithMedia as a project for my master’s degree in education. With it you can synchronize a slide and caption show to your speech or video using the native <audio> and <video> tags. It contains some naïve and outright bad code, but it’s based on a thesis, and I got it to work. I noted that storytelling is in many ways central to teaching, and narration is at the center of storytelling. Teachers and storytellers highlight certain phrases, create mental images and metaphors, to emphasize the specifics of what they’re telling. I knew html css sql and was trying out JavaScript using only resources available on the Internet. I tried to synchronize events to an audio and or visual timeline. If nothing else, I proved that a tenacious person with strong but basic HTML/CSS/JavaScript background and access to a search engine could, in 2010, build a working jQuery plugin.

It’s nothing like Mozilla’s Popcorn.js in scalability, but If there’s one thing about it that’s still interesting it might be the CSS animation based on WAI-ARIA attributes aria-expanded aria-hidden and their values, which I manipulated with jQuery.

Selectors $(‘[aria-expanded=”false”]’) $(‘[aria-hidden=”true”]’)

/* CSS file
 * A fade in and out that can be controlled
 * by changing aria- attribute values
 * programmatically.
 */

[aria-expanded="false"] {
    display:none; 
} 

[aria-hidden="true"] {
    visibility:invisible; 
} 

[aria-expanded="false"] {
	opacity: 0;
	-webkit-transition: opacity 0.5s linear;
	-moz-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	-ms-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;
}

[aria-expanded="true"] {
	opacity: 1;
	-webkit-transition: opacity 0.5s linear;
	-moz-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	-ms-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;
}

In theory this can work with other CSS animations. The big challenge for practicality is the timeline interface. I created one that works, using Audacity .aup files, which are XML documents, and the timings extracted from its label track.

<!-- SNIPPET FROM .aup FILE CONTAINING LABELS -->
    <labeltrack name="Label Track" numlabels="11" height="253" minimized="0">
        <label t="1.69726544" t1="11.83946136" title="li:woodshed"/>
        <label t="11.92225480" t1="27.32183391" title="li:busting"/>
        <label t="20.79346939" t1="62.46764754" title="li:turntable"/>
        <label t="34.31787926" t1="43.54934739" title="li:changes the pitch"/>
        <label t="50.00723540" t1="62.46764754" title="a:audacity.soundforge.net"/>
        <label t="53.85713018" t1="62.50904425" title="img:audacity_logo.png"/>
        <label t="62.46764754" t1="62.55044097" title="off:ALL"/>
        <label t="76.70811855" t1="91.03138299" title="img:copy-paste.png"/>
        <label t="91.11417643" t1="109.90828642" title="li:copy menu item"/>
        <label t="110.15666673" t1="114.79309915" title="li:easily practice"/>
        <label t="114.79309915" t1="123.81758369"
               title="li:Choose File-&gt;Save Project As..."/>
    </labeltrack>

§

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

http://www.w3.org/2010/05/video/mediaevents.html