index.html

<!doctype html>
<html>
    <head>
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-LQNKEDJYY9"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'G-LQNKEDJYY9');
        </script>
        <meta charset="utf-8">
        <title>Transcriber</title>
        <style>
            @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

            body {
                background-color: #eee8d5;
                box-sizing: border-box;
                color: #002b36;
                display: flex;
                flex-direction: column;
                font-family: sans-serif;
                height: 100vh;
                margin: 0;
                padding: 15px;
            }

            #audio {
                align-items: center;
                display: flex;
                flex-grow: 1;
                margin-bottom: 1em;
                margin-right: 64px;
            }

            #audio-file {
                max-width: 300px;
            }

            #audio-player {
                flex-grow: 1;
                margin: 0 10px;
            }
            
            #text {
                display: flex;
                flex-direction: column;
                flex-grow: 1;
            }

            #text textarea {
                align-items: stretch;
                background-color: #fdf6e3;
                color: inherit;
                flex-grow: 1;
                font-family: serif;
                font-size: 12pt;
                resize: none;
            }

            .player-control {
                align-items: center;
                background: none;
                border: none;
                cursor: pointer;
                display: inline-flex;
                font-size: 18px;
                justify-content: center;
                padding: 4px;
            }
        </style>
    </head>
    <body>
        <div style="display: flex; justify-content: space-between;">
            <section id="audio">
                <input id="audio-file" type="file" accept="audio/*" autofocus>
                <audio id="audio-player" controls></audio>
                <div id="ancillary-controls">
                    <span>
                        <button id="rewind" class="player-control" title="Rewind 2 seconds. Shortcut: Numpad 4"><i class="fa fa-backward"></i></button>
                        <button id="forward" class="player-control" title="Forward 2 seconds. Shortcut: Numpad 6"><i class="fa fa-forward"></i></button>
                    </span>
                    <span>
                        speed: ×<label id="playback-rate">1.00</label>
                        <button id="speed-up" class="player-control" title="Increase playback speed by 5%. Shortcut: Numpad 8"><i class="fa fa-angle-double-up"></i></button>
                        <button id="slow-down" class="player-control" title="Decrease playback speed by 5%. Shortcut: Numpad 2"><i class="fa fa-angle-double-down"></i></button>
                    </span>
                    <span>
                        <button id="timecode" class="player-control" title="Insert timecode. Shortcut: Numpad 0"><i class="fa fa-clock-o"></i></button>
                    </span>
                </div>
            </section>
            <a href="https://github.com/siliconbrain/transcriber" title="View source on GitHub" style="color: inherit;"><i class="fa fa-github" style="font-size: 32px"></i></a>
        </div>
        <section id="text">
            <textarea></textarea>
        </section>
        <script>
            var player = document.querySelector('#audio-player');
            var playbackRateIndicator = document.querySelector('#playback-rate');
            var playbackRateIncrement = 0.05;
            var timeJumpIncrement = 2;
            var textArea = document.querySelector('#text textarea');

            function changePlaybackRate(value) {
                player.playbackRate += value;
                playbackRateIndicator.innerHTML = player.playbackRate.toFixed(2);
            }
            function increasePlaybackSpeed() {
                changePlaybackRate(+playbackRateIncrement);
            }
            function decreasePlaybackSpeed() {
                changePlaybackRate(-playbackRateIncrement);
            }

            function jumpBackward() {
                player.currentTime -= timeJumpIncrement;
            }
            function jumpForward() {
                player.currentTime += timeJumpIncrement;
            }

            function pad2(value) {
                return ('00' + value).slice(-2);
            }

            function pad3(value) {
                return ('000' + value).slice(-3);
            }

            function getTimecode() {
                const totalSeconds = player.currentTime;
                const totalHours = Math.floor(totalSeconds / 3600);
                const minutes = Math.floor((totalSeconds % 3600) / 60);
                const seconds = Math.floor(totalSeconds % 60);
                const milliseconds = Math.floor((totalSeconds % 1) * 1000);

                return pad2(totalHours) + ':' + pad2(minutes) + ':' + pad2(seconds) + ',' + pad3(milliseconds);
            }

            function insertTimecode() {
                textArea.value += '[' + getTimecode() + ']';
            }

            function onKeypress(e) {
                switch (e.code) {
                    case 'Numpad4': jumpBackward(); break;
                    case 'Numpad6': jumpForward(); break;
                    case 'Numpad2': decreasePlaybackSpeed(); break;
                    case 'Numpad8': increasePlaybackSpeed(); break;
                    case 'Numpad5': player.paused ? player.play() : player.pause(); break;
                    case 'Numpad0': insertTimecode(); break;
                    default: return;  // skip default prevention
                } 
                e.preventDefault();
            }

            document.querySelector('#audio-file').onchange = function(e) {
                player.src = URL.createObjectURL(e.target.files[0]);
                textArea.focus();
            };

            document.addEventListener('keypress', onKeypress, true);
            player.addEventListener('volumechange', function(e) {
                localStorage['audio-volume'] = e.target.volume;
            });
            document.querySelector('#rewind').addEventListener('click', jumpBackward);
            document.querySelector('#forward').addEventListener('click', jumpForward);
            document.querySelector('#speed-up').addEventListener('click', increasePlaybackSpeed);
            document.querySelector('#slow-down').addEventListener('click', decreasePlaybackSpeed);
            document.querySelector('#timecode').addEventListener('click', insertTimecode);

            player.volume = localStorage['audio-volume'] || 1;
        </script>
    </body>
</html>