Перетаскивание аудио-плеера HTML5

Question

Я реализую аудиоплеер в html5, у которого есть опция перетаскивания для загрузки и воспроизведения mp3-файлов, но у меня проблема с файлом.

Когда файл удаляется по области, я могу видеть в свойствах консоли объекта, но нет информации об абсолютном пути из-за безопасности в веб-браузере.

Есть ли способ, как играть в mp3 таким образом?

index.html и тело содержание:

<div style="border: 1px solid black; width: 200px; height: 50px; padding: 10px;"" id="cudl">add file here</div> 
<div id="play" style="border: 1px solid black; width: 200px; height: 50px; padding: 10px;">PLAY</div> 
<div id="pause" style="border: 1px solid black; width: 200px; height: 50px; padding: 10px;">PAUSE</div> 
<div id="progress" style="width: 1000px; height: 50px; background: black; "><div id="time" style="width: 0%; height: 50px; background: green;"></div></div> 

JavaScript:

window.onload = function() { 
    var cudl = document.getElementById("cudl"); 
    cudl.addEventListener("dragover", function (ev) { 
     ev.preventDefault(); 
    }, false); 
    cudl.addEventListener("drop", function (ev) { 
     ev.preventDefault(); 
     var data = ev.dataTransfer.getData("audio/mpeg"); 

     var allAudio = document.getElementsByTagName("audio"); 
     if (allAudio.length > 0) { 
      for (var i = 0; i < allAudio.length; i++) document.body.removeChild(allAudio[i]); 
     } 
     var audio = document.createElement("audio"); 
     audio.setAttribute("src", ev.dataTransfer.files[0].name); 
     document.body.appendChild(audio); 

     console.log("append file"); 
     console.log(ev.dataTransfer.files[0]); 

     audio.addEventListener("durationchange", function() { 
      console.log("dc " + this.duration); 
     }); 

     audio.addEventListener("timeupdate", function() { 
      //console.log("ct " + this.currentTime); 
      var prog = document.getElementById("time"); 
      prog.style.width = Math.floor(this.currentTime/this.duration * 100) + "%"; 
     }); 

     var play = document.getElementById("play"); 
     play.addEventListener("click", function() { 
      document.getElementsByTagName("audio")[0].play(); 
     }); 

     var pause = document.getElementById("pause"); 
     pause.addEventListener("click", function() { 
      document.getElementsByTagName("audio")[0].pause(); 
     }); 

    }, false); 
}; 

Answer 1

Вы можете отключить веб-безопасности браузера. В терминале cd к приложению и введите «--disable-web-security» без кавычек.

Answer 2

Я думаю, что вы забываете загружать звук перед его воспроизведением. Я всегда забываю об этом при загрузке аудиофайлов.

document.getElementsByTagName("audio")[0].load(); 
document.getElementsByTagName("audio")[0].play(); 

Answer 3

Вместо того, чтобы использовать абсолютный путь для использования в качестве Src-атрибута аудио элемента, я предлагаю вам прочитать содержимое файла (ов), а также использовать WebAudio API для декодирования звуковых данных.

Ниже приведен рабочий пример для воспроизведения отброшенного файла. Но вы можете просто сохранить буфер для последующего воспроизведения.

var context = new AudioContext() 

window.addEventListener('load', function() { 
    var dropzone = document.querySelector('#dropzone'); 
    dropzone.addEventListener('drop', handleDrop, false) 
    dropzone.addEventListener('dragover', handleDragOver, false) 
}) 

var handleDragOver = function(e) { 
    e.preventDefault() 
    e.stopPropagation() 
} 

var handleDrop = function(e) { 
    e.preventDefault() 
    e.stopPropagation() 

    var files = e.dataTransfer.files 
    for (var i = 0; i < files.length; i++) { 
     var file = files[i] 
     var reader = new FileReader() 
     reader.addEventListener('load', function(e) { 
      var data = e.target.result 
      context.decodeAudioData(data, function(buffer) { 
       playSound(buffer) 
      }) 
     }) 
     reader.readAsArrayBuffer(file) 
    } 
} 

var playSound = function(buffer) { 
    var source = context.createBufferSource() 
    source.buffer = buffer 
    source.connect(context.destination) 
    source.start(0) 
}