基于HTML5音频接口实现的时滞叠加器音效

Time Lag Accumulator，类似回音叠加播放的音频特效。

html5, audio

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var DELAY = 6;
var NOTE_RANGE = [60, 91];

var wrapper = document.querySelector('.canvas-wrapper');
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');

var size = undefined;

function resize() {
    canvas.width = wrapper.offsetWidth;
    canvas.height = wrapper.offsetWidth;
    size = Math.min(canvas.width, canvas.height);
}
window.addEventListener('resize', resize);
resize();

var sounds = [];

var currentNote = undefined;

function noteOn(note) {
    var triggerOnScreen = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];

if (note < NOTE_RANGE[0] || note > NOTE_RANGE[1]) return;
    var frequency = new Tone.Frequency(note, 'midi');
    currentNote = note;
    synth.triggerAttack(frequency);
    if (triggerOnScreen) toggleOnScreen(note, true);
    sounds.push({
        note: note,
        frequency: frequency,
        startAt: Tone.now()
    });
}

function noteOff(note) {
    var triggerOnScreen = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];

if (note < NOTE_RANGE[0] || note > NOTE_RANGE[1]) return;
    if (currentNote === note) {
        synth.triggerRelease();
    }
    if (triggerOnScreen) toggleOnScreen(note, false);
    for (var i = sounds.length - 1; i >= 0; i--) {
        if (!sounds[i].endAt && sounds[i].note === note) {
            sounds[i].endAt = Tone.now();
        }
    }
}

// On-sreen keyboard management
nx.onload = function() {
    onScreenKeyb.midibase = NOTE_RANGE[0];
    onScreenKeyb.octaves = (NOTE_RANGE[1] - NOTE_RANGE[0]) / 12;
    onScreenKeyb.on('*', function(_ref) {
        var note = _ref.note;
        var on = _ref.on;
        return on ? noteOn(note, false) : noteOff(note, false);
    });
    onScreenKeyb.init();
};

function toggleOnScreen(note, on) {
    if (!onScreenKeyb) return;
    for (var _iterator = onScreenKeyb.keys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
        var _ref2;

if (_isArray) {
            if (_i >= _iterator.length) break;
            _ref2 = _iterator[_i++];
        } else {
            _i = _iterator.next();
            if (_i.done) break;
            _ref2 = _i.value;
        }

var key = _ref2;

if (key.note === note) {
            onScreenKeyb.toggle(key, on);
        }
    }
}

// Kickstart audioctx on mobile
StartAudioContext(Tone.context, '#onScreenKeyb');

// Keyboard input
var keyboard = new AudioKeys({
    polyphony: 1,
    rows: 2
});
keyboard.down(function(_ref3) {
    var note = _ref3.note;
    return noteOn(note);
});
keyboard.up(function(_ref4) {
    var note = _ref4.note;
    return noteOff(note);
});

// MIDI keyboard
WebMidi.enable(function(err) {
    if (err) {
        console.log("WebMidi could not be enabled.", err);
    } else {
        WebMidi.inputs.forEach(function(input) {
            input.addListener('noteon', 'all', function(e) {
                return noteOn(e.note.number);
            });
            input.addListener('noteoff', 'all', function(e) {
                return noteOff(e.note.number);
            });
        });
    }
});

// Visuals
var startedAt = Tone.now();

function render() {
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;

context.clearRect(0, 0, canvas.width, canvas.height);

var bgAngle = (Tone.now() - startedAt) / DELAY * Math.PI * 2;
    var grad = context.createLinearGradient(-size / 2, 0, size / 2, 0);
    grad.addColorStop(0, '#181018');
    grad.addColorStop(1, '#101818');
    context.fillStyle = grad;;
    context.beginPath();
    context.save();
    context.translate(centerX, centerY);
    context.rotate(bgAngle);
    context.arc(0, 0, size / 2, 0, Math.PI * 2);
    context.fill();
    context.restore();

context.lineWidth = 1;
    context.strokeStyle = '#555';
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.lineTo(centerX + size / 2, centerY);
    context.stroke();

context.lineWidth = size / 20;

for (var _iterator2 = sounds, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
        var _ref5;

if (_isArray2) {
            if (_i2 >= _iterator2.length) break;
            _ref5 = _iterator2[_i2++];
        } else {
            _i2 = _iterator2.next();
            if (_i2.done) break;
            _ref5 = _i2.value;
        }

var sound = _ref5;

var sinceStarted = Tone.now() - sound.startAt;
        var alpha = Math.max(0, 1 - sinceStarted / 75);
        var startRotations = sinceStarted / DELAY;
        var endRotations = sound.endAt ? (Tone.now() - sound.endAt) / DELAY : 0;
        var startAngle = startRotations * Math.PI * 2;
        var endAngle = endRotations * Math.PI * 2;
        var radius = (sound.note - NOTE_RANGE[0]) / (NOTE_RANGE[1] - NOTE_RANGE[0]);

if (endAngle < startAngle) {
            context.strokeStyle = 'rgba(237,20,111,' + alpha + ')';
            context.beginPath();
            context.arc(centerX, centerY, 10 + radius * (size / 2 - 20), startAngle, endAngle, true);
            context.stroke();
        }
    }

requestAnimationFrame(render);
}
render();

// Periodically remove sounds that are no longer audible from the visualization.
function cleanUp() {
    for (var i = sounds.length - 1; i >= 0; i--) {
        var sound = sounds[i];
        var sinceStarted = Tone.now() - sound.startAt;
        if (sinceStarted > 75) {
            sounds.splice(i, 1);
        }
    }
}
setInterval(cleanUp, 5000);

编译

CSS

HTML

Time Lag Accumulator，类似回音叠加播放的音频特效。

html5, audio

编辑器支持Emmet

快捷键

Time Lag Accumulator，类似回音叠加播放的音频特效。

html5, audio

使用HTML5 AudioContext接口实现音频控制器

HTML5 Web音频应用程序接口（Web Audio API）实例：参数均衡器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：