如何使用Meteor从多次渲染的模板中获取值？

Question

我想要得到不同的音频持续时间内的帮助器，从模板，渲染了几次。除了在数据库中插入音频持续时间之外，还有什么方法可以做到这一点吗？我尝试了很多东西，有些根本不推荐，但都不起作用。向我显示任何内容的那些，只显示第一个音频的持续时间。这是一个更丑陋的jerryrigs，它实际上返回了一个数字，但它仍然是相当糟糕的，并导致setInterval不停止。

Meteor.myaudioplayer.helpers({
   audioduration: function(){
     //if using ReactiveVar...
    audio = $("audio").get(0);
    instance = Template.instance();

        if (!instance.audioduration.get() || isNaN(parseInt(audio.duration))) {
              audioLenght = Meteor.setInterval(function() {
                    var totaltime = parseInt(audio.duration, 10);
                    var mins = Math.floor(audio.duration / 60, 10);
                    var secs = totaltime - mins * 60;
                    var gimmethetime = mins + ':' + (secs > 9 ? secs : '0' + secs);

                    instance.audioduration.set(gimmethetime);
                    return gimmethetime;

              }, 500);
        } 

        else {
            Meteor.clearInterval(audioLenght);
            return instance.audioduration.get();
        }
      }
});

这是我的HTML，如果它有什么帮助的话。

<div class="myplayer {{label}}>
    
    <div class=" gutter ">
	  <div class="loading">		
	  </div>
	  <div class="played"> 
	  </div>	
	  <div class="handle"> 
	  </div>
   </div>

	<div class="controls ">
	  <span class="playtoggle glyphicon glyphicon-play "></span>
		<div class="volume-control ">
		  <span class="volume glyphicon glyphicon-volume-up "></span>

			<div class="volume-gutter hidden ">
			  <div class="volume-meter ">
				 <div class="volume-handle "></div>
			  </div>
			</div>

	       </div>
			
    <span class="title">{{audioName}}</span>
    <span class="timeleft pull-right"> {{audioplayed}} / {{audioduration}}</span>
    </div>
 </div>

<audio class={{label}}>
  <source src={{mysource}} format={{myformat}}/>
</audio>

​

获得播放器其他部分的当前音频位置和音频持续时间也很重要，但由于这些是由用户触发的事件，因此问题较小，因为我可以使用事件目标作为参数来询问浏览器元素是什么样子的。

编辑有人在“播放”按钮上询问我的代码。这就是了。我仍然在调整变量，这样我就可以同时拥有两个play函数，但工作得很好。注意:我更改了上面的HTML以匹配这段代码，因为我在不同版本之间修改了一些类名。

​

"click .playtoggle": function(event) {
  thisplayer = $(event.target).parents(".audioplayer").attr("id");
  thisaudio = $("#" + thisplayer).find("audio").get(0);

  console.log(thisaudio.duration);

  //Playing
  if (!playing) {
    playing = true;
    $("#" + thisplayer).find(".playtoggle").removeClass("glyphicon-play");
    $("#" + thisplayer).find(".playtoggle").addClass("glyphicon-pause");
    thisaudio.play();

    playIt = Meteor.setInterval(function() {
      //vars for the visual aspect
      var handlepadding = parseInt($("#" + thisplayer).find(".handle").css("width")) / 2;
      var gutterwidth = $("#" + thisplayer).find(".gutter").width() - handlepadding;
      var soundcoordinates = parseInt(thisaudio.currentTime, 10);
      var totaltime = parseInt(thisaudio.duration, 10);
      var playedgutter = gutterwidth * soundcoordinates / totaltime;

      // If user is not messing with the handle, give the position
      if (!draghandle) {
        $("#" + thisplayer).find(".played").css("width", playedgutter + "px");
        $("#" + thisplayer).find(".handle").css("left", playedgutter + "px");
      }

      // If the audio has come to an end, acknowledge that it has ended
      if (soundcoordinates == totaltime) {
        playing = false;
        $("#" + thisplayer).find(".playtoggle").removeClass("glyphicon-pause");
        $("#" + thisplayer).find(".playtoggle").addClass("glyphicon-play");
        Meteor.clearInterval(playIt);

      }

      // Send the data to the timer
      instance.timeplayed.set(soundcoordinates);

    }, 500);

    return;
  }
  // END Playing

  // Pausing
  if (playing) {
    playing = false;
    $("#" + thisplayer).find(".playtoggle").removeClass("glyphicon-pause");
    $("#" + thisplayer).find(".playtoggle").addClass("glyphicon-play");
    Meteor.clearInterval(playIt);
    thisaudio.pause();
    return;
  }
//END pausing

}

