Permalink
Browse files

Initial commit

  • Loading branch information...
ejb committed Oct 5, 2013
0 parents commit 73c2ec1353be41b838887bb2e93e830cd4b2aa4c
Showing with 286 additions and 0 deletions.
  1. +41 −0 index.htm
  2. +194 −0 script.js
  3. +51 −0 style.css
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Transcriber</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="file-input-wrapper">
<button class="btn-file-input">Upload File</button>
<input id="attach" type="file" name="file" accept="audio/*" />
</div>
<div id="lastfile"></div>
<div class="controls">
<div class="play-pause">>/||</div>
<div class="skip-backwards"><<</div>
<div class="skip-forwards">>></div>
<div class="speed-down">slower</div>
<div class="speed-up">faster</div>
<div class="speed-reset">reset</div>
</div>
<textarea id="textbox" class="mousetrap">
Enter your comments here...
</textarea>
<script src="http://cdn.craig.is/js/mousetrap/mousetrap.js?0b092"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
194 script.js
@@ -0,0 +1,194 @@
(function(){
var audioPlayer;
$('#attach').change(function() {
var file = this.files[0];
var reader = new FileReader();
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) {
$('#audio').remove();
$('body').append('<audio id="audio" src="' + evt.target.result + '" controls></audio>');
document.getElementById('audio').addEventListener('loadedmetadata', function(){
console.log('Loading complete.')
});
}
};
reader.onloadstart = function(evt) {
console.log('loading file '+file.name+'...');
localStorage.setItem("lastfile", file.name);
};
reader.readAsDataURL(file);
});
// autosave every second
var field = document.getElementById("textbox");
if ( localStorage.getItem("autosave")) {
field.value = localStorage.getItem("autosave");
}
setInterval(function(){
localStorage.setItem("autosave", field.value);
}, 1000);
// load existing file name
if ( localStorage.getItem("lastfile") ) {
document.getElementById("lastfile").innerHTML = "Last file: "+localStorage.getItem("lastfile");
}
// play/pause
var playing = false;
function pauseResume(){
if (playing == true){
document.getElementById('audio').pause();
} else {
document.getElementById('audio').play();
};
playing = !playing;
};
// get timestamp
var timestamp;
function getTimestamp(){
// get timestap
var time = document.getElementById('audio').currentTime
var minutes = Math.floor(time / 60);
var seconds = ("0" + Math.round( time - minutes * 60 ) ).slice(-2);
return minutes+":"+seconds;
};
function insertTimestamp(){
insertAtCaret('textbox',"["+getTimestamp()+"]" );
}
// skip forward
function skip(direction){
var audio = document.getElementById('audio');
if (direction == "forwards"){
audio.currentTime = audio.currentTime+1.5;
} else if (direction == "backwards") {
audio.currentTime = audio.currentTime-1.5;
}
}
// speed
function speed(newSpeed){
var newSpeedNumber;
var currentSpeed = document.getElementById('audio').playbackRate;
if (newSpeed == "up"){
newSpeedNumber = currentSpeed+0.1;
} else if (newSpeed == "down"){
newSpeedNumber = currentSpeed-0.1;
} else if (newSpeed == "reset"){
newSpeedNumber = 1;
};
document.getElementById('audio').playbackRate = newSpeedNumber;
}
// keyboard shortcuts
Mousetrap.bind('escape', function(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
// internet explorer
e.returnValue = false;
}
pauseResume();
return false;
});
Mousetrap.bind('f1', function(e) {
skip('backwards');
return false;
});
Mousetrap.bind('f2', function(e) {
skip('forwards');
return false;
});
Mousetrap.bind('f3', function(e) {
speed('down');
return false;
});
Mousetrap.bind('f4', function(e) {
speed('up');
return false;
});
Mousetrap.bind('mod+i', function(e) {
insertTimestamp();
return false;
});
$('.play-pause').click(function(){
playPause();
});
$('.skip-backwards').click(function(){
skip('backwards');
});
$('.skip-forwards').click(function(){
skip('forwards');
});
$('.speed-down').click(function(){
speed('down');
});
$('speed-up').click(function(){
speed('up');
});
$('.speed-reset').click(function(){
speed('reset');
});
// insert text at cursor
function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false ) );
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
strPos = range.text.length;
}
else if (br == "ff") strPos = txtarea.selectionStart;
var front = (txtarea.value).substring(0,strPos);
var back = (txtarea.value).substring(strPos,txtarea.value.length);
txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}
function detectFormats(format){
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/'+format+';').replace(/no/, ''));
}
function listSupportedFormats(){
var formats = ['mp3', 'ogg', 'webm', 'wav'];
formats.forEach(function(format) {
console.log(format);
});
}
console.log( detectFormats() );
})(); // end script
@@ -0,0 +1,51 @@
#textbox {
width: 80%;
height: 300px;
margin-top: 20px;
}
.controls div {
padding: 5px;
border: 1px solid grey;
border-radius: 3px;
margin-right: 10px;
display: inline-block;
}
.file-input-wrapper {
width: 200px;
height: 40px;
overflow: hidden;
position: relative;
}
.file-input-wrapper > input[type="file"] {
font-size: 200px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
cursor: pointer;
}
.file-input-wrapper > .btn-file-input {
display: inline-block;
width: 200px;
height: 40px;
}
.btn-file-input::-moz-focus-inner {
border:0;
padding:0
}
.btn-file-input {
width:auto;
border:0 none;
margin:0;
padding:0;
background:transparent;
overflow:visible;
/* Stupid IE */
font:14px arial, sans-serif;
#vertical-align:middle; /* IE6,IE7 */
border: 1px solid black;
}

0 comments on commit 73c2ec1

Please sign in to comment.