与 HTML5 和 Javascript 同步音频

Question

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

我有link两个音频文件（.mp3，.wav ...），我想要同步这两个音频文件，比如语音和歌曲。我不想他们一个接一个地在一起，想同步。

我会使用 HTML5 在 客户端 完成这一切，而不需要使用服务器。这可能吗？

非常感谢您的帮助。

Answer 1

所以我明白了，你有两个音频文件，你想在客户端上一起渲染。网络音频 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 同步音频

Synchronize audios with HTML5 and Javascript

html

javascript

audio

web-audio-api