我正在尝试使用Knob.js(http://anthonyterrien.com/knob/)作为进度条。我找到了soundmanager2的代码
$(".progBar").css('width', ((this.position/this.duration) * 100) + '%');
这适用于正常的div宽度进度条,但显然使用Knob,我们必须改变输入的值。
我已经看到以下代码用于更新输入值,但无法使其正常工作。
$(function() {
$(".dial").knob({
'draw' : function () {
$(this.i).val(this.cv + '%')
}
})
})
我的代码来自哪里的一些背景......它是一个音乐网站,其中有多首歌曲,每首歌曲都有自己的旋钮圈。每个旋钮输入都有一个唯一的旋钮ID - ###,或变量' knob_ID'
这是我的整个代码:
play: function(){
var track_id = this.get('id');
var knobID = $("#knob-" + track_id);
var mySound = soundManager.createSound({
id: track_id,
url: 'mp3/path.mp3',
autoplay: false,
whileplaying: function() {
var percentage = $((this.position/this.duration) * 100);
$('#positionBar').css('width', ((this.position/this.duration) * 100) + '%');
console.log(percentage);
knobID.knob({
'draw' : function () {
$(this.i).val(percentage + '%')
}
});
},
});
}
答案 0 :(得分:1)
Here is a rough demo更新旋钮插件,因为声音管理器播放文件。您可能需要进行一些自定义,以使其成为完全可重用且可配置的组件。
SoundKnob2视图
App.SoundKnob2 = Em.View.extend({
knobInput: null,
sound: null,
playState: false,
playStateLabel: function() {
return this.get('playState')? 'PAUSE' : 'PLAY';
}.property('playState'),
initSound: function() {
soundManager.setup({
preferFlash: true,
url: '//cdn.jsdelivr.net/soundmanager2/2.97a.20131201/cors/',
onready: function() {
var mySound = soundManager.createSound({
autoLoad: true,
autoPlay: false,
id: 'aSound',
url: 'http://www.schillmania.com/projects/soundmanager2/demo/_mp3/rain.mp3'
});
this.set('sound', mySound);
}.bind(this),
ontimeout: function() {
console.log('timeout');
}
});
}.on('init'),
didInsertElement: function() {
var knobInput = this.$().find('input');
knobInput.knob({displayInput: false});
this.set('knobInput', knobInput);
//knobInput.val(50).trigger('change');
},
actions: {
toggle: function() {
this.toggleProperty('playState');
var knob = this.get('knobInput');
if(this.get('playState')) {
this.get('sound').play({
onfinish: function() {
knob.val(0).trigger('change');
this.toggleProperty('playState');
}.bind(this),
whileplaying: function() {
console.log(this.position);
var pos = (this.position/ this.duration) * 100;
knob.val(pos).trigger('change');
}
});
} else {
this.get('sound').pause();
}
}
}
});
可以在
等模板中使用{{#view App.SoundKnob2 class="sound-knob2"}}
<input />
<button {{action 'toggle' target="view"}}>{{view.playStateLabel}}</button>
{{/view}}