Feature request: Clickable timecodes with fancy URLs.

[jensimmons]

I'd love for users to be able to scan the transcript, find timecode, and click on those timecode to make the audio player jump to that place in the show.

Shoptalk does this. See their timecode, click on any of them — bam. In fact, when you do click the timecode, it alters the URL, and then you have a URL to that place in the show. Which you can then share on Twitter, etc.

Here's an example of such a URL: http://shoptalkshow.com/episodes/152-dan-denney/#t=23:54

Awesome.

I've been talking to @jennschlick about this. She put timestamps in the latest transcript, for ep96 (coming out Feb 18). Jenn also put together this pen: http://codepen.io/jennschlick/pen/yyvdgL using code from Shoptalk. (We should make sure either that code is open source, or it's cool with Chris Coyier to use it before we do. I can ping him if needed.)

I'd love for this to work on The Web Ahead. What will it take to put the pieces together and deploy this?

[jensimmons]

For reference, this transcript is interesting. http://www.ted.com/talks/al_gore_on_averting_climate_crisis/transcript?language=en

A very different usecase, since it's for a video. And has translations. But it's still interesting to see what another team thinks of as an "interactive transcript". And to see how the timestamps are styled.

The javascript might be interesting — clicking on words in the transcript jump to that place in the video.

[kingkool68]

Making the timestamps clickable hyperlinks isn't too hard using PHP.

I'm assuming the transcript is entered as one big blob of text we'll call $transcript. You can use a regular expression to do a find and replace. Something like this:

$transcript = preg_replace( '/(\[(\d\d):(\d\d):(\d\d)\])/i', '<a href="#timestamp-$2-$3-$4" id="timestamp-$2-$3-$4">$1</a>', $transcript );

$1 references the original timestamp in the text, [00:35:37] for example... $2 references the hour, 00 for example... $3 references the minute, 35 for example... $4 references the seconds, 37 for example...

We take all that and wrap the original timestamp in a link with an anchor link and an ID in the format of timestamp-<hour>-<minute>-<seconds> The rendered markup will look like this then...

<a href="#timestamp-00-35-37" id="timestamp-00-35-37">[00:35:37]</a>

[kingkool68]

Controlling the audio player via JavaScript is pretty straight forward as well...

// Reference the only <audio> element on the page...
var player = document.getElementsByTagName('audio')[0];

// Set the current time to the number of seconds since the beginning. In this case the player would jump to 2:02... 
player.currentTime = 122

// Make sure the audio player starts playing....
player.play()

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