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

Neural Drum Machine, music play robot，神经网络机器人编曲。

h5, math, tensorflow, RNN

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const DRUM_CLASSES = [
  'Kick',
  'Snare',
  'Hi-hat closed',
  'Hi-hat open',
  'Tom low',
  'Tom mid',
  'Tom high',
  'Clap',
  'Rim'
];
const TIME_HUMANIZATION = 0.01;

let Tone = mm.Player.tone;

let sampleBaseUrl = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699';

let reverb = new Tone.Convolver(
  `${sampleBaseUrl}/small-drum-room.wav`
).toMaster();
reverb.wet.value = 0.35;

let snarePanner = new Tone.Panner().connect(reverb);
new Tone.LFO(0.13, -0.25, 0.25).connect(snarePanner.pan).start();

let temperature = 1.0;

let outputs = {
  internal: {
    play: (drumIdx, velocity, time) => {
      drumKit[drumIdx].get(velocity).start(time);
    }
  }
};

let rnn = new mm.MusicRNN(
  'https://storage.googleapis.com/download.magenta.tensorflow.org/tfjs_checkpoints/music_rnn/drum_kit_rnn'
);
Promise.all([
  rnn.initialize(),
  new Promise(res => Tone.Buffer.on('load', res))
]).then(([vars]) => {
  let state = {
    patternLength: 32,
    seedLength: 4,
    swing: 0.55,
    pattern: [[0], [], [2]].concat(_.times(32, i => [])),
    tempo: 120
  };
  let stepEls = [],
    hasBeenStarted = false,
    oneEighth = Tone.Time('8n').toSeconds(),
    activeOutput = 'internal',
    midiClockSender = null,
    midiClockStartSent = false,
    activeClockInput = 'none',
    currentSchedulerId,
    stepCounter;

function generatePattern(seed, length) {
    let seedSeq = toNoteSequence(seed);
    return rnn
      .continueSequence(seedSeq, length, temperature)
      .then(r => seed.concat(fromNoteSequence(r, length)));
  }

function getStepVelocity(step) {
    if (step % 4 === 0) {
      return 'high';
    } else if (step % 2 === 0) {
      return 'med';
    } else {
      return 'low';
    }
  }

function humanizeTime(time) {
    return time - TIME_HUMANIZATION / 2 + Math.random() * TIME_HUMANIZATION;
  }

function tick(time = Tone.now() - Tone.context.lookAhead) {
    if (_.isNumber(stepCounter) && state.pattern) {
      stepCounter++;
      if (midiClockSender) midiClockSender(time, stepCounter);

let stepIdx = stepCounter % state.pattern.length;
      let isSwung = stepIdx % 2 !== 0;
      if (isSwung) {
        time += (state.swing - 0.5) * oneEighth;
      }
      let velocity = getStepVelocity(stepIdx);
      let drums = state.pattern[stepIdx];
      drums.forEach(d => {
        let humanizedTime = stepIdx === 0 ? time : humanizeTime(time);
        outputs[activeOutput].play(d, velocity, humanizedTime);
        visualizePlay(humanizedTime, stepIdx, d);
      });
    }
  }

function startPattern() {
    stepCounter = -1;
    midiClockStartSent = false;
    updatePlayPauseIcons();
  }

function stopPattern() {
    stepCounter = null;
    updatePlayPauseIcons();
  }

stepEl.style.flex = stepIdx % 2 === 0 ? state.swing : 1 - state.swing;

if (!gutterEl && stepIdx < state.pattern.length - 1) {
        gutterEl = document.createElement('div');
        gutterEl.classList.add('gutter');
        seqEl.insertBefore(gutterEl, stepEl.nextSibling);
      } else if (gutterEl && stepIdx >= state.pattern.length) {
        gutterEl.remove();
        gutterEl = null;
      }

if (gutterEl && stepIdx === state.seedLength - 1) {
        gutterEl.classList.add('seed-marker');
      } else if (gutterEl) {
        gutterEl.classList.remove('seed-marker');
      }

for (let cellIdx = 0; cellIdx < DRUM_CLASSES.length; cellIdx++) {
        let cellEl;
        if (cellEls[cellIdx]) {
          cellEl = cellEls[cellIdx];
        } else {
          cellEl = document.createElement('div');
          cellEl.classList.add('cell');
          cellEl.classList.add(_.kebabCase(DRUM_CLASSES[cellIdx]));
          cellEl.dataset.stepIdx = stepIdx;
          cellEl.dataset.cellIdx = cellIdx;
          stepEl.appendChild(cellEl);
          cellEls[cellIdx] = cellEl;
        }
        if (step.indexOf(cellIdx) >= 0) {
          cellEl.classList.add('on');
        } else {
          cellEl.classList.remove('on');
        }
      }
      stepEls[stepIdx] = { stepEl, gutterEl, cellEls };

setTimeout(repositionRegenerateButton, 0);
  }

function regenerate() {
    let seed = _.take(state.pattern, state.seedLength);
    renderPattern(true);
    return generatePattern(seed, state.patternLength - seed.length).then(
      result => {
        state.pattern = result;
        onPatternUpdated();
      }
    );
  }

function onPatternUpdated() {
    stopPattern();
    renderPattern();
  }

function toNoteSequence(pattern) {
    return mm.sequences.quantizeNoteSequence(
      {
        ticksPerQuarter: 220,
        totalTime: pattern.length / 2,
        timeSignatures: [
          {
            time: 0,
            numerator: 4,
            denominator: 4
          }
        ],
        tempos: [
          {
            time: 0,
            qpm: 120
          }
        ],
        notes: _.flatMap(pattern, (step, index) =>
          step.map(d => ({
            pitch: midiDrums[d],
            startTime: index * 0.5,
            endTime: (index + 1) * 0.5
          }))
        )
      },
      1
    );
  }

function setSwing(newSwing) {
    state.swing = newSwing;
    renderPattern();
  }

WebMidi.enable(err => {
    if (err) {
      console.error('WebMidi could not be enabled', err);
      return;
    }
    document
      .querySelectorAll('.webmidi-enabled')
      .forEach(e => (e.style.display = 'block'));
    let outputSelector = document.querySelector('.midi-output');
    let clockOutputSelector = document.querySelector('.midi-clock-output');
    let clockInputSelector = document.querySelector('.midi-clock-input');
    let activeClockOutput,
      midiClockCounter = 0,
      eighthsCounter = 0,
      lastEighthAt;

function onDevicesChanged() {
      while (outputSelector.firstChild) {
        outputSelector.firstChild.remove();
      }
      let internalOption = document.createElement('option');
      internalOption.value = 'internal';
      internalOption.innerText = 'Internal drumkit';
      outputSelector.appendChild(internalOption);
      for (let output of WebMidi.outputs) {
        let option = document.createElement('option');
        option.value = output.id;
        option.innerText = output.name;
        outputSelector.appendChild(option);
      }
      $(outputSelector).formSelect();
      onActiveOutputChange('internal');

while (clockOutputSelector.firstChild) {
        clockOutputSelector.firstChild.remove();
      }
      let noneOption = document.createElement('option');
      noneOption.value = 'none';
      noneOption.innerText = 'Not sending';
      clockOutputSelector.appendChild(noneOption);
      for (let output of WebMidi.outputs) {
        let option = document.createElement('option');
        option.value = output.id;
        option.innerText = output.name;
        clockOutputSelector.appendChild(option);
      }
      $(clockOutputSelector).formSelect();
      onActiveClockOutputChange('none');

while (clockInputSelector.firstChild) {
        clockInputSelector.firstChild.remove();
      }
      noneOption = document.createElement('option');
      noneOption.value = 'none';
      noneOption.innerText = 'None (using internal clock)';
      clockInputSelector.appendChild(noneOption);
      for (let input of WebMidi.inputs) {
        let option = document.createElement('option');
        option.value = input.id;
        option.innerText = input.name;
        clockInputSelector.appendChild(option);
      }
      $(clockInputSelector).formSelect();
      onActiveClockInputChange('none');
    }

function stopSendingMidiClock() {
      midiClockSender = null;
      midiClockStartSent = false;
    }

function incomingMidiClockStart() {
      midiClockCounter = 0;
      eighthsCounter = 0;
      startPattern();
    }

function incomingMidiClockStop() {
      midiClockCounter = 0;
      eighthsCounter = 0;
      lastEighthAt = null;
      stopPattern();
    }

onDevicesChanged();
    WebMidi.addListener('connected', onDevicesChanged);
    WebMidi.addListener('disconnected', onDevicesChanged);

$(outputSelector)
      .on('change', evt => onActiveOutputChange(evt.target.value))
      .formSelect();
    $(clockOutputSelector)
      .on('change', evt => onActiveClockOutputChange(evt.target.value))
      .formSelect();
    $(clockInputSelector)
      .on('change', evt => onActiveClockInputChange(evt.target.value))
      .formSelect();
  });

$('#pattern-length')
    .on('change', evt => setPatternLength(+evt.target.value))
    .formSelect();

window.addEventListener('resize', repositionRegenerateButton);

renderPattern();

document.querySelector('.progress').remove();
  document.querySelector('.app').style.display = null;
});

