Transcript Helper

.md

Transcript Helper

What this is

This script is adds some little doodads to your page to help you transcribe local audio files, directly in the browser. It even works within Google Docs. This has only been tested in Google Chrome, and all the instructions are specifically for Chrome; though there's no reason the code itself shouldn't work in other browsers.

Installation is a little fiddly, but doesn't take long.

How to install

• Open Chrome Dev Tools. (CTRL + SHIFT + I)
• Go the "Sources" tab.
• If the left sidebar is not open, click the arrow to the left to bring it out.
• Within the left sidebar, go to the "Snippets" tab. You may have to click the double arrows to reveal this option.
• Click "New Snippet."
• Paste the code in the snippet.js file (below) into the big text field to the right. Hit CTRL + S to save it. Optionally, you can rename the snippet to whatever you wish.

How to use

• Go to any page on the web.
• Run the snippet. You can do this in a number of ways:
  • Right-click the snippet in the sidebar and select "Run."
  • After clicking in the text box, press CTRL + Enter.
• After the snippet's been started, you can just close the Chrome Dev Tools and carry on as normal.
• A file input will appear on the page to the top-left. Click it and select the audio file you want to play.
• After selecting an audio file, the file will start playing. The file input will be replaced by a box displaying the current time within the file.
• To scan to a specific time within the file, type the new time into that box, and press Enter.
• There are keyboard shortcuts built in to the snippet, which you can press to do different things. You can change the configuration at the top of the file by fiddling with the values. The default configuration is the following:
  • Play: F1
  • Pause: F2
  • Slower: F6 (slows down playback by 10%, to a minmum of 10% speed)
  • Faster: F7 (speeds up playback by 10%, to a maximum of 100% speed)
  • Back: F9 (rewinds 2 seconds)
  • Forward: F10 (skips 4 seconds)

A note for Chromebook users: You can use the top row of your keyboard as function keys. There are two ways to do so:

• Hold the Search key and press a top-row key (except escape and the power key).
• Or to turn on the Function keys so they default to function keys, and when you hold the Search key they become "Back," "Forward," etc.... go to Settings > Device > Keyboard > turn on "Treat top-row keys as function keys."

You may change the values of the configuration at the top of the code, but I'd recommend the average user should not change anything below that to avoid breaking it.

snippet.js

var _092138120_settings = {
	shortcuts: {
		play: "F1", pause: "F2",
		slower: "F6", faster: "F7",
		back: "F9", forward: "F10"
	},

	change_speed_amount: 0.1,

	// in seconds
	back_amount: 2,
	forward_amount: 4
};

//// END OF CONFIGURATION



console.log("starting script...");
//  keydown     update time  audio source  time input
var _983742394, _32840238,   _8392482349,  _78343845;

(function() {

var win = document.querySelector(".docs-texteventtarget-iframe");
if (win === null) { win = window; }
else { win = win.contentWindow; }

if (_983742394) { win.removeEventListener("keydown", _983742394, true); _983742394 = null; }
if (_32840238) { cancelAnimationFrame(_32840238); _32840238 = NaN; }
if (_8392482349) { _8392482349.pause(); _8392482349 = null; }
if (_78343845) { _78343845.parentNode.removeChild(_78343845); _78343845 = null; }


var shortcuts = {
	by_key: {},
	by_action: {},
	set: function(key, action) {
		this.by_key[key] = action;
		
		if (this.by_action[action]) {
			this.by_key[this.by_action[action]] = "";
		}
		this.by_action[action] = key;
	}
};

for (var action in _092138120_settings.shortcuts) {
	shortcuts.set(_092138120_settings.shortcuts[action], action);
}

var source;

var actions = {
	play: function() {
		if (source.paused) { source.play(); }
	},
	pause: function() {
		if (!source.paused) { source.pause(); }
	},

	slower: function() {
		source.playbackRate = Math.max(0.1, source.playbackRate - _092138120_settings.change_speed_amount);
	},
	faster: function() {
		source.playbackRate = Math.min(source.playbackRate + _092138120_settings.change_speed_amount, 1);
	},

	back: function() {
		source.currentTime = Math.max(0, source.currentTime - _092138120_settings.back_amount);
	},
	forward: function() {
		source.currentTime = Math.min(source.currentTime + _092138120_settings.forward_amount, source.duration);
	}
};


win.addEventListener("keydown", _983742394 = function(e) {
	var action_name = shortcuts.by_key[e.key];
	if (action_name) {
		e.preventDefault();
		e.stopPropagation();
		console.log(action_name);

		if (source) {
			actions[action_name]();
		}
	}
}, true);

var time_input = _78343845 = document.createElement("input");
document.body.appendChild(time_input);
time_input.type = "text"; time_input.style.cssText = "position:absolute; top:0;left:0; z-index:999999; width:54px;";

time_input.focussed = false;
time_input.onfocus = function() {
	time_input.focussed = true;
};
time_input.onblur = function() {
	time_input.focussed = false;
};

time_input.onkeydown = function(e) {
	if (e.key === "Enter") {
		var time = this.value.split(":");
		while (time.length < 3) { time.unshift("0"); }
		source.currentTime = Date.parse("January 1, 1970, " + time.join(":") + " UTC") / 1000;
		time_input.blur();
	}
};

function pad(v, width) {
	v = ""+v;
	while(v.length<width) {v = "0"+v; }
	return v;
}
function seconds_to_time(seconds) {
	var s = seconds % 60,
		minutes = (seconds - s) / 60,
		m = minutes % 60,
		h = (minutes - m) / 60;

	return pad(h|0,2) + ":" + pad(m|0, 2) + ":"+ pad(s|0, 2);
}

function update() {
	if (source) {
		if (!time_input.focussed) {
			time_input.value = seconds_to_time(source.currentTime);
		}
	}
	_32840238 = requestAnimationFrame(update);
}
update();


var file_input = document.createElement("input");
file_input.type = "file"; file_input.accept = "audio/*";
file_input.style.cssText = "position:absolute;left:0;top:0;z-index:999999999;";
file_input.onchange = function() {
	if (this.files.length > 0) {
		source = _8392482349 = new Audio(URL.createObjectURL(this.files[0]));
		source.oncanplay = function() {
			source.play();
			source.oncanplay = null;
		};
	}
	else {
		alert("No file selected.");
	}

	document.body.removeChild(file_input);
	file_input = null;
};

document.body.appendChild(file_input);


})();

console.log("script running.");