1

私は、アニメーション 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)
}

今のところ、ヴォーカルを遅くすると、Daft Punk のように聞こえるようになり、途切れ途切れになります。(好例として、「Alive 2007」トラック 7 の 0:00 から 1:30 までの「対面 / 短絡」 (c)Daft Punk Legals を参照)。

これは、同期がずれているだけのデモです: http://mhardingfoodsafe.github.io/player-audio-messed-up/

audioInstance.currentTime = video.currentTime;何も変更しようとするとvideo.currentTime = audioInstance.currentTime;、非有限の値を読み取ることができないというエラーが表示されます。

これは、私が説明していることを実際に行っている場所です (私が望んでいることではありません): http://mhardingfoodsafe.github.io/player-bar-v2/

4

1 に答える 1

1

すべてのアニメーションがオーディオ付きのビデオに含まれていることを確認するだけで、複雑さが軽減され、同期が保たれるようにする方が簡単であることがわかりました...

どうして：

  • html5 キャンバスを使用する場合、動画は animate cc よりも同期を追跡できます。

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

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

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

于 2016-05-06T16:14:50.397 に答える