网络音频API获得<audio>元素

Question

的AudioBuffer我有一个音频元素

var audioSrc = 'https://mfbx9da4.github.io/assets/audio/dope-drum-loop_C_major.wav' 
var audio = document.createElement('audio') 
audio.src = audioSrc 
audio.oncanplaythrough =() => { 
    console.info('loaded'); 
    var source = context.createMediaElementSource(audio); 
    source.connect(context.destination); 
    console.info('source.buffer', source.buffer); 
    source.start() 
} 

我需要AudioBuffer 做beat detection

然而，上面的代码片断日志source.buffer undefined

Answer 1

看来最好的方法是避免使用<audio>标签并通过XHR加载音频：

var context = new (window.AudioContext || window.webkitAudioContext)(); 
var audioSrc = 'https://mfbx9da4.github.io/assets/audio/dope-drum-loop_C_major.wav' 

fetch(audioSrc, onSuccess) 

function fetch (url, resolve) { 
    var request = new XMLHttpRequest(); 
    request.open('GET', url, true); 
    request.responseType = 'arraybuffer'; 
    request.onload = function() { resolve(request) } 
    request.send() 
} 

function onSuccess (request) { 
    var audioData = request.response; 
    context.decodeAudioData(audioData, onBuffer, onDecodeBufferError) 
} 

function onBuffer (buffer) { 
    var source = context.createBufferSource(); 
    console.info('Got the buffer', buffer); 
    source.buffer = buffer; 
    source.connect(context.destination); 
    source.loop = true; 
    source.start() 
} 

function onDecodeBufferError (e) { 
    console.log('Error decoding buffer: ' + e.message); 
    console.log(e); 
}