設置值和位置的範圍滑塊與離子

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

設置值和位置的範圍滑塊與離子

回答

相關問題