JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.min.css">
<section data-content="file">
    <h4>File</h4>
    <span class="btn btn-info btn-file">
    Browse <input type="file" id="file" accept="audio/*"/>
    </span>
</section>

<section data-content="preview">
    <h4>File Preview</h4>
    <audio id="audio" controls autoplay></audio>
</section>

<section data-content="console">
    <h4>Console</h4>
    <pre id="console"></pre>
</section>

CSS

body {
    padding-top:10px
}

/** CSS File button hack **/
.btn-file {
    position:relative;
    overflow: hidden;
}
section[data-content] {
    margin-bottom:15px;
    padding-left:15px;
    padding-right:15px;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;  
}

JavaScript

/*========================================================= 
   Live File (Audio) preview with Blob URL
   Author  | AdamA / @adamzazad / http://adama.io
   License | MIT License
=========================================================*/


// Check for BlobURL support
var blob = window.URL || window.webkitURL;
    if (blob) {
        consolePrint('Hooray, your browser supports Blob URLs!');
    } else {
        consolePrint('Your browser does not support Blob URLs :(');
        return;           
    } 

document.getElementById('file').addEventListener('change', function(event){

        consolePrint('change on input#file triggered');
        var file = this.files[0],
         fileURL = blob.createObjectURL(file);

        consolePrint('File name: '+file.name);
        consolePrint('File type: '+file.type);
        consolePrint('File BlobURL: '+ fileURL);
        document.getElementById('audio').src = fileURL;
        consolePrint('File loaded into audio tag');
        consolePrint('Started Playing');

});
        
       
function consolePrint(msg){
    
    var currentText = document.getElementById('console').innerHTML;
    if(currentText != '') {
        document.getElementById('console').innerHTML = currentText + "\n" + msg;
    } else {
        document.getElementById('console').innerHTML = currentText + msg;
    }
    
    
}