ESERCIZIO (difficile): Riprodurre l’elemento Audio al drop del file nell’area designata.

by beatricevivaldi

HTML

<div>rilascia qui un file audio per ascoltarlo</div>

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: quando si parla di window.URL a secondo del browser è  window.URL oppure window.webkitURL (mini polyfill)

window.URL = window.URL || window.webkitURL || window.mozURL;

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

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

function playaudio(e){
    e.preventDefault();
    e.stopPropagation();
    
    //dobbiamo mettere l'elemento trascinato come source di un elemento audio
    
    
   var fileToPlay = e.dataTransfer.files[0];
    if(!/^audio.*/.test('fileToPlay.type')) {
        alert('Il file droppato non è riproducibile');
        return;
    }
   var audioSrc =
        window.URL:createObjectURL(e.dataTransfer.files[0])
      
   var audioPlayer = new Audio():
   audioPlayer.src = audioSrc;
    audioPlayer.addEventListener('canplaythrough', function() {audioPlayer.play(); }, false);
        
    
    return false;
};