使用Tone.js实现的随机电子鼓

界面部分使用了material.js，动画部分使用了web-animations.js。

h5, audio, 电子乐器

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3924
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const drumFileNames = {
  clap: [
    'clp_analogue.mp3'
  ],
  hat: [
    'hat_bestfriend.mp3'
  ],
  prc: [
    'prc_home.mp3'
  ],
  shaker_tam: [
    'prc_home.mp3'
  ],
  snare: [
    'snr_mpc.mp3'
  ],
  tom: [
    'prc_home.mp3'
  ],
  bd_kick: [
    'bd_909dwsd.mp3'
  ]
};

const drumBuffers = _.transform(
  drumFileNames,
  (res, names, group) =>
    (res[group] = names.map(f => new Tone.Buffer(`/uploads/1708/sounds/${f}`))),
  {}
);

class Cell {
  constructor() {
    this.full = redom.el('div.full');
    this.parts = [
      redom.el('div.part'),
      redom.el('div.part'),
      redom.el('div.part')
    ];
    this.el = redom.el('div.cell', [
      this.full,
      redom.el('div.parts', this.parts)
    ]);
    this.model = { active: false, probability: 0 };
    this.playing = false;
    this.el.addEventListener('click', () => {
      this.model.active = !this.model.active;
      this.model.probability = 1 - this.model.probability;
      this.update(this.model);
    });
  }

update(model) {
    const baseColor = `hsl(0, 0%, ${20 + model.probability * 70}%)`;
    redom.setAttr(this.el, {
      style: {
        backgroundColor: baseColor,
        zIndex:
          model.playing !== this.model.playing
            ? triggerCounter++ % 1000
            : this.el.style.zIndex
      }
    });
    this.triggerAnimation(model.playing, baseColor);
    this.model = model;
    this.playing = model.playing;
  }

triggerAnimation(playing, baseColor) {
    if (playing === 'all' && this.playing !== 'all') {
      this.animateTrigger(this.el, '#EC407A', baseColor);
    }
    this.parts.forEach((part, idx) => {
      const triggerAnimation = playing === idx && this.playing !== idx;
      if (triggerAnimation) this.animateTrigger(part, '#EC407A', 'inherit');
    });
  }

animateTrigger(el, fromColor, toColor) {
    el.animate(
      [
        {
          backgroundColor: fromColor,
          transform: 'translateZ(30px)'
        },
        { backgroundColor: toColor, transform: 'translateZ(0)' }
      ],
      {
        duration: 750,
        easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)'
      }
    );
  }
}

class Column {
  constructor() {
    this.el = redom.el('div.column');
    this.list = redom.list(this.el, Cell);
  }
  update({ drums, isCurrentStep }) {
    this.list.update(drums);
  }
}

const generateButton = document.querySelector('#generate-pattern');
const patternLengthControl = document.querySelector('#pattern-length-control');
const densityControl = document.querySelector('#pattern-density-control');
const deviationsControl = document.querySelector('#deviations-control');
const bpmControl = document.querySelector('#bpm-control');
const players = [];
const sequencerComponent = redom.list('div.sequencer.mdl-shadow--6dp', Column);

let deviations = 0.1;
let patternLength = 8;
let drumCount = 4;
let density = 0.5;
let bpm = 160;
let drumPattern = generatePattern(
  patternLength,
  drumCount,
  density,
  deviations
);
let triggerCounter = 0;

function getStepGain(step, patternLength) {
  if (step === 0) {
    return 1;
  } else if (step === Math.round(patternLength / 2)) {
    return 0.7;
  } else {
    return 0.3;
  }
}

function renderSequencer(drumPattern) {
  sequencerComponent.update(drumPattern);
}

Tone.Transport.bpm.value = bpm;
Tone.Transport.timeSignature = patternLength / 2;
renderSequencer(drumPattern);

const part = new Tone.Part(playPart, drumPattern).start();
part.loop = true;

function regenerate() {
  drumPattern = generatePattern(patternLength, drumCount, density, deviations);
  drumPattern.forEach(pt => {
    part.at(pt.time, pt);
  });
  renderSequencer(drumPattern);
}

generateButton.addEventListener('click', regenerate);
patternLengthControl.addEventListener('input', evt => {
  const length = +evt.target.value;
  if (patternLength !== length) {
    patternLength = length;
    Tone.Transport.timeSignature = patternLength / 2;

const oldTimes = drumPattern.map(p => p.time);
    regenerate();
    const newTimes = drumPattern.map(p => p.time);
    _.difference(oldTimes, newTimes).forEach(t => part.remove(t));

part.loopEnd = '1m'; // Make the loop recalculate times after sig change
  }
});
densityControl.addEventListener('input', evt => {
  density = +evt.target.value;
  regenerate();
});
deviationsControl.addEventListener('input', evt => {
  deviations = +evt.target.value;
  drumPattern.forEach(part => {
    part.drums.forEach(drum => {
      drum.probability = drum.active ? 1 - deviations / 2 : deviations / 2;
    });
  });
  renderSequencer(drumPattern);
});
bpmControl.addEventListener('input', evt => {
  Tone.Transport.bpm.value = +evt.target.value;
});

redom.mount(document.querySelector('#sequencer'), sequencerComponent);

Tone.Buffer.on('load', () => {
  document.querySelector('#loading').remove();
  document.querySelector('#sequencer').style.display = 'flex';
  Tone.Transport.start();
  setInterval(() => {
    while (players.length && players[0].state === 'stopped') {
      players.shift().dispose();
    }
  }, 5000);
});

StartAudioContext(Tone.context, generateButton);

编译

CSS

html,
body {
    margin: 0;
    padding: 0;
    background-color: #222;
    color: #eee;
}
.container {
    max-width: 80vw;
    height: 80vh;
    margin: 10vh auto 10vh auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}
.controls {
    display: flex;
    padding: 20px 5px
}
.controls .left {
    flex: 2;
}
.left button {
    width: 100%;
}
.controls .control {
    flex: 2;
    font-size: 13px;
    text-align: center;
}
.controls .mdl-slider__background-upper {
    background-color: #bbb;
}
#sequencer {
    flex: 1;
    display: none;
}
#loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sequencer {
    width: 100%;
    display: flex;
    margin: 20px 0;
    perspective: 500px;
    transform-style: preserve-3d;
}
.sequencer .column {
    flex: 1;
    display: flex;
    flex-direction: column;
    transform-style: inherit;
}
.sequencer .cell {
    flex: 1;
    margin: .5px;
    box-sizing: border-box;
    position: relative;
}
.sequencer .cell .full,
.sequencer .cell .parts {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
.sequencer .cell .parts {
    display: flex;
}
.sequencer .cell .part {
    flex: 1;
}

HTML

<div class="controls">
        <div class="left"></div>
        <label class="control">
            <input id="deviations-control" class="mdl-slider mdl-js-slider" type="range" min="0" max="1" value="0.1" step="0.05" tabindex="2"> Deviations
        </label>
        <label class="control">
            <input id="bpm-control" class="mdl-slider mdl-js-slider" type="range" min="10" max="300" value="160" step="1" tabindex="3"> Tempo
        </label>
    </div>
</div>

界面部分使用了material.js，动画部分使用了web-animations.js。

h5, audio, 电子乐器

编辑器支持Emmet

快捷键

界面部分使用了material.js，动画部分使用了web-animations.js。

h5, audio, 电子乐器

使用Tone.js实现的欧几里得节拍

HTML5 Tensorflow.js基于神经网络RNN预训练模型的在线电子鼓模拟

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：