使用html5拖放上傳後播放mp3文件

是否可以先使用html5拖放上傳系統上傳mp3文件，然後使用webkit的音頻API（http：//chromium.googlecode。 com/svn/trunk/samples/audio/index.html）而無需提交表單（在Google Chrome中）？使用Mozilla的音頻API可以在FF中執行嗎？如果是這樣，怎麼樣？另外，webkit的API中是否有任何教程？我一直無法找到任何。使用html5拖放上傳後播放mp3文件

來源

2011-10-08 invisible bob

你需要遵循的基本過程是

捕捉使用Drag and Drop Files
張貼在Form Data Object
響應文件與要玩
音頻項目的URL文件使用音頻API播放音頻

This jsFiddle allo你需要將音頻文件拖入某個區域，然後播放該文件。

您應該可以使用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);

我希望這有助於

來源

2011-10-13 06:08:04

這會工作得很好，但我需要與WebKit的音頻API來播放它和/或Mozilla的。或者，如果有一種方法可以獲得音頻標籤中播放內容的當前幅度，那也可以。另外，不要假設人們正在使用jQuery。 –

好的。我已經取出了jquery代碼並更新了使用Audio API的答案。這[jsFiddle]（http://jsfiddle.net/gaJyT/11/）具有所有Audio API代碼，但它使用文件閱讀器而不是AJAX。現在代碼中有更多。如果我需要更好地解釋它，請告訴我。 –

+1做得好，回答非常廣泛。保持！ –

當我運行的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]; 
}

來源

2012-02-27 02:30:04 JaapH

使用html5拖放上傳後播放mp3文件

回答

相關問題