[英]Synchronize audios with HTML5 and Javascript
我想将两个音频合并为一个,以便与客户端的 HTML5同步。 我已经看到Web Audio API可以完成很多事情,但是我却找不到如何做。
我有两个音频文件(.mp3,.wav ...)的链接,我想要的是同步这两个音频文件,例如语音和歌曲。 我不想他们一个接一个地在一起,想要同步。
我将使用HTML5在客户端完成所有操作,而无需使用服务器。 这可能吗?
非常感谢你的帮助。
因此,我了解到,您有两个要在客户端上一起渲染的音频文件。 网络音频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();
这些会将两个文件的Web Audio API缓冲区节点( https://webaudio.github.io/web-audio-api/#AudioBuffer )加载到全局变量audio_buffer_1和audio_buffer_2中。
现在要创建一个新的音频缓冲区,您将需要使用离线音频上下文
// 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的新缓冲区,该缓冲区将是两个缓冲区的直接加和。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.