Warning: this is an htmlized version!
The original is across this link,
and the conversion rules are here.
//                  _ _           _     
//   __ _ _   _  __| (_) ___     (_)___ 
//  / _` | | | |/ _` | |/ _ \    | / __|
// | (_| | |_| | (_| | | (_) |   | \__ \
//  \__,_|\__,_|\__,_|_|\___/   _/ |___/
//                             |__/     
//
// JavaScript code for handling indexed audios
// and for htmlizing text with audio timestamps
// From: http://angg.twu.net/blogme3/html5-audio-mini.js.html
//                    (find-blogme3 "html5-audio-mini.js")
// See:  http://angg.twu.net/ferramentas-para-ativistas.html
//                 (find-TH "ferramentas-para-ativistas")
//       http://angg.twu.net/audios/
//            (find-THfile  "audios/")
//            (find-THLfile "audios/")
// Author: Eduardo Ochs <eduardoochs@gmail.com>
// Version: 2014mar21
//
eltbyid       = function (id)      { return document.getElementById(id); }
from_textarea = function (id)      { return eltbyid(id).value; }
from_pre      = function (id)      { return eltbyid(id).innerHTML; }
to_textarea   = function (id, txt) { eltbyid(id).innerHTML = txt; }
to_pre        = function (id, txt) { eltbyid(id).innerHTML = txt; }

toseconds = function (t) {
  if (typeof(t) == "number") { return t; }
  var a = "0:00:00";
  var b = a.substr(0, a.length - t.length) + t;
  var h  = b.substr(0, 1);
  var mm = b.substr(2, 2);
  var ss = b.substr(5, 2);
  return h*3600+mm*60+ss*1;
}

function audios () { return document.getElementsByTagName("audio"); }
function audio  (n) { return audios()[n|0]; }
function playat (n, t) { audio(n).currentTime = toseconds(t); audio(n).play(); }

function naudios () { return audios().length; }
function audiosdo (f) { for (var i=0; i < naudios(); i++) f(audio(i)); }
function pauseall () { audiosdo(function (a) { a.pause(); }); }

function pl (n, t) { pauseall(); playat(n, t); }

time_re = /[0-9]?[0-9]:[0-9][0-9](:[0-9][0-9])?/g;
function audio_seekbox (n, t) {
  var js = "pl("+n+",'"+t+"')";
  return '<input size=8 value="'+t+'">(<a href="javascript:'+js+'">'+t+'</a>)';
}
function audio_htmlize (n, str) {
  var f = function (t) { return audio_seekbox(n, t); }
  return str.replace(time_re, f);
}
function audio_addkeybindings_to_input (n, inp) {
  inp.addEventListener('keydown', function (e) {
      if (e.keyCode == 13) pl(n, e.target.value);
      if (e.keyCode == 32) { pauseall(); e.preventDefault(); }
    });
}
function audio_addkeybindings (n, pre_id) {
  var c = document.getElementById(pre_id).children;
  for (var i in c)
    if (c[i].tagName == "INPUT")
      audio_addkeybindings_to_input(n, c[i]);
}
function audio_activate (n, pre_id) {
  to_pre(pre_id, audio_htmlize(n, from_pre(pre_id)));
  audio_addkeybindings(n, pre_id);
}
function audio_activate_from_textarea (n, textarea_id, pre_id) {
  to_pre(pre_id, audio_htmlize(n, from_textarea(textarea_id)));
  audio_addkeybindings(n, pre_id);
}

function activate_audio_links_a (pre_id) { audio_activate (0, pre_id); }
function activate_audio_links_b (pre_id) { audio_activate (1, pre_id); }
function activate_audio_links_c (pre_id) { audio_activate (2, pre_id); }

// unused:
location_t = function () {
  var A = window.location.href.match(/[?&]t=([^&]+)/);
  if (A) { return A[1]; }
}

// Typical uses:
// if we have a textarea with id="input_a" and a pre with id="output_a",
//   audio_activate_from_textarea(0, "input_a", "output_a")
// if we have a pre with id="pre_b",
//   audio_activate(0, "pre_b")