JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<h1>Magic Audio Player</h1>
<h2>heck yeah!!</h2>
<div id="magicPlayer" ng-app="magicPlayer">
    <input id="audio_file" type="file" accept="audio/*" />
    <audio id="audio" controls ></audio>
    
    <p>
        playback rate
        <button onclick="slower()">-</button>
        <span id="playbackRate">1.0</span>
        <button onclick="faster()">+</button>
    </p>
    
    <h3>Bookmarks</h3>
    <ul id="bookmarks">
        
    </ul>
    
    <p>
        Press Shift + 1-9 to set a bookmark, then 1-9 to jump to that bookmark.  Space pauses.  0 always takes you to the start. 
    </p>
    
    <p>Use &lt; and &gt; to adjust playback rate (you don't have to press Shift)</p>
    
    <p>Use [ and ] to jump 1 second and { and } to jump five seconds.</p>
</div>

CSS

audio::active {
    background: red
}

JavaScript

//TODO:
//angular.module('magicPlayer', [])

var audio = document.getElementById('audio')
var bookmarksListEl = document.getElementById('bookmarks')

audio_file.onchange = function(){
    var files = this.files;
    if (!files[0]) return;
    var file = URL.createObjectURL(files[0]); 
    audio.src = file; 
    audio.play();
    //for keyboard events
    audio.focus();
};

audio.onplay = audio.onplaying = audio.onpause = function(e) {
    console.log(e)
}
var RATE_INCREASE = Math.pow(2, .2);
var RATE_DECREASE = 1 / RATE_INCREASE;
var RATE_MAX =  2;
var RATE_MIN = .5;
var currentRate = 1;
var bookmarks = [new Bookmark(0, 0)];

drawBookmarks();

function faster() {
    adjustPlaybackRate(RATE_INCREASE);
}

function slower() {
    adjustPlaybackRate(RATE_DECREASE);
}

function adjustPlaybackRate(delta) {
    var rate = currentRate;
    rate *= delta;
    rate = Math.max(RATE_MIN, rate);
    rate = Math.min(RATE_MAX, rate);
    currentRate = rate;
    
    setPlaybackRate(currentRate);
}

function setPlaybackRate(rate) {
    audio.playbackRate = rate;
    var roundedRate = ((rate * 10) | 0) / 10;
    document.getElementById('playbackRate').innerHTML = roundedRate;
}

window.onkeyup = function(e) {
    console.log(e)
    if (e.which == 48 && !e.shiftKey) {
        goto(0);
    } 
    if (e.which > 48 && e.which <= 57) {
        var bookmarkIndex = e.which - 48;
        
        if (e.shiftKey || !bookmarks[bookmarkIndex]) {
            addBookmark(bookmarkIndex, audio.currentTime)
        }
        else {
            goto(bookmarkIndex)
        }
    }
    if (e.which == 32) {
        playPause()
    }
    if (e.which == 219 || e.which == 221) {
        var d = e.shiftKey ? 5 : 1;
        if (e.which == 219) d *= -1;
        seek(d);
    }
    if (e.which == 188) {
        slower();
    }
    if (e.which == 190) {
        faster();
    }}

function drawBookmarks() {
    var bookmarkHtml = '';
    for (var i = 0, bookmark; bookmark = bookmarks[i], i < bookmarks.length;...