Javascript 随机音乐生成器及可视化

JS Random Music Generator 可以随机生成音乐旋律的一段JS脚本。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var w = window,
    notes, noteCt,
    cnv, ctx, wx, wy, mx,
    mtX = 0,
    mtY,
    i = 0,
    hue = 1,
    aN, bN, cN, dN, eN, fN, gN;

init();
anim();

function loadAudio(uri) {
    var a = new Audio();
    a.addEventListener('canplaythrough');
    a.src = uri;
    return a;
}

function init() {
    cnv = document.createElement('canvas'),
        wx = w.innerWidth,
        wy = w.innerHeight,
        ctx = cnv.getContext('2d');
    cnv.width = wx;
    cnv.height = wy;
    document.body.appendChild(cnv);
    mtY = wy / 2;

aN = loadAudio('/uploads/150601/pinkyfinger__piano-a.wav'),
        bN = loadAudio('/uploads/150601/pinkyfinger__piano-bb.wav'),
        cN = loadAudio('/uploads/150601/pinkyfinger__piano-c.wav'),
        dN = loadAudio('/uploads/150601/pinkyfinger__piano-d.wav'),
        eN = loadAudio('/uploads/150601/pinkyfinger__piano-eb.wav'),
        fN = loadAudio('/uploads/150601/pinkyfinger__piano-f.wav'),
        gN = loadAudio('/uploads/150601/pinkyfinger__piano-g.wav');

notes = [aN, bN, cN, dN, eN, fN, gN];
    colors = ['tomato',
        'goldenrod',
        'indianred',
        'lightcoral',
        'lightseagreen',
        'MediumAquaMarine',
        'seagreen'
    ]
    noteCT = noteCount = notes.length;
}

function play() {
    if (i % 15 === 0) {
        var whichNote = Math.floor(Math.random() * noteCount),
            multiNote = whichNote <= 0 ? 1 : whichNote,
            bXa = Math.floor(Math.random() * wx),
            bXb = Math.floor((Math.random() * multiNote * wx) / 7),
            bYa = Math.floor(Math.random() * wy),
            bYb = Math.floor((Math.random() * multiNote * wy) / 7);

notes[whichNote].play();
        notes[whichNote].currentTime = 0;
        notes[whichNote].volume = 0.1;

ctx.beginPath();
        ctx.arc(bXa, bYa, 20, 0, Math.PI * 2, false);
        ctx.fillStyle = colors[whichNote];
        ctx.fill();

ctx.beginPath();
        ctx.moveTo(mtX, mtY);
        ctx.bezierCurveTo(
            bXa,
            bYa,
            bXb,
            bYb,
            bXa,
            bYa);
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'hsla(0,100%,100%,.5)';
        ctx.stroke();

ctx.beginPath();
        ctx.arc(bXb, bYb, 10, 0, Math.PI * 2, false);
        ctx.strokeStyle = colors[whichNote];
        ctx.stroke();

mtX = bXb;
        mtY = bYb;

if (i % 30 === 0) {
            notes[i % 7].play();
        }
        if (i % 45 === 0) {
            notes[i % 3].play();
        }

console.log(wx, wy, bXa, bXb, bYa, bYb);
    }
}

function anim() {
    i++;
    w.requestAnimationFrame(anim);
    play();
}

编译

CSS

body,
html {
    background-color: #000;
    margin: 0;
    pading: 0;
    overflow: hidden;
}
#keys {
    height: 116px;
    width: 672px;
    padding-right: 10px;
    padding-top: 50px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box {
    width: 80px;
    height: 80px;
    margin-left: 10px;
    float: left;
    border-radius: 10px;
    display: block;
}
#a {
    background-color: #e040fb;
    box-shadow: 0px 6px 0px #a0f;
}
#b {
    background-color: #7c4dff;
    box-shadow: 0px 6px 0px #6200ea;
}
#c {
    background-color: #448aff;
    box-shadow: 0px 6px 0px #2962ff;
}
#d {
    background-color: #9ccc65;
    box-shadow: 0px 6px 0px #2e7d32;
}
#e {
    background-color: #fff176;
    box-shadow: 0px 6px 0px #ffd600;
}
#f {
    background-color: #ffb74d;
    box-shadow: 0px 6px 0px #ff9100;
}
#g {
    background-color: #ff7043;
    box-shadow: 0px 6px 0px #f4511e;
}
#a:active,
#b:active,
#c:active,
#d:active,
#e:active,
#f:active,
#g:active {
    box-shadow: none;
    margin-top: 5px;
}
#a:active {
    background-color: #a0f;
}
#b:active {
    background-color: #6200ea;
}
#c:active {
    background-color: #2962ff;
}
#d:active {
    background-color: #2e7d32;
}
#e:active {
    background-color: #ffd600;
}
#f:active {
    background-color: #ff9100;
}
#g:active {
    background-color: #f4511e;
}

HTML

JS Random Music Generator 可以随机生成音乐旋律的一段JS脚本。

编辑器支持Emmet

快捷键

JS Random Music Generator 可以随机生成音乐旋律的一段JS脚本。

Three.js OrbitControls2 音乐可视化特效

JavaScript 波形图和基础傅里叶变换

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：