JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<table style="font-size:10px;">
<tr><td>MULTIPLE:</td><td><input id="file_input" type="file" multiple="" /></td></tr>
<tr><td>MULTIPLE + WEBKITDIRECTORY:</td><td><input id="file_input_dir" type="file" multiple="" webkitdirectory="" directory="" /></td></tr>
</table>
<div id="test" style="font-size:10px;">
</div>

JavaScript

$(document).ready(function(e) {
		ready = false;
        $('#file_input, #file_input_dir').change(function(e) {
			ready = false;
			tmp = 0;
			filelist = e.target.files;
			$.each(filelist, function(index,file) {
				if(file.name == '.') {
					tmp++;
					return true;
				}
				file.path_rel = file.webkitRelativePath; // is empty if webkit not used
				file.path_blob = window.URL.createObjectURL(file);
				// Get duration
				audioelem = new Audio();
				$(audioelem).attr('src',file.path_blob);
				$(audioelem).on("canplay", function () {
					file.duration = $(this)[0].duration;
					tmp++;
					if(tmp >= filelist.length) ready = true;
				});
				delete audioelem;
			});
			music = filelist;
			waitForElement();
		});
    });
	
	function waitForElement(){
		if(ready){
			printList();
		}
		else{
			setTimeout(function(){
				waitForElement();
			},250);
		}
	}
	function printList() {
		$.each(music, function(index, file) {
			if(file.name == '.') return true;
			content = '';
			content += '<div style="border:solid black 1px;margin:5px;padding:5px;">';
			content += '<audio src="'+file.path_blob+'" controls="controls"></audio><br />';
			content += '<div><span style="font-weight:bold;">file.name: </span>'+file.name+'<br />';
			content += '<div><span style="font-weight:bold;">file.path_rel: </span>'+file.path_rel+'<br />';
			content += '<div><span style="font-weight:bold;">file.path_blob: </span>'+file.path_blob+'<br />';
			content += '<div><span style="font-weight:bold;">file.duration: </span>'+file.duration+'<br />';
			content += '</div>';
			$('#test').append(content);
		});
	}