javascript - Knob.js 作为 Soundmanager2 的进度条

Question

我正在尝试使用 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 + '%')
               }
            });
         },
    });
}

Answer 1

Here is a rough demo当声音管理器播放文件时更新旋钮插件。您可能需要进行更多自定义，以使其成为完全可重用且可配置的组件。

SoundKnob2 View

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}}