​

Answer 1

HTML

<span class="timeleft pull-right"> {{audioplayed}} / <span id="duration"></span></span>

js函数

function  gimmethetime(audio){
  var totaltime = parseInt(audio.duration, 10);
  var mins = Math.floor(audio.duration / 60, 10);
  var secs = totaltime - mins * 60;
  var timeLeft = mins + ':' + (secs > 9 ? secs : '0' + secs);
  $("#duration").text(timeLeft);
}

使用jQuery设置开始时的时间

Template.myaudioplayer.onRendered(
   function(){
        audio = $("audio").get(0);
        if (audio) {
             gimmethetime(audio);
        } 
      }
);

当用户点击播放时

 ...
 playIt = Meteor.setInterval(function() {
    gimmethetime(thisaudio);
    ....
 }
 ...

Answer 2

我已经找到了解决我的特定问题的答案。这可能不是最漂亮的东西，也不是我想要的，因为它不再使用helper，但它可以工作。我必须稍微修改一下HTML，所以现在，我有了两组跨度，而不是计时器".timeleft“范围内的两个helper(一个用于进度，另一个用于持续时间)。

​

<span class="timeleft pull-right">
 <span class="audioplayed"></span> /<span class="audioduration"></span>
</span>

​

在onRendered中，我有：

​

      audio = $("audio").get(0);

      idArray = $(".audioplayer").map(function() {
        return this.id;
      }).get();

      if (audio.duration && !isNaN(audio.duration)) {
        Meteor.clearInterval(getDuration);
      } else {
        getDuration = Meteor.setInterval(function() {
          for (i = 0; i < idArray.length; i++) {
            var audioduration = $("#" + idArray[i]).find("audio").get(0).duration;
            var totaltime = parseInt(audioduration, 10);
            var mins = Math.floor(audioduration / 60, 10);
            var secs = totaltime - mins * 60;
            var gimmethetime = mins + ':' + (secs > 9 ? secs : '0' + secs);

            $("#" + idArray[i]).find(".audioduration").text(gimmethetime);
          }
          if (audio.duration && !isNaN(audio.duration)) {
            Meteor.clearInterval(getDuration);
          }
        }, 500);
      }

​

让我解释一下我做了什么。在音频内部，变量onRendered只返回第一个音频文件，并且返回为NaN，因为元素还没有完全完成呈现。为了获得这两个值，我创建了一个包含已呈现的每个div.audioplayer的I的数组( idArray变量看起来像这样: label1，label2)。然后，我在for循环中运行这些in，以获取音频持续时间，然后将其写入右侧元素(div#labeli的子元素)。

然而，这遇到了音频变量的相同问题:模板还没有完成渲染，所以当我询问我的文档这些音频有多长时，它不知道。我的解决方法是将我的循环放在一个setInterval中，这样它就会不断询问，直到得到答案，然后就会停止。我可以使用audio变量进行验证，因为当它返回一个值时，其他音频可能也会返回一个值。现在，我有了两个音频持续时间，每个音频持续时间都在该模板的相应计时器中，该模板渲染了两次。

​

​

我打算使用相同的技术来更新计时器的音频播放部分的音频进度。