HTML5とJavascriptでオーディオを同期する

Question

クライアントサイドで2つのオーディオを1つに結合してHTML5と同期したい。私はWeb Audio APIでそれを見てきましたが、多くのことができますが、私はどのように見つけられていません。

2つのオーディオファイル（.mp3、.wav ...）へのリンクがあります。音声と曲のような2つのオーディオファイルを同期することができます。私はそれらを次々に一緒にしたくない、同期したい。

サーバーを使用する必要なしに、私はクライアントサイドでHTML5を使用しています。これは可能ですか？

ありがとうございました。

Answer 1

私はそれを理解しているので、クライアントで一緒にレンダリングする2つのオーディオファイルがあります。 WebオーディオAPIはJavaScriptで非常に簡単にこれを行うことができます。開始するには良い場所は、サンプルスクリプトが

var context = new(window.AudioContext || window.webkitAudioContext) // Create an audio context 

// Create an XML HTTP Request to collect your audio files 
// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest 
var xhr1 = new XMLHttpRequest(); 
var xhr2 = new XMLHttpRequest(); 
var audio_buffer_1, audio_buffer_2; 
xhr1.open("GET","your_url_to_audio_1"); 
xhr1.responseType = 'arraybuffer'; 
xhr1.onload = function() { 
    // Decode the audio data 
    context.decodeAudioData(request.response, function(buffer) { 
    audio_buffer_1 = buffer; 
    }, function(error){}); 
}; 

xhr2.open("GET","your_url_to_audio_2"); 
xhr2.responseType = 'arraybuffer'; 
xhr2.onload = function() { 
    // Decode the audio data 
    context.decodeAudioData(request.response, function(buffer) { 
    audio_buffer_2 = buffer; 
    }, function(error){}); 
}; 

xhr1.send(); 
xhr2.send(); 

これらは、グローバルaudio_buffer_1変数やあなたの二つのファイルのaudio_buffer_2ウェブオーディオAPIのバッファ・ノード（https://webaudio.github.io/web-audio-api/#AudioBuffer）にロードしまうだろうhttp://www.html5rocks.com/en/tutorials/webaudio/intro/

です。

は今、新しいオーディオバッファを作成するには、一度に行わ

// Assumes both buffers are of the same length. If not you need to modify the 2nd argument below 
var offlineContext = new OfflineAudioContext(context.destination.channelCount,audio_buffer_1.duration*context.sampleRate , context.sampleRate); 
var summing = offlineContext.createGain(); 
summing.connect(offlineContext.destination); 
// Build the two buffer source nodes and attach their buffers 
var buffer_1 = offlineContext.createBufferSource(); 
var buffer_2 = offlineContext.createBufferSource(); 
buffer_1.buffer = audio_buffer_1; 
buffer_2.buffer = audio_buffer_2; 

// Do something with the result by adding a callback 
offlineContext.oncomplete = function(renderedBuffer){ 
    // Place code here 
}; 

//Begin the summing 
buffer_1.start(0); 
buffer_2.start(0); 
offlineContext.startRendering(); 

オフラインのオーディオコンテキストを使用する必要がありますが両者の直接の合計となりますrenderedBufferと呼ばれるコールバック関数の中で新しいバッファを受信しますバッファ。