JSFiddle - React, Tailwind, and code Playground

by SpacePineapple

HTML

<input id="files" type="file" id="files" name="files[]" multiple />
<input id="play" type="button" value="play" />

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new window.AudioContext();
var source;
function playSound(arraybuffer) {
    context.decodeAudioData(arraybuffer, function (buf) {
        source = context.createBufferSource();
        source.connect(context.destination);
        source.buffer = buf;
        source.start(0);
    });
}

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    playFile(files[0]);
}

function playFile(file) {
    var freader = new FileReader();

    freader.onload = function (e) {
        console.log(e.target.result);
        playSound(e.target.result);
    };
    freader.readAsArrayBuffer(file);
}

player = document.getElementById('player');
document.getElementById('files').addEventListener('change', handleFileSelect, false);
document.getElementById('play').onclick = function () {
    player.play();
};