使用离子

时间:2016-03-06 21:55:39

标签: html5 cordova ionic-framework cross-platform

HY, 我正在使用Ionic Framework for App Development,我想用Range Slider跟踪一首歌的时间。我可以在开发人员工具中看到值正确更改,但该值不会应用于滑块的可视表示。甚至可以这样做吗? 到目前为止,我的js代码的一部分:

var duration, playerWasPaused;
var blockSeek = false;
var player;
var seekBar;
var url = 'http://xx.mp3';

function init(){

  console.log('Init');
  player = new Audio();
  player.src = url3;
  player.oncanplay = PreparePlay;
  player.volume = 0.2;
  player.currentTime = 0;

  seekBar = $('#playerRange');
  player.play();
}

function PreparePlay(){
  $("#playerRange").attr("min", 0);
  $("#playerRange").attr("max",player.duration);

  if(seekBar){
    createSeekBar(player, seekBar);
  }
}

function createSeekBar(seekBar){

  player.addEventListener('loadedmetadata', enableDisableSeekBar, false);
  player.addEventListener('emptied', enableDisableSeekBar, false);
  player.addEventListener('timeupdate', onTimeupdate, false);

  player.addEventListener('input', onSeek, false);
  player.addEventListener('change', onSeekRelease, false);

  enableDisableSeekBar();
  onTimeupdate();
}

function enableDisableSeekBar(){
  duration = player.duration;
  if(duration && !isNaN(duration)){
    seekBar.max = duration;
    seekBar.disabled = false;
  } else {
    seekBar.disabled = true;
  }
}

function onSeek(){
  if(!blockSeek){
    blockSeek = true;
    playerWasPaused = player.paused;
    player.pause();
  }
  player.currentTime = seekBar.value;
}

function onSeekRelease(){
  if(!playerWasPaused){
    player.play();
  }
  blockSeek = false;
}

function onTimeupdate(){

  if(!blockSeek){
    seekBar.attr("value", player.currentTime);
  }
}

来源:http://jsfiddle.net/trixta/MfLrW/

1 个答案:

答案 0 :(得分:0)

我用这个电话解决了我的问题

seekBar.val(player.currentTime);
在onTimeupdate中