有没有更好的方法来同步音频和视频(w/o 只是把它放在视频本身)?
Is there a better way to sync audio with video (w/o just putting it in the video itself)?
我正在尝试开发一个播放器栏,它可以在 animate cc 中运行,并在 html5 canvas 上在所述视频前面播放视频和动画。
我想让它加快音频的速度,因为屏幕上的视频会真正超前,但播放速度恰到好处。所以我尝试了这个:
//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,"face to face / short circuit" (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/
发现只需确保所有动画都在带有音频的视频中会更容易,这样它就不那么复杂并保持同步了...
为什么:
当使用 html5 canvas.
时,视频比 animate cc 更好地跟踪同步
只添加视频控件比一次添加帧、音频和视频更容易。
尝试在许多不同类型的互联网连接和设备上实施时更不容易出错。
基本一样,只是少了音频同步功能。只需确保场景有足够的帧以匹配您设置的 fps 的视频长度。
我正在尝试开发一个播放器栏,它可以在 animate cc 中运行,并在 html5 canvas 上在所述视频前面播放视频和动画。
我想让它加快音频的速度,因为屏幕上的视频会真正超前,但播放速度恰到好处。所以我尝试了这个:
//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,"face to face / short circuit" (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/
发现只需确保所有动画都在带有音频的视频中会更容易,这样它就不那么复杂并保持同步了...
为什么:
当使用 html5 canvas.
时,视频比 animate cc 更好地跟踪同步
只添加视频控件比一次添加帧、音频和视频更容易。
尝试在许多不同类型的互联网连接和设备上实施时更不容易出错。
基本一样,只是少了音频同步功能。只需确保场景有足够的帧以匹配您设置的 fps 的视频长度。