设置值和位置的范围滑块与离子

Hy，我正在使用Ionic框架的应用程序开发，我想跟踪一首歌曲的时间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/

来源

2016-03-06 Freshchris

是的，如果你寻找更具体的答案，也发布一些代码 – Akis

我添加了播放器初始化和处理的代码部分。 – Freshchris

在'PreparePlay（）'函数的末尾尝试'$ scope。$ apply（）'。 – Akis

我解决我的问题与此调用

seekBar.val(player.currentTime);

在onTimeupdate。

来源

2016-03-07 01:47:44 Freshchris

设置值和位置的范围滑块与离子

回答

相关问题