编译

CSS

html,
body,
.app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #111;
    color: white;
}
.progress {
    max-width: 30%;
    margin: 45vh auto 55vh auto;
}
.app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #010305, #131516);
}
.sequencer,
.controls {
    width: 80vw;
}
.controls {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.control {
    text-align: center;
}
.control input {
    margin-bottom: 20px;
}
.select-wrapper span.caret {
    color: inherit;
    /* Override materialize.css black */
}
.select-wrapper input.select-dropdown {
    margin-bottom: 10px;
}
.input-field {
    margin-top: 0;
}
input[type='range'] {
    border: 0;
}
input[type='range'] + .thumb {
    background-color: #2196f3;
}
input[type='range']::-webkit-slider-thumb {
    background-color: #2196f3;
}
input[type='range']::-moz-range-thumb {
    background-color: #2196f3;
}
input[type='range']::-ms-thumb {
    background-color: #2196f3;
}
.control .share {
    margin-top: 10px;
}
.midi-output,
.midi-clock-input,
.select-wrapper {
    max-width: 200px;
    margin: 0 auto;
}
.select-wrapper input {
    color: white;
}
.sequencer {
    position: relative;
    height: 70vh;
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    perspective: 1000px;
    transform-style: preserve-3d;
}
.sequencer .legend {
    flex: 0.75;
    display: flex;
    flex-direction: column;
}
.drum-class {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 2.5px;
    font-size: 12px;
    color: #999;
}
.sequencer .steps {
    flex: 9;
    display: flex;
    flex-direction: row;
}
.step {
    flex: 1;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
}
.steps {
    transform-style: preserve-3d;
}
.gutter {
    width: 5px;
}
.gutter.seed-marker {
    background-color: #aaa;
    margin: 0 10px;
    cursor: move;
}
.gutter.seed-marker:hover {
    background-color: white;
}
.cell {
    margin: 2.5px 0;
    background-color: rgba(100, 100, 100, 0.1);
    border: 1px solid rgba(100, 100, 100, 0.2);
    border-radius: 3px;
    z-index: 0;
    transition: background-color 0.3s ease;
}
.cell:hover {
    background-color: rgba(100, 100, 100, 0.5);
}
.step:not(.regenerating) .cell.on {
    background-color: #64b5f6;
    opacity: 1;
}
.step.seed .cell.on {
    background-color: #e91e63;
}
.regenerate {
    position: absolute;
    visibility: hidden;
    font-size: 30px;
    line-height: 56px;
}
.kick {
    flex: 2;
    margin-bottom: 10px;
}
.snare {
    flex: 1;
    margin-top: 10px;
    margin-bottom: 10px;
}
.hi-hat-closed {
    flex: 1;
    margin-top: 10px;
}
.hi-hat-open {
    flex: 1;
    margin-bottom: 10px;
}
.tom-low {
    flex: 1;
    margin-top: 10px;
}
.tom-mid {
    flex: 1;
}
.tom-high {
    flex: 1;
    margin-bottom: 10px;
}
.clap {
    flex: 1;
    margin-top: 10px;
}
.rim {
    flex: 1;
}
.info {
    max-width: 50%;
    margin: 100px auto;
    text-align: center;
}
.info p {
    margin-top: 50px;
}

HTML

<div class="progress pink">
    <div class="indeterminate white"></div>
</div>
<div class="app" style="display: none;">
    <div class="sequencer">
        <div class="steps"></div>
    </div>
    <a class="regenerate btn-floating btn-large waves-effect waves-light pink darken-2 pulse">
        <i class="material-icons">refresh</i>
    </a>
    <div class="controls">
        <div class="control">
            <a class="playpause btn-floating btn-large waves-effect waves-light blue">
                <i class="material-icons play-icon">play_arrow</i>
                <i class="material-icons pause-icon" style="display: none">pause</i>
            </a>
        </div>
        <div class="control">
            <div class="input-field grey-text">
                <select id="pattern-length">
                    <option>4</option>
                    <option>8</option>
                    <option selected>16</option>
                    <option>32</option>
                </select>
                Pattern length
            </div>
        </div>
        <div class="control">
            <p class="range-field grey-text">
                <input type="range" id="tempo" min="20" max="240" value="120" step="1"> Tempo
            </p>
        </div>
        <div class="control">
            <p class="range-field grey-text">
                <input type="range" id="swing" min="0.5" max="0.7" value="0.55" step="0.05"> Swing
            </p>
        </div>
        <div class="control">
            <p class="range-field grey-text">
                <input type="range" id="temperature" class="tooltipped" min="0.5" max="2" value="1.1" step="0.1" data-tooltip="更高的温度会使神经网络产生更狂野的模式。" data-delay="500"> Temperature
            </p>
        </div>
    </div>
</div>
<div class="info">
    <p class="webmidi-enabled" style="display: none;">
        Output:
        <select class="midi-output"></select>
    </p>
    <p class="webmidi-enabled" style="display: none;">
        MIDI clock output:
        <select class="midi-clock-output"></select>
    </p>
    <p class="webmidi-enabled" style="display: none;">
        MIDI clock input:
        <select class="midi-clock-input"></select>
    </p>
    <p>这是一个网页实验作品，由深度神经网络驱动的在线电子鼓机器人。使用方法：请在左侧定义种子模式，然后点击橘红色的“生成/刷新”按钮。神经网络将帮你虚构出剩余部分的音乐节奏。</p>
    <p>Using the
        <a href="https://github.com/tensorflow/magenta/tree/master/magenta/models/drums_rnn">Drums RNN</a> (pretrained) model from
        <a href="https://magenta.tensorflow.org/">Google Magenta</a>, and
        <a href="https://goo.gl/magenta/js">Magenta.js</a> +
        <a href="https://js.tensorflow.org/">TensorFlow.js</a> +
        <a href="https://tonejs.github.io/">Tone.js</a>.</p>
</div>

Neural Drum Machine, music play robot，神经网络机器人编曲。

h5, math, tensorflow, RNN

编辑器支持Emmet

快捷键

Neural Drum Machine, music play robot，神经网络机器人编曲。

h5, math, tensorflow, RNN

HTML5 Perlin.js带发光效果的粒子特效

HTML5基于Anime.js实现的SVG矢量图变形动画 - 地标切换

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：