pedalboard.js

Tarayıcınızda gitar efektleri



ARMAGAN AMCALAR
@aamcalar

Ben Kimim?


Armağan Amcalar
Startup Kitchen'da Baş Yazılım Mimarı

pedalboard.js
tartJS
geneJS
cote
jira-bot

Demo uygulama

Web Audio API


Tarayıcıda üçüncü parti yazılımlara gerek kalmaksızın
ses ile ilgili uygulamalar geliştirmeye yarar.


Oyunlarda gelişmiş ses yönetimi
Ses kayıt uygulamaları
Ses eğitimi uygulamaları
Sanatsal uygulamalar
Görsel efekt uygulamaları


Web Audio API temelleri




Düğüm bazlı ağ yapısı

Web Audio API bileşenleri

AudioContext
GainNode
DelayNode
AudioBufferSourceNode
MediaElementAudioSourceNode
ScriptProcessorNode
PannerNode
ConvolverNode
AnalyserNode
ChannelSplitterNode
ChannelMergerNode
BiquadFilterNode
DynamicsCompressorNode
WaveShaperNode
OscillatorNode

pedalboard.js

GPL lisanslı
İyi dokümente edilmiş

Web Audio API üzerine kurulu
13 aydır geliştiriliyor
Web Audio için ilk efekt kütüphanesi

Gitar temelli soyutlamalar
 pedal, pot, switch, LED vs.

Google Closure Library üzerine yazılan
açık kaynak tartJS kütüphanesini kullanıyor
Bileşenler MVVM desenini kullanıyor

Google Closure Compiler ile Simple ve Advanced modda derlenebiliyor


pedalboard.js bileşenleri


Stage
Board
Box
Footswitch
Led
Pot
FileInput
StreamInput

Reverb
Overdrive
Conv
Cabinet
Volume

Stage

Uygulama başına bir tane olur. Giriş ve çıkış düğümleri bulunur. Giriş tipini (File, Stream) ve girişi yönetir. AudioContext'i yönetir.

Board

Hafızada birden fazla olabilir ama Stage'de aynı anda ancak bir tane Board olabilir. Pedalları barındırır.


Box

Pedallar için ana sınıftır. Bütün pedallar Box sınıfından türer. Temel düğüm bağlantılarını soyutlar. Bir Toggle footswitch, bir LED ve bir ses potansiyometresi barındırır.

Input

Ses için kaynak oluşturan soyut sınıftır. FileInput ve StreamInput gibi tüm input sınıflarının ana sınıfıdır.


FileInput

Çeşitli ses dosyalarını (MP3, WAV, OGG) kaynak olarak kullanmanızı sağlar.


StreamInput

Bilgisayarınızdaki kayıt cihazlarını (mikrofon, gitar, mikser) kaynak olarak kullanmanızı sağlar. Bu sayede Amplitube ya da GarageBand gibi bir uygulama yapabilirsiniz!

Pot

Potansiyometrelerin ana sınıfıdır.


LinearPot

Lineer potansiyometreleri (B tipi) modeller. Potansiyometrenin değeri direkt olarak değiştirdiği AudioParam'a yansır.


LogPot

Logaritmik potansiyometreleri (A tipi) modeller. Değerini logaritmik olarak AudioParam'a yansıtır. Ses pot'ları ve overdrive pedallarındaki gain pot'ları logaritmiktir.

Footswitch

Pedalları açıp kapamaya (bypass) yarayan anahtarları modeller. 3PDT anahtarlar gibi çalışır.


Led

Her pedalın açık olup olmadığını gösteren bir LED bulunur. Tek başına da çalışabilir ama opsiyonel olarak Footswitch alıp onun durumunu gösterebilir.

Pedallar

Overdrive


Pedallar

Volume


Pedallar

Reverb




Pedallar

Cabinet




Örnek uygulama

    var stage = new pb.Stage();
    stage.render(document.getElementById('floor'));

    var ctx = stage.getContext();
    var board = new pb.Board(ctx);
    stage.setBoard(board);

    var overdrive = new pb.stomp.Overdrive(ctx);
    var reverb = new pb.stomp.Reverb(ctx);
    var volume = new pb.stomp.Volume(ctx);
    var cabinet = new pb.stomp.Cabinet(ctx);

    board.addPedals([overdrive, reverb, volume, cabinet]);

    overdrive.setDrive(.1);
    overdrive.setTone(.4);
    overdrive.setLevel(.6);
    volume.setLevel(1);
    reverb.setLevel(.3);



Overdrive Pedalı

pb.stomp.Overdrive = function(context) {
    goog.base(this, context);
};
goog.inherits(pb.stomp.Overdrive, pb.stomp.Box);

pb.stomp.Overdrive.prototype.modelClass = pb.stomp.OverdriveModel;

pb.stomp.Overdrive.prototype.createPots = function() {
    goog.base(this, 'createPots');
    var driveHandler = goog.bind(this.model.setDrive, this.model);
    var toneHandler = goog.bind(this.model.setTone, this.model);

    this.drivePot = new pb.pot.Log(driveHandler, 'drive', 2000);
    this.tonePot = new pb.pot.Log(toneHandler, 'tone', 3000, pb.pot.Pot.Size.SMALL);
    this.pots.push(this.drivePot, this.tonePot);
};

pb.stomp.Overdrive.prototype.setDrive = function(newValue) {
    this.drivePot.setValue(newValue);
};

pb.stomp.Overdrive.prototype.setTone = function(newValue) {
    this.tonePot.setValue(newValue);
};

pb.stomp.Overdrive.prototype.name = 'overdrive';

OverdriveModel

pb.stomp.OverdriveModel = function(context) {
    goog.base(this, context);
    this.lowPassFreq = 3000;

    this.lowPass = this.context.createBiquadFilter();
    this.lowPass.type = 0;
    this.lowPass.frequency.value = this.lowPassFreq;

    this.waveShaper = this.context.createWaveShaper();

    this.effects = [
        this.waveShaper,
        this.lowPass,
        this.level
    ];
};
goog.inherits(pb.stomp.OverdriveModel, pb.stomp.BoxModel);


OverdriveModel devamı

pb.stomp.OverdriveModel.prototype.createWSCurve = function(amount) {
    var k = amount;
    var n_samples = 22050;
    this.wsCurve = new Float32Array(n_samples);
    var deg = Math.PI / 180;
    for (var i = 0; i < n_samples; i += 1) {
        var x = i * 2 / n_samples - 1;
        this.wsCurve[i] = (3 + k) * x * 20 * deg / (Math.PI + k * Math.abs(x));
    }
    this.waveShaper.curve = this.wsCurve;
};

pb.stomp.OverdriveModel.prototype.setDrive = function(newDrive) {
    this.createWSCurve(10 * newDrive);
};


pb.stomp.OverdriveModel.prototype.setTone = function(newTone) {


    this.lowPass.frequency.value = 2000 + newTone;
};

Teşekkürler!


pedalboard.js'e katkı yapın!



İletişimde kalalım!

Armağan Amcalar
twitter: @aamcalar
github: dashersw

pedalboard.js

By Armağan Amcalar

pedalboard.js

Guitar effects in your browser

  • 6,531

More from Armağan Amcalar