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

问题描述

是否有可能先上传MP3文件与HTML5拖放上传系统，然后用WebKit的音频API（HTTP玩：//chromium.google$c$c.com/svn/trunk/samples/音频/ index.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. 响应与您想要播放的音频项目的网址


4. 使用音频API播放音频

这的jsfiddle 使您能够将音频文件到一个区域，然后它会播放该文件。

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

您应该可以使用JavaScriptAudioNode's onaudioprocess事件获得电流幅度。

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

编辑：

根据什么 JaapH 说我又看了一下这个。该处理器被用于获得一个适当的事件来呈现画布。因此，它是不是真的需要。这的jsfiddle 确实下同。但是，它使用<一个href=\"http://paulirish.com/2011/requestanimationframe-for-smart-animating/\">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.

下面是旧code，使用请求动画帧看到上面的捣鼓的版本：

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

我希望这有助于

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