ビデオとオーディオを同期させるには（ビデオに入れるだけで）良い方法がありますか？

Question

私はアニメーションCCで動作するプレーヤーバーを開発しようとしており、そのビデオの前でビデオとアニメーションの両方をhtml5キャンバスで再生します。

画面上のビデオが本当に先に出るので、スピードアップしたかったのですが、正しいスピードで再生しています。彼らはボーカルを遅くするとき、それはちょっとダフトパンクのように聞こえる終わると、それは本当に途切れ途切れなる今

//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) 
} 

：だから私はこれを試してみました。 （「Alive 2007」トラック7の「フェイス・トゥ・フェイス/ショート・サーキット」の0時から1時30分までを参照）（c）ダフト・パンク・リーガル。ここで

それだけで同期していますデモです：私はaudioInstance.currentTime = video.currentTime;何もしないようにしようとするとhttp://mhardingfoodsafe.github.io/player-audio-messed-up/

を変更し、私はvideo.currentTime = audioInstance.currentTime;を行うとき、私はそれが非有限な値を読み取ることができないというエラーを取得します。

これは、実際に私は（私が欲しいものではない）を記述しています何をやっているものです。http://mhardingfoodsafe.github.io/player-bar-v2/

Answer 1

が、それはあまりだように、それが簡単だけですべてのアニメーションは、オーディオとビデオであることを確認するために発見...複雑かつ同期にとどまるのはなぜ

：

• ビデオはHTML5のキャンバスを使用することができたときにアニメイトCCより優れて同期を追跡します。

• フレーム、オーディオ、ビデオではなくビデオコントロールを一度に追加する方が簡単です。

• さまざまな種類のインターネット接続やデバイスを実装しようとすると、エラーが発生しにくくなります。

これは、オーディオ同期機能を除いて基本的に同じです。シーンには、設定したfpsでのビデオの長さに合わせるのに十分なフレームがあることを確認してください。