Gibt es eine bessere Möglichkeit, Audio mit Video zu synchronisieren (ohne es einfach in das Video selbst zu übertragen)?

Question

Ich versuche, eine Player-Leiste zu entwickeln, die in animierten CC funktioniert, und spielt sowohl ein Video als auch Animationen vor diesem Video auf einem HTML5-Canvas ab.

Ich wollte, dass es den Ton beschleunigt, weil das Video auf dem Bildschirm wirklich voraus sein würde, aber es spielt mit der richtigen Geschwindigkeit. Also habe ich versucht, dieses:

//Position the scrubber, handle press/release events for scrubber 
this.addEventListener("tick", fl_MouseClickHandler.bind(this)); 
function fl_MouseClickHandler() 
{ 
    if(isDragging == false){ 
     proportion = this.currentFrame/this.totalFrames; 
     if(Math.round(this.currentFrame/30) % 10 == 0){ // do this every 10 seconds 
      audioSync(proportion); 
     } 
     this.scrubber.x = scrubberStart + (proportion * barWidth); 
    } 
    else { 
     if (stage.mouseX > scrubberStart && stage.mouseX < (scrubberStart + barWidth)) { 
      proportion = (stage.mouseX-scrubberStart)/barWidth; 
      this.scrubber.x = stage.mouseX;   
     } 
    } 
} 

function audioSync(var p){ 
    audioInstance.setPosition(p * audioInstance.duration); 

    //is there a better way to do this without it getting choppy? 
    //currently sounds like 
    //fo-o-o-d-d-d S-s-aaaaffttey-y-y when set to 2 seconds 
    //(it gets off that fast) 
    //it does those glitchy sounds for a few seconds when you increase the interval 
    //(if set to do it 10 seconds, ~3 seconds glitch, ~7 seconds normal) 
} 

Gerade jetzt ist es irgendwie landet klingen wie Daft Punk, wenn sie Gesang verlangsamen und es wird wirklich abgehackt. (von 0:00 bis 1:30 von "Alive 2007" Track 7, "Face to Face/Kurzschluss" (c) Daft Punk Legals, für ein gutes Beispiel).

Hier Demo, wo es nur out of sync: http://mhardingfoodsafe.github.io/player-audio-messed-up/

Wenn ich versuche, audioInstance.currentTime = video.currentTime; nichts zu tun ändert und wenn ich video.currentTime = audioInstance.currentTime; bekomme ich eine Fehlermeldung, es nicht Werte lesen können, die nicht endlich sind.

dies ist einer, wo es tatsächlich tun, was ich beschreibe (nicht das, was ich will): http://mhardingfoodsafe.github.io/player-bar-v2/

Answer 1

ihm leichter gefunden, nur um sicher zu stellen, dass alle Animationen in einem Video mit Audio, so dass es weniger ist Komplex und bleibt synchron ...

Warum:

• Video verfolgt die Spuren besser von der Synchronisierung als belebtes cc kann, wenn ein html5 Leinwand verwenden.

• Es ist einfacher, Videosteuerelemente als Frames, Audio und Video gleichzeitig hinzuzufügen.

• weniger anfällig für Fehler beim Versuch, über viele verschiedene Arten von Internetverbindungen und Geräten zu implementieren.

es ist im Grunde das gleiche, minus die Audio-Sync-Funktion. Stellen Sie sicher, dass die Szene genügend Frames enthält, um die Videolänge mit den von Ihnen festgelegten fps zu erreichen.