处理音频/视频ontimeupdate Meteor.js中的事件

时间:2014-12-12 10:20:40

标签: events meteor html5-audio

我正在研究处理视频和音频的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的当前位置。 有什么想法吗?

1 个答案:

答案 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节点。