2016-07-22 17 views
0

Ich möchte zwei Audios zu einem synchronisieren, um mit HTML5 auf der Clientseite zu synchronisieren. Ich habe es mit Web Audio API gesehen kann viele Dinge tun, aber ich konnte nicht finden, wie.Synchronisieren von Audiodateien mit HTML5 und JavaScript

Ich habe den Link zu zwei Audiodateien (.mp3, .wav ...), was ich möchte, ist diese beiden Audiodateien, wie eine Stimme und ein Lied zu synchronisieren. Ich will sie nicht zusammen nach dem anderen, synchronisieren wollen.

Ich würde es auf der Clientseite mit HTML5 tun, ohne den Server zu verwenden. Ist das möglich?

Vielen Dank für Ihre Hilfe.

+0

Sie möchten also 2 Audiodateien gleichzeitig abspielen? –

+1

Hey Miguel, Sie können es leicht mit https://howlerjs.com, eine Javascript-basierte Audio-Bibliothek – Phil

+0

Versuchen Sie, dieses Beispiel, aber dieses mit Audio und Text [Link] (http://happyworm.com/blog/2010/12/05/drumbeat-demo-html5-audio-text-sync /) – Thennarasan

Antwort

0

Also ich verstehe es, Sie haben zwei Audio-Dateien, die Sie zusammen auf dem Client rendern möchten. Die Web-Audio-API kann dies ganz einfach in JavaScript für Sie erledigen. Diese würden laden in globale Variablen audio_buffer_1 und audio_buffer_2 die Web Audio API-Pufferknoten (https://webaudio.github.io/web-audio-api/#AudioBuffer) Ihrer beiden Dateien Ein guter Anfang ist http://www.html5rocks.com/en/tutorials/webaudio/intro/

Ein Beispielskript

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

wäre.

nun einen neuen Audio-Puffer zu schaffen, müssten Sie offline Audio-Kontext Sie

// 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(); 

Einmal in der Callback-Funktion einen neuen Puffer renderedBuffer genannt wird erhalten getan verwenden, die die direkte Summe der beiden sein wird Puffer.

Verwandte Themen