使用HTML5和Javascript同步音频

问题描述：

我想将两个音频合并为一个，以便与客户端上的HTML5同步。我已经看到它与Web Audio API可以做很多事情，但我一直无法找到如何。使用HTML5和Javascript同步音频

我有两个音频文件（.mp3，.wav ...）的链接，我想要的是同步这两个音频文件，如声音和歌曲。我不想让他们一个接一个，想要同步。

我会做所有的使用HTML5的客户端，而不需要使用服务器。这可能吗？

非常感谢您的帮助。

所以你想要2个音频文件同时播放？ –

嘿米格尔，你可以用https://howlerjs.com，一个基于javascript的音频库轻松做到这一点 – Phil

尝试引用此示例，但这与音频和文本[链接]（http://happyworm.com/blog/2010/12/05/drumbeat-demo-html5-audio-text-sync /） – Thennarasan

答

所以我明白，你有两个音频文件，你想在客户端上一起渲染。网络音频API可以很容易地完全在JavaScript中为您完成。一个良好的开始是http://www.html5rocks.com/en/tutorials/webaudio/intro/

一个示例脚本是

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）。

我们创建一个新的音频缓冲，你需要使用离线音频上下文

// 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的回调函数内一个新的缓冲，这将是两人的直接总和缓冲区。

使用HTML5和Javascript同步音频

相关推荐