使用html5拖放上传上传后播放mp3文件 [英] Play mp3 file after uploading it with html5 drag and drop upload

问题描述

是否可以先用html5拖放上传系统上传mp3文件，然后用webkit的音频API(http://chromium.googlecode.com/svn/trunk/samples/audio/index.html)播放?html)而不提交表单(在谷歌浏览器中)?是否可以在 FF 中使用 Mozilla 的音频 API?如果是这样，如何?另外，是否有任何关于 webkit 的 API 的教程?我一直找不到.

Is it possible to first upload an mp3 file with the html5 drag and drop upload system, and then play it with webkit's audio API (http://chromium.googlecode.com/svn/trunk/samples/audio/index.html) without submitting a form (in Google Chrome)? Is it possible to do in FF with Mozilla's audio API? If so, how? Also, are there any tutorials in existance for webkit's API? I have not been able to find any.

推荐答案

你需要遵循的基本流程是

The basic process you need to follow is

1. 使用拖放文件
2. 在表单数据对象
中发布文件
3. 回复您要播放的音频项目的 URL
4. 使用音频 API 播放音频

这个 jsFiddle 允许您将音频文件拖到一个区域，然后它会播放文件.

This jsFiddle allows you to drag an audio file into an area and it will then play that file.

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

You should be able to use the JavaScriptAudioNode's onaudioprocess event to get the current amplitude.

根据 JaapH 所说的，我再次调查了这个问题.处理器用于获取适当的事件来渲染画布.所以它并不是真正需要的.这个 jsFiddle 的作用与下面相同.但是，它使用 requestAnimationFrame 而不是处理器.

Based on what JaapH said I had a look into this again. The processor was used to get an appropriate event to render the canvas. So it is not really required. This jsFiddle does the same as below. However, it uses requestAnimationFrame instead of the processor.

这是旧代码，使用请求动画帧的版本请参阅上面的小提琴:

Here is the old code, see the fiddle above for the version using request animation frame:

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);

希望能帮到你

这篇关于使用html5拖放上传上传后播放mp3文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！