JSFiddle - React, Tailwind, and code Playground

by stafffan

HTML

<button onclick="startCheck()">Start loading</button>
<button onclick="togglePlayback()">Start/pause sound</button>
<div id="log"/>

CSS

#log {
    border: solid 1px Black;
    width: 700px;
    height: 500px;
    font-size: 14px;
    overflow-y: auto;
}

JavaScript

function log(mess, emph) {
	var date = new Date(),
	    prettyDate = 
            date.getHours() 
            + ":" 
            + (String(date.getMinutes()).length == 1 
                ? "0" + date.getMinutes() 
                : date.getMinutes()) 
            + ":" 
            + date.getSeconds(),
        logger = document.getElementById("log");

    logger.innerHTML = logger.innerHTML 
        + prettyDate 
        + (emph ? "<b>" : "") 
        + "&nbsp;&nbsp;&nbsp;" 
        + mess 
        + (emph ? "</b>" : "") 
        + "<br/>";
}

function startCheck () {
    var audio = new Audio("http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3");
    log("Initializing audio (" + audio.src + ")", true);
    log('canPlayType(mp3): ' + audio.canPlayType('audio/mpeg'));
    log('canPlayType(ogg): ' + audio.canPlayType('audio/ogg; codecs="vorbis"'));

    audio.addEventListener("loadstart", function() {
        log("loadstart");
    });

    audio.addEventListener("durationchange", function() {
        log("durationchange (" + Math.round(audio.duration) + " seconds)");
    });

    audio.addEventListener("loadedmetadata", function() {
        log("loadedmetadata");
    });

    audio.addEventListener("loadeddata", function() {
        log("loadeddata");
    });

    audio.addEventListener("progress", function() {
        log("progress (" 
            + (audio.buffered.length > 0 
                ? Math.round(audio.buffered.end(audio.buffered.length - 1)) 
                : 0) 
            + " seconds buffered)");
    });

    audio.addEventListener("canplaythrough", function() {
        log("canplaythrough");
    });
				
    audio.addEventListener("canplay", function() {
        log("canplay");
        audio.play();
        log("Starting playback", true);
    });

    audio.load();
    window.audio = audio;
}

function togglePlayback() {
    if (window.audio && window.audio.paused) {
        window.audio.play();
    } else if (window.audio) {
       ...