html5播放mp3文件隐藏,javascript – 使用html5拖放上传后播放mp3文件

您需要遵循的基本过程是

>使用Drag and Drop Files捕获文件

>在Form Data Object中发布文件

>回复您要播放的音频项目的URL

>使用音频API播放音频

此jsFiddle允许您将音频文件拖动到某个区域,然后它将播放该文件.

您应该能够使用JavaScriptAudioNode的onaudioprocess事件来获取当前幅度.

编辑：

根据JaapH的说法,我再次对此进行了研究.处理器用于获取适当的事件来渲染画布.所以它并不是真的需要.此jsFiddle与下面相同.但是,它使用requestAnimationFrame而不是处理器.

这是旧代码,请参阅上面的使用请求动画框架的小提琴：

var context = new (window.AudioContext || window.webkitAudioContext)();

var source;

var processor;

var analyser;

var xhr;

function initAudio(data) {

source = context.createBufferSource();

if(context.decodeAudioData) {

context.decodeAudioData(data, function(buffer) {

source.buffer = buffer;

createAudio();

}, function(e) {

console.log(e);

});

} else {

source.buffer = context.createBuffer(data, false /*mixToMono*/);

createAudio();

}

}

function createAudio() {

processor = context.createJavaScriptNode(2048 /*bufferSize*/, 1 /*num inputs*/, 1 /*numoutputs*/);

processor.onaudioprocess = processAudio;

analyser = context.createAnalyser();

source.connect(context.destination);

source.connect(analyser);

analyser.connect(processor);

processor.connect(context.destination);

source.noteOn(0);

setTimeout(disconnect, source.buffer.duration * 1000);

}

function disconnect() {

source.noteOff(0);

source.disconnect(0);

processor.disconnect(0);

analyser.disconnect(0);

}

function processAudio(e) {

var freqByteData = new Uint8Array(analyser.frequencyBinCount);

analyser.getByteFrequencyData(freqByteData);

console.log(freqByteData);

}

function handleResult() {

if (xhr.readyState == 4 /* complete */) {

switch(xhr.status) {

case 200: /* Success */

initAudio(request.response);

break;

default:

break;

}

xhr = null;

}

}

function dropEvent(evt) {

evt.stopPropagation();

evt.preventDefault();

var droppedFiles = evt.dataTransfer.files;

//Ajax the file to the server and respond with the data

var formData = new FormData();

for(var i = 0; i < droppedFiles.length; ++i) {

var file = droppedFiles[i];

files.append(file.name, file);

}

xhr = new XMLHttpRequest();

xhr.open("POST", 'URL');

xhr.onreadystatechange = handleResult;

xhr.send(formData);

}

function dragOver(evt) {

evt.stopPropagation();

evt.preventDefault();

return false;

}

var dropArea = document.getElementById('dropArea');

dropArea.addEventListener('drop', dropEvent, false);

dropArea.addEventListener('dragover', dragOver, false);

我希望这有帮助