Question

我正在使用网络音频API。在note.js中，我尝试使用index.js的几个音符填充数组。但它没有按预期工作。但是，当我直接在index.js中设置数组时，它可以工作。我不知道为什么会这样。基本上我希望index.js能够在note.js中播放推送到数组中的任何音符。下面我粘贴了index.js的两个版本来演示我想要做的事情。

希望有人可以帮我这个。

index.js（确实有效）

import NoteModule from './note.js';
const notelist = new NoteModule();

notelist.notes = ['C4','D4','E4','F4','G4','A4','B4','C5'];

let seq = new Tone.Sequence(function(time, note){
    event.humanize = true;
    synth.triggerAttackRelease(note,'8n');

}, notelist.notes, '8n');

index.js（不起作用）

import NoteModule from './note.js';
const notelist = new NoteModule();

let seq = new Tone.Sequence(function(time, note){
    event.humanize = true;
    synth.triggerAttackRelease(note,'8n'); 

}, notelist.notes, '8n');

note.js

import $ from 'jquery';

export default class NoteModule {
constructor(possibleNotes,notes,note) {
    this.possibleNotes = ['','C4','D4','E4','F4','G4','A4','B4'];
    this.notes = notes;
    this.note = 0;
}

init() {
    console.log('NoteModule');
    this.addListeners();
}

addListeners() {
    $('div.step').on('click', this.step.bind(this));
}

step(e) {

    let notes = [];

    $(e.currentTarget).parent().find('.note').text(this.possibleNotes[this.note]);
    this.note = (this.note+1)%(this.possibleNotes.length);

    $('.pads div.note').each(function() {
        let note = $(this).text();

        if (note && note.length > 0) {
            notes.push(note);
        }
    });

this.notes = notes;
}
}

HTML：

                    <div class="pads">                    
                        <div class="pad"><div class="note" data-play=""></div></div>
                        <div class="pad"><div class="note" data-play=""></div></div>
                        <div class="pad"><div class="note" data-play=""></div></div>
                        <div class="pad"><div class="note" data-play=""></div></div>
                    </div>

                    <div class="pads">
                        <div class="pad">
                            <div>
                                <div class="step"><i class="icon-up-open-mini"></i></div>
                                <div class="note"></div>
                                <div class="step"><i class="icon-down-open-mini"></i></div>
                            </div>
                        </div>
                        <div class="pad">
                            <div>
                                <div class="step"><i class="icon-up-open-mini"></i></div>
                                <div class="note"></div>
                                <div class="step"><i class="icon-down-open-mini"></i></div>
                            </div>
                        </div>
                        <div class="pad">
                            <div>
                                <div class="step"><i class="icon-up-open-mini"></i></div>
                                <div class="note"></div>
                                <div class="step"><i class="icon-down-open-mini"></i></div>
                            </div>
                        </div>
                        <div class="pad">
                            <div>
                                <div class="step"><i class="icon-up-open-mini"></i></div>
                                <div class="note"></div>
                                <div class="step"><i class="icon-down-open-mini"></i></div>
                            </div>
                        </div>
                    </div>

Answer 1

您需要重新修改文件的结构以及模块的工作方式。它不起作用，因为你在Tone.Sequence课程中有可能设置任何内容之前创建了NoteModule，并且你还没有真正更新你的笔记数组，你也没有在构造函数中绑定您的step方法，这意味着它无法访问this上下文，从而无法保存所有修改。

重构您的模块以执行以下操作，传递一个函数回调，该回调将在您单击播放按钮（您必须创建）后执行。如果你想在播放新音符后立即播放，只需像我在step方法中那样调用回调。

import $ from 'jquery'

export default class NoteModule {

  constructor (callback, notes) {
    this.possibleNotes = ['','C4','D4','E4','F4','G4','A4','B4']
    this.notes = notes
    this.callback = callback
    this.note = 0
    // you need this otherwise the step method won't have access to the context
    this.step = this.step.bind(this)
  }

  init () {
    console.log('NoteModule')
    // make sure this is called, otherwise your events won't work
    $('div.step').on('click', this.step.bind(this))
    $('.play').on('click', () => this.callback(this.notes))
  }

  step (e) {

    const notes = []

    $(e.currentTarget).parent()
      .find('.note')
      .text(this.possibleNotes[this.note])

    this.note = (this.note + 1) % (this.possibleNotes.length)

    $('.pads div.note').each(el => {
      const note = $(el).text()

      if (note && note.length > 0) {
        notes.push(note)
      }
    })

    this.notes = notes
    // or callback here, as you want

  }
}

在您的index.js中只需导入，初始化您的类并传递将接收注释的函数回调：

import NoteModule from './note.js'

const callback = notes => {
  const seq = new Tone.Sequence((time, note) => {
    event.humanize = true
    synth.triggerAttackRelease(note, '8n')
  }, notes, '8n')
}

new NoteModule(callback)

检测运行时变量

1 个答案: