人工智能AI创作打击音乐效果代码
代码语言：html
所属分类：多媒体
代码描述：人工智能AI创作打击音乐效果代码，可设置节拍及速度，还可自己自定义节拍位置创作新的电子乐。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/materialize.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<style>
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;
}
</style>
</head>
<body>
<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="Higher temperatures will make the neural network generates wilder patterns" 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>This is an experimental drum machine powered by a deep neural network. To use it, define a seed pattern on the left, and use the “generate” button. A neural network will dream up a continuation to your seed pattern.</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>
<p>A pen by
<a href="https://twitter.com/teropa">@teropa</a>.</p>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/magentamusic.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/materialize.1.0.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/web-animations.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/webmidi.min.js"></script>
<script>
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 = '//repo.bfw.wiki/bfwrepo/sound/tones';
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 drumKit = [
new Tone.Players({
high: `${sampleBaseUrl}/808-kick-vh.mp3`,
med: `${sampleBaseUrl}/808-kick-vm.mp3`,
low: `${sampleBaseUrl}/808-kick-vl.mp3`
}).toMaster(),
new Tone.Players({
high: `${sampleBaseUrl}/flares-snare-vh.mp3`,
med: `${sampleBaseUrl}/flares-snare-vm.mp3`,
low: `${sampleBaseUrl}/flares-snare-vl.mp3`
}).connect(snarePanner),
new Tone.Players({
high: `${sampleBaseUrl}/808-hihat-vh.mp3`,
med: `${sampleBaseUrl}/808-hihat-vm.mp3`,
low: `${sampleBaseUrl}/808-hihat-vl.mp3`
}).connect(new Tone.Panner(-0.5).connect(reverb)),
new Tone.Players({
high: `${sampleBaseUrl}/808-hihat-open-vh.mp3`,
med: `${sampleBaseUrl}/808-hihat-open-vm.mp3`,
low: `${sampleBaseUrl}/808-hihat-open-vl.mp3`
}).connect(new Tone.Panner(-0.5).connect(reverb)),
new Tone.Players({
high: `${sampleBaseUrl}/slamdam-tom-low-vh.mp3`,
med: `${sampleBaseUrl}/slamdam-tom-low-vm.mp3`,
low: `${sampleBaseUrl}/slamdam-tom-low-vl.mp3`
}).connect(new Tone.Panner(-0.4).connect(reverb)),
new Tone.Players({
high: `${sampleBaseUrl}/slamdam-tom-mid-vh.mp3`,
med: `${sampleBaseUrl}/slamdam-tom-mid-vm.mp3`,
low: `${sampleBaseUrl}/slamdam-tom-mid-vl.mp3`
}).connect(reverb),
new Tone.Players({
high: `${sampleBaseUrl}/slamdam-tom-high-vh.mp3`,
med: `${sampleBaseUrl}/slamdam-tom-high-vm.mp3`,
low: `${sampleBaseUrl}/slamdam-tom-high-vl.mp3`
}).connect(new Tone.Panner(0.4).connect(reverb)),
new Tone.Players({
high: `${sampleBaseUrl}/909-clap-vh.mp3`,
med: `${sampleBaseUrl}/909-clap-vm.mp3`,
low: `${sampleBaseUrl}/909-clap-vl.mp3`
}).connect(new Tone.Panner(0.5).connect(reverb)),
new Tone.Players({
high: `${sampleBaseUrl}/909-rim-vh.wav`,
med: `${sampleBaseUrl}/909-rim-vm.wav`,
low: `${sampleBaseUrl}/909-rim-vl.wav`
}).connect(new Tone.Panner(0.5).connect(reverb))
];
let midiDrums = [36, 38, 42, 46, 41, 43, 45, 49, 51];
let reverseMidiMapping = new Map([
[36, 0],
[35, 0],
[38, 1],
[27, 1],
[28, 1],
[31, 1],
[32, 1],
[33, 1],
[34, 1],
[37, 1],
[39, 1],
[40, 1],
[56, 1],
[65, 1],
[66, 1],
[75, 1],
[85, 1],
[42, 2],
[44, 2],
[54, 2],
[68, 2],
[69, 2],
[70, 2],
[71, 2],
[73, 2],
[78, 2],
[80, 2],
[46, 3],
[67, 3],
[72, 3],
[74, 3],
[79, 3],
[81, 3],
[45, 4],
[29, 4],
[41, 4],
[61, 4],
[64, 4],
[84, 4],
[48, 5],
[47, 5],
[60, 5],
[63, 5],
[77, 5],
[86, 5],
[87, 5],
[50, 6],
[30, 6],
[43, 6],
[62, 6],
[76, 6],
[83, 6],
[49, 7],
[55, 7],
[57, 7],
[58, 7],
[51, 8],
[52, 8],
[53, 8],
[59, 8],
[82, 8]
]);
let temperature = 1.0;
let outputs = {
internal: {
play: (drumIdx, velocity, time) => {
drumKit[drumIdx].get(velocity).start(time);
}
}
};
let rnn = new mm.MusicRNN(
'//repo.bfw.wiki/bfwrepo/model/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();
}
function visualizePlay(time, stepIdx, drumIdx) {
Tone.Draw.schedule(() => {
if (!stepEls[stepIdx]) return;
let animTime = oneEighth * 4 * 1000;
let cellEl = stepEls[stepIdx].cellEls[drumIdx];
if (cellEl.classList.contains('on')) {
let baseColor = stepIdx < state.seedLength ? '#e91e63' : '#64b5f6';
cellEl.animate(
[
{
transform: 'translateZ(-100px)',
backgroundColor: '#fad1df'
},
{
transform: 'translateZ(50px)',
offset: 0.7
},
{ transform: 'translateZ(0)', backgroundColor: baseColor }
],
{ duration: animTime, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' }
);
}
}, time);
}
function renderPattern(regenerating = false) {
let seqEl = document.querySelector('.sequencer .steps');
while (stepEls.length > state.pattern.length) {
let { stepEl, gutterEl } = stepEls.pop();
stepEl.remove();
if (gutterEl) gutterEl.remove();
}
.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0