基于视频关键帧的不同音频文件播放
基于视频关键帧的不同音频文件播放
提问于 2013-05-31 14:17:53
这个功能的一般思想是根据视频当前的时间位置加载不同的声音文件。我有以下有关音频文件的信息：
var samples: [
['00:00:05', 'audio/1.mp3'],
['00:01:00', 'audio/2.mp3']
]第一个元素包含特定音频示例的结束时间，第二个元素包含示例。我认为我们不需要开始时间，因为下面的条件应该返回一个很好的结果：
if( video.currentTime <= endTime ) { ... }无论如何，下面是我用来检查要播放哪个音频文件的函数代码(在暂停视频时执行)：
var APP.playAudio = function() {
var pAudio = samples; // the array above
for(var i = 0; i < pAudio.length; i++ ) {
if( video.currentTime < hms_to_s(pAudio[i][0]) ) {
pCurrentAudio = pAudio[i][1];
break;
}
}
}我正在寻找更棘手和更聪明的方法来实现这一点。正如您所看到的，现在我们每次暂停视频时都会遍历pAudio数组。
回答 1
Code Review用户
回答已采纳
发布于 2013-05-31 16:37:14
你想在特定的时间播放某个音频吗？嗯，你很幸运。我最近在一个演示中做了这个。不过，它并不是在播放视频音频。这是触发动画在某些点的音频，但它应该是相同的想法。
<audio>和<video>元素是HTMLMediaElements，有媒体事件。
- 如果要实时播放映射的音频，则会在元素的当前时间发生更改时触发
timeupdate事件。 - 如果您想在暂停期间播放它，那么就会有
paused事件。
您可以使用这些事件来检查元素的currentTime，在本例中，这是您的视频。currentTime以秒为单位。如果你想坚持你的hh:mm:ss格式，你需要你自己的转换器。
而不是urls，您应该有预加载的音频元素，以便他们将立即播放，当我们需要他们。
无论如何，这里有一个包含秒和音频元素的示例结构
var samples = [
[5,HTMLAudioElement],
[10,HTMLAudioElement],
[15,HTMLAudioElement],
...
];然后，挂钩视频的timeupdate事件，检查当前时间，并与数组中指定的项进行比较。您可以使用计数器指示当前位置。
var i = 0
//get first audio as current audio and play
var currentAudio = samples[i][1].play();
video.addEventListener('timeupdate',function(){
//if video time is greater than current audio end time
if(this.currentTime > samples[i][0]){
if(currentAudio) currentAudio.pause(); //pause existing audio (maybe do a "seek to zero" to reset)
currentAudio = samples[++i][1]; //reference next audio as current
currentAudio.play(); //play the current audio
}
});页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://codereview.stackexchange.com/questions/26844
复制相关文章
相似问题
腾讯云开发者
