我正在研究处理视频和音频的Meteor.js(v.1.0.0)Web应用程序。对于某种情况,我需要触发HTML5 audio.ontimeupdate()事件,但只看到 click,dbclick,focus,(...)是处理标准的Meteor包,我在触发此事件时遇到问题。
是否有可能触发此事件?
以下是代码示例:
radio.js
Template.audioPlayer.helpers({
audio:function(){
audioSource = videos.findOne({_id:Session.get("playlist")[Session.get("queue")]});
myAudio = new Audio();
myAudio.src = audioSource.source;
return audioSource.source
}
});
Template.audioPlayer.events({
'click #mainPlay':function(){
myAudio.play();
},
'click #mainPause':function(){
myAudio.pause();
},
'myAudio.ontimeupdate':function(){
console.log("Current Track Position is: " + myAudio.currentTime);
}
});
在这种情况下,我希望程序只需记录audiofile的当前位置。 有什么想法吗?
答案 0 :(得分:1)
我认为将音频元素放在DOM中会更好:
<template name="myAudio">
<button type="button">Play</button>
<audio src="{{audioSource}}"></audio>
</template>
然后你可以使用JS控制它:
Template.myAudio.helpers({
audioSource:function(){
var video=videos.findOne({_id:Session.get("playlist")[Session.get("queue")]});
return video.source;
}
});
Template.myAudio.events({
"click button":function(event,template){
template.find("audio").play();
},
"timeupdate audio":function(event,template){
console.log(template.find("audio").currentTime);
}
});
如果要在应用中显示当前时间,可以在事件处理程序中设置Session变量,以反应性地更新DOM节点。