Knob.js как индикатор выполнения для Soundmanager2

Я пытаюсь использовать 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 + '%')
  }
 })
})

Некоторый контекст того, откуда берется мой код... это музыкальный сайт, на котором есть несколько песен, каждая со своим кругом ручки. Каждый вход ручки имеет уникальный идентификатор ручки-### или переменной «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 + '%')
               }
            });
         },
    });
}

javascript jquery ember.js soundmanager2 jquery-knob
person jeanhules    schedule 04.07.2014    source источник
comment
Можете ли вы создать сбойную корзину. emberjs.jsbin.com   -  person blessenm    schedule 06.07.2014
comment
Вот пример jsbin. jsbin.com/seposebu/6/edit   -  person jeanhules    schedule 06.07.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вот грубая демонстрация обновления плагина ручки при воспроизведении файла менеджером звука. Возможно, вам потребуется выполнить дополнительную настройку, чтобы сделать его полностью повторно используемым и настраиваемым компонентом.

вид 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}}
person blessenm    schedule 07.07.2014
comment
Это сработало, но у меня есть дополнительный вопрос, и я был бы очень признателен, если бы вы могли мне помочь. Если у меня есть несколько представлений, каждое из которых имеет идентификатор, прикрепленный к кнопке, как я могу удалить свойство PLAY всех других представлений при переключении этой кнопки. Второй вопрос: как я могу отобразить изображение вместо кнопки «Воспроизведение/Пауза» (т.е. значки «Воспроизведение/Пауза») и, наконец, как я могу прикрепить идентификатор каждой кнопки к URL-адресу mp3-файла? Вот быстрый jsbin: jsbin.com/seposebu/8/edit - person jeanhules; 08.07.2014
comment
@jeanhules Я обновил корзину. Он должен ответить на большинство ваших вопросов. jsbin.com/seposebu/10/edit - person blessenm; 08.07.2014