Воспроизведение mp3 файла после загрузки с помощью html5 drag and drop upload

Question

Можно ли сначала загрузить файл mp3 с помощью системы перетаскивания html5, а затем воспроизвести его с помощью аудио API Webkit (http://chromium.googlecode.com/svn/trunk/samples/audio/index.html) без отправки формы (в Google Chrome)? Можно ли это сделать в FF с аудио API Mozilla? Если да, то как? Кроме того, существуют ли какие-либо учебные пособия для API Webkit? Я не смог найти ни одного.

Answer 1

Основной процесс, который вам необходимо выполнить:

1. Захват файлов с помощью Перетаскивание файлов
2. Публикация файлов в Данные формыObject
3. Ответьте URL-адрес аудиообъекта, который вы хотите воспроизвести
4. Воспроизведите аудио с помощью Audio API

This jsFiddle позволяет перетащить аудиофайл в область и затем воспроизвести этот файл.

Вы можете использовать событие onaudioprocess JavaScriptAudioNode , чтобы получить текущую амплитуду.

Редактировать:

Исходя из того, что 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);

Iнадеюсь, это поможет

Answer 2

Когда я запускаю пример jsfiddle, звук искажается, это связано с тем, что и процессор, и источник подключены к context.destination. Чтобы заставить его работать, я удалил строку source.connect(context.destination); и в функции processAudio добавил код, чтобы скопировать входные сэмплы на выход

var inL = e.inputBuffer.getChannelData(0);
var inR = e.inputBuffer.getChannelData(1);
var outL= e.outputBuffer.getChannelData(0);
var outR =e.outputBuffer.getChannelData(1);

var n = inL.length;
for (var i = 0; i < n; i++) {
    outL[i] = inL[i];
    outR[i] = inR[i];
}