ウェブオーディオAPI <audio>要素

Question

のAudioBuffer私はaudio要素

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() 
} 

を持っています私は上記のコードスニペットログsource.buffer undefined

Answer 1

、しかしbeat detection

を行うにはAudioBuffer が必要に思えますこれを行うための最善の方法は、<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); 
}