Question

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

Answer 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节点。

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

1 个答案: