基于Angular.js实现的琶音效果器 | 琴音调节器

可以通过调节音调、音频信号的波形等参数来调节琴瑟的音效。

angular, music

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

angular.module("App", [])
    .controller("Controller", ["$scope", function($scope) {

// The different wave types that the oscillator supports.
        // By putting them on the scope we can ask Angular to
        // render a drop down for us.
        $scope.oscTypes = ["sine", "triangle", "sawtooth", "square"];
        $scope.oscType = $scope.oscTypes[0];
        $scope.octaves = 5;
        $scope.duration = 0.9;
        $scope.triggerPause = 0.09;

var context = new(window.AudioContext || window.webkitAudioContext);

var frequencies = [];

function calcFrequencies() {
            // A4 440 - A5 880
            // Go one octave up: multiply frequency by two.
            // There are twelve tones in an octave.
            // The difference between each note is twelve 
            // root of two.
            var f = 65.4064; // C2 Deep C
            for (var i = 0; i < 12 * 8; i++) {
                frequencies.push(f);
                f *= Math.pow(2, 1 / 12);
            }
        }
        calcFrequencies();

function Tone(index, destination) {
            this.index = index;
            this.destination = destination;
            this.duration = parseFloat($scope.duration);
        }
        Tone.prototype.play = function(time) {
            // Create a new oscillator each time
            var osc = context.createOscillator();
            osc.type = $scope.oscType;
            osc.frequency.value = frequencies[this.index];

var gain = context.createGain();
            // Does not work in Edge
            //osc.connect(gain).connect(this.destination);
            osc.connect(gain);
            gain.connect(this.destination);
            gain.gain.setValueAtTime(0.2, time);
            gain.gain.exponentialRampToValueAtTime(0.0001, time + this.duration);
            osc.start(time);
            osc.stop(time + this.duration);
        }

var tones = [];

$scope.chords = {
            "C Minor": [0, 3, 7],
            "C Major": [0, 4, 7],
            "C Dominant": [0, 4, 7, 10],
            "C Dim": [0, 3, 6],
            "C Maj7": [0, 4, 7, 11],
            "D Minor": [2, 5, 9],
            "D Major": [2, 6, 9],
            "E Minor": [4, 7, 11],
            "E Major": [4, 8, 11],
            "F Minor": [6, 9, 13],
            "F Major": [6, 10, 13],
        };

function play() {
            var delay = $scope.triggerPause;
            var now = context.currentTime;

tones.forEach((tone, i) => tone.play(now + i * delay));
            var space = tones.length * delay;
            if ($scope.down) {
                tones.reverse().forEach((tone, i) => tone.play(now + i * delay + space));
            }
        }

$scope.play = function(chordName) {
            var chord = $scope.chords[chordName];
            createChord(chord, $scope.octaves);
            play();
        }
    }]);

编译

CSS

HTML

可以通过调节音调、音频信号的波形等参数来调节琴瑟的音效。

angular, music

编辑器支持Emmet

快捷键

可以通过调节音调、音频信号的波形等参数来调节琴瑟的音效。

angular, music

Angular.js实现的图标调色器

使用Angular.js实现自定义的Addthis社交分享插件界面和指令

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：