JSFiddle - React, Tailwind, and code Playground

by Stefano Bertoli

HTML

<div>rilascia qui un file audio per ascoltarlo</div>
<input type="file">

CSS

div{
    width: 100px;
    height: 100px;
    background: gray;
    padding: 10px;
    text-align: center;
    font-family: sans-serif;
}

JavaScript

// trucco per gestire il prefisso sperimentale di WK
window.URL = window.URL || window.webkitURL || window.mozURL;//mini polyfill per gestire eventuali proprietĂ  sperimentali
document.querySelector('input').addEventListener('change',function(e){
    console.log(e.target.files[0].type);
                                                                    },false); //gestire la stessa cosa con un input file 
//fileToPlay diventa e.target.files[0]

document.querySelector('div').addEventListener("drop", playaudio, false);

document.querySelector('div').addEventListener("dragover", function(e){  e.preventDefault(); }, false);

function playaudio(e){
    e.preventDefault();
    e.stopPropagation();
    
    console.log(e.dataTransfer.files.length);
    //metterlo come src di un elemento audio
    var fileToPlay=e.dataTransfer.files[0];
    if(!/^audio.*/.test(fileToPlay.type)){
    alert('file non corretto');
        return;
    }
   var audioSrc=window.URL.createObjectURL(fileToPlay);
    
    var audioPlayer=new Audio();
    audioPlayer.src=audioSrc;
    audioPlayer.addEventListener('canplaythrough',function(){audioPlayer.play();},false);
    return false;
};