DrSaX.js

Web Audio library for Saxophone in JavaScript

Get Started Download
CDN => http://drsax.github.io/drsaxCore/js/drsax.js
Today is

Sound effects


Simplification and getting fast

Easier to connect

Synthesizer


Make your sound and better

Easy to make

Sound analysis


Create novel framworks

Easy to use

What is DrSax.js?

DrSax.js is a modern Web Audio framework with Smaller and faster than other Web Audio frameworks. Easier to learn, and easier to use than other Web Audio frameworks. Speeds up and simplifies web development. Provides equality for all Chrome Provides equality for all devices. PC, laptop, tablet, and mobile:

DrSax.js is free to creat and use. No license is necessary.

How To use

To use DrSax.js in your web applications, download DrSax.js from downloads and just add a script to "DrSax.js" in script tag from your web pages

Download DrSax.JS

Download the latest version

DrSax.js setting

  <script src="drsax.js" > </script> 

Web Audio library for Saxophone in JavaScript.

"DSX" Setting

Declare "var DSX = new DSX" on the top

 <script>

var DSX = new DSX; //  declare on the top, ablove all "DSX"
  var gain = new DSX.Amp({gain: 0.5});
  var adsr = new DSX.ATRS();
  var ampgain = new DSX.valueChange("knob2", gain.gain);
.
.
 </script>

* AudioContext is set "drsax". ex( osc = drsax.createOscillator();)

DrSax.JS version history

Drsax.js vesion Specification
Drsax.1.6.1.0.js add delay property
Drsax.1.6.1.1.js add reverb property

Oscillator


DrSaX.js Oscillator

DSX.Osc : Make a sound oscillator

Object Property Method()
DSX.Osc("Oscillator","frequency") Osc.frequency.vlaue Osc.connect()
Osc.wave.type Osc.start();
Osc.detune.vlaue Osc.stop();

frequency range : 0 to 20000Hz( you can not hear over 20000Hz commonly.)

wave(Oscillator)type :"sine","sawtooth", "square","triangle"

DSX.Osc example code

  var osc = new DSX.Osc({type:"sawtooth",freq: 700});
  [oscillator type is "sawtooth" and frequency is 700Hz]

  var gain = new DSX.Amp({ gain: 0.1});
  [ampulitude gain is "0.1"]

  osc.connect(gain);  [osc connect to gain]

  gain.connect(DAC);  [gain connect to main out]

  osc.start();
      
Feel free to Try demo demo

DrSaX.js Amplitude


DrSaX.js Amplitude

DSX.Amp : Make a Amplitude

Object Property Method()
DSX.Amp(gain:"value") Amp.gain.value Amp.connect()

gain range : 0 to 1. absolutely!

DSX.Amp example code

  var osc = new DSX.Osc({type:"sawtooth",freq: 700});
  [oscillator type is "sawtooth" and frequency is 700Hz]

  var gain = new DSX.Amp({ gain: 0.1});
  [ampulitude gain is "0.1"]

  osc.connect(gain);  [osc connect to gain]

  gain.connect(DAC);  [gain connect to main out]

  osc.start();
      
Feel free to Try demo

Attack and Release


DrSaX.js Attack and Release

DSX.ATRS : Make a Attack and Release

Object Property Method()
DSX.ATRS() ATRS.attack.value ATRS.soundfrom("sound");
ATRS.release.value ATRS.connect()

attack range : 0 to 1.

release value :0 to 1.

DSX.ATRS example code

 var adsr = new DSX.ATRS();

        osc.start();
        adsr.soundfrom(osc);
        adsr.connect(gain);
        gain.connect(DAC);


      
Feel free to Try demo

Stereo Panning


DrSaX.js Stereo Panning

DSX.stereoPan : Make a Panning

Object Property Method()
DSX.stereoPan(pan:"value") stereoPan.pan.value stereoPan.connect()

pan range : -1 to 1. absolutely!

DSX.stereoPan example code

var gain = new DSX.Amp({gain: 0.5});
var osc = new DSX.Osc({type:"sawtooth",freq: 500});
var stereoPan = new DSX.stereoPan({ pan: -1,});
var osc_pan =new DSX.valueChange("pan",stereoPan.pan);

        osc.connect(gain);
        gain.connect(stereoPan);
        stereoPan.connect(DAC);
      
Feel free to Try demo demo

Reverb


DrSaX.js Reverb

DSX.Reverb : Make a Reverb

Object Property Method()
DSX.Reverb({gain:"value"}); Reverb.gain.value Reverb.connect()

gain range : 0 to 1. absolutely!

DSX.Reverb example code


   var DSX = new DSX;
   var osc = new DSX.Osc({type:"sawtooth",freq: 0});
   var gain = new DSX.Amp({gain: 0.5});
   var saxReverb =new DSX.Reverb({gain:0.6});
        osc.connect(gain);
        saxReverb.getfrom(gain);
        saxReverb.connect(DAC);
      
Feel free to Try demo demo

Delay


DrSaX.js Delay

DSX.Delay : Make a Delay

Object Property Method()
DSX.Delay({ delayTime:"value",feedback: "value", }); Delay.delayTime.value Delay.connect()
Delay.feedback.value

delayTime range : 0 to 1.   feedback range : 0 to 1. absolutely!

DSX.Delay example code

var gain = new DSX.Amp({gain: 0.5});
var osc = new DSX.Osc({type:"sawtooth",freq: 500});
var Delay = new DSX.Delay({ delayTime : 200, feedback: 0.45, });

        osc.connect(gain);
        gain.connect(Delay);
        Delay.connect(DAC);
      
Feel free to Try demo demo

FM synthesizer


DrSaX.js FM synthesizer

DSX.FM : Make a FM synthesizer

Object Property Method()
DSX.FM({carrier_type:"type",carrier:"value",mod_type :"type",modfreq:"vlaue",depth:"vlaue",gain:"vlaue"}); FM.carrier_type FM.connect()
FM.carrier.value
FM.mod_type
FM.modfreq.value
FM.depth.value
FM.gain.value

FM synthesizer

DSX.FM example code


var fm = new  DSX.FM({carrier_type:"sine",carrier:500,mod_type :"sine",modfreq:700,depth:1800,gain:0.5});
var sax_fm1 =new DSX.valueChange("fm1",fm.carrier);
var sax_fm2 =new DSX.valueChange("fm2",fm.modfreq);
var sax_fm3 =new DSX.valueChange("fm3",fm.depth);
var sax_fm4 =new DSX.valueChange("fm4",fm.gain);

fm.connect(gain)
gain.connect(DAC)

fm.stop();



      
Feel free to Try demo demo

AM synthesizer


DrSaX.js AM synthesizer

DSX.AM : Make a AM synthesizer

Object Property Method()
DSX.AM({mod_type :"type",modfreq:"value", depth:"value",gain:"value"}); AM.mod_type AM.connect()
AM.modfreq.value
AM.depth.value
AM.gain.value

AM synthesizer

DSX.AM example code

var osc = new DSX.Osc({type:"sine",freq:700});
var am = new  DSX.AM({mod_type :"sine",modfreq:200,depth:0.5,gain:0.5});
var sax_am1 =new DSX.valueChange("am1",osc.freq);
var sax_am2 =new DSX.valueChange("am2",am.modfreq);
var sax_am3 =new DSX.valueChange("am3",am.depth);
var sax_am4 =new DSX.valueChange("am4",am.gain);

am.get(osc)
am.connect(gain)
gain.connect(DAC)
osc.start();


am.stop();



      
Feel free to Try demo demo

subtractive synthesizer


DrSaX.js subtractive synthesizer

DSX.Subtract : Make a subtractive synthesizer

Object Property Method()
DSX.Subtract({cutoff:"value", resonance:"value", gain:"value"}); Subtract.cutoff.vlaue Subtract.connect()
Subtract.resonance.vlaue
Subtract.gain.vlaue

Subtract

DSX.Subtract example code

 var sub = new DSX.Subtract({cutoff:1230, resonance:0, gain:0.8});
var sax_EQ1 =new DSX.valueChange("EQ1",osc.freq);
var sax_EQ2 =new DSX.valueChange("EQ2",sub.cutoff);
var sax_EQ3 =new DSX.valueChange("EQ3",sub.resonance);
var sax_EQ4 =new DSX.valueChange("EQ4",sub.gain);

osc.connect(sub)
sub.connect(gain)
gain.connect(DAC)
osc.start();


      
Feel free to Try demo demo

eq


DrSaX.js Equlizer

DSX.EQ : Make a sound Equlizer

Object Property Method()
DSX.EQ({hiGain:"value", mhiGain:"value", miGain:"value", milowGain:"value", lowGain:"value"}); EQ.hiGain.vlaue EQ.connect()
EQ.mhiGain.value
EQ.miGain.value
EQ.milowGain.value
EQ.lowGain.value

EQ gain range : -20 to 20

DSX.Osc example code

 var DSX = new DSX;
var gain = new DSX.Amp({gain: 0.5});
var file =new DSX.BGdata("https://drsax.github.io/DrSAX/examples/life.mp3");

var newEQ = new  DSX.EQ({hiGain:-10, mhiGain:-10, miGain:-10,
                             milowGain:-10, lowGain:-10});

var sax_EQ1 =new DSX.valueChange("EQ5",newEQ.hiGain);
var sax_EQ2 =new DSX.valueChange("EQ4",newEQ.mhiGain);
var sax_EQ3 =new DSX.valueChange("EQ3",newEQ.miGain);
var sax_EQ4 =new DSX.valueChange("EQ2",newEQ.milowGain);
var sax_EQ5 =new DSX.valueChange("EQ1",newEQ.lowGain);

var play = document.querySelector('.play');
var stop = document.querySelector('.stop');
play.onclick = function() {

file.connect(newEQ)
newEQ.connect(gain)
gain.connect(DAC)

file.start();
}
stop.onclick = function() {

file.stop();
}

      
Feel free to Try demo demo

sound file player


DrSaX.js sound file player

DSX.musicPlayer : Make a sound file controler

Object Property Method()
DSX.musicPlayer() playing.load("input tag id","audio tag id");

sound file upload

DSX.BGdata example code


<input type="file" id="upload">
<audio id="sound" controls ></audio>

var playing =new DSX.musicPlayer();
playing.load("upload","sound");
      
Feel free to Try s demo

sound file uploader


DrSaX.js sound file uploader

DSX.BGsound : Make a sound file uploader

Object Property Method()
DSX.BGsound("input tag id"); BGsound.connect()
BGsound.stop()

speed range : 0 to 2.

DSX.BGdata example code

<input id="inputS" type="file" accept="audio/*">

var DSX = new DSX;
var gain = new DSX.Amp({gain: 0.5});
var file_upload =new DSX.BGsound('inputS');
var st =new DSX.valueChange("gain",gain.gain);

var play = document.querySelector('.play');
var stop = document.querySelector('.stop');
play.onclick = function(){

file_upload.connect(gain)
gain.connect(DAC)
                          }

stop.onclick = function(){
file_upload.stop();
                         }
      
Feel free to Try demo

sound


DrSaX.js Sound file and speed control

DSX.BGdata : Make a sound file controler

Object Property Method()
DSX.BGdata("URL:File Location"); BGdata.speed.value BGdata.start()
BGdata.stop()
BGdata.connect()

speed range : 0 to 2.

DSX.BGdata example code

var DSX = new DSX;
var gain = new DSX.Amp({gain: 0.5});
var file =new DSX.BGdata("https://drsax.github.io/DrSAX/examples/life.mp3");
var sound_speed = new DSX.valueChange("speed",file.speed);
var play = document.querySelector('.play');
var stop = document.querySelector('.stop');
play.onclick = function() {
file.connect(DAC)
file.start();
}
stop.onclick = function() {

file.stop();
}


      
Feel free to Try demo

Mic Input


DrSaX.js Mic Input

DSX.Mic : Mic Input

Object Property Method()
DSX.Mic(); Mic.connect()

Mic is ONLY possible in HTTPS, Absolutely!

DSX.Mic example code

    var DSX = new DSX;
    var gain = new DSX.Amp({gain: 0.5});
    var saxInput = new DSX.Mic();

      saxInput.connect(gain);
      gain.connect(DAC);

      
Feel free to Try demo

Mic Tunner


DrSaX.js Mic Tunner

DSX.Tunner : Mic Tunner

Object Property Method()
DSX.Tunner("Span id","Span id"); Tunner.getAnalyser()

Tunner is ONLY possible in HTTPS, Absolutely!

DSX.Tunner example code

    var DSX = new DSX;
    var gain = new DSX.Amp({gain: 0.5});
    var saxInput = new DSX.Mic();
     var tune = new DSX.Tunner("pitch","note");

      saxInput.connect(gain);
      tune.getAnalyser(saxInput);
      gain.connect(DAC);

      
Feel free to Try demo

Dynamic Compressor


DrSaX.js Dynamic Compressor

DSX.saxComp :Dynamic Compressor

Object Property Method()
DSX.saxComp({threshold:"value",reduction:"value", knee:"value",ratio:"value:,attack:"value",release:"value"} ); saxComp.threshold.value saxComp.connect()
saxComp.reduction.value
saxComp.knee.value
saxComp.ratio.value
saxComp.attack.value
saxComp.release.value

threshold range : -100 to 0.   reduction range : -40 to 0. absolutely!

knee range : 0 to 40.   ratio range : 0 to 12. absolutely!

attack range : 0 to 1.   release range : 0 to 1. absolutely!

DSX.saxComp example code

var DSX = new DSX;

var saxComp = new DSX.saxComp({ threshold: -70,  ratio: 12, });
var sax_Comp1 =new DSX.valueChange("Comp1",saxComp.threshold);
var sax_Comp2 =new DSX.valueChange("Comp2",saxComp.reduction);
var sax_Comp3 =new DSX.valueChange("Comp3",saxComp.knee);
var sax_Comp4 =new DSX.valueChange("Comp4",saxComp.ratio);
var sax_Comp5 =new DSX.valueChange("Comp5",saxComp.attack);
var sax_Comp6 =new DSX.valueChange("Comp6",saxComp.release);

file.connect(saxComp)
saxComp.connect(gain)
gain.connect(DAC)
      
Feel free to Try demo demo

sound visualization : frequency domain


DrSaX.js sound visualization : frequency domain

DSX.freqDomain : frequency domain

Object Property Method()
DSX.freqDomain('canvas tag id', " bar color"); freqDomain.getAnalyser(soundsouce)

Mic is ONLY possible in HTTPS, Absolutely!

DSX.freqDomain example code

    var DSX = new DSX;
    var gain = new DSX.Amp({gain: 0.5});
    var saxInput = new DSX.Mic();
    var frequrncy_canvas = new DSX.freqDomain('canv', 'red');
        frequrncy_canvas.getAnalyser(gain);

        saxInput.connect(gain);
        gain.connect(DAC);

      
Feel free to Try demo demo

sound visualization : amplitude domain


DrSaX.js sound visualization : amplitude domain

DSX.ampDomain : amplitude domain

Object Property Method()
DSX.ampDomain('canvas tag id'," bar color", "width","height"); ampDomain.getAnalyser()
ampDomain.cutAnalyser()

"width","height" shoud set the same canvas tag Absolutely!

DSX.ampDomain example code


<canvas id="canv" ></canvas>
    var DSX = new DSX;
    var gain = new DSX.Amp({gain: 0.5});
    var saxInput = new DSX.Mic();
    var amp_gain = new DSX.valueChange("knob2", gain.gain);

    var amp_canvas = new DSX.ampDomain('canv', "red",200,100);
    amp_canvas.getAnalyser(gain);

      saxInput.connect(gain);
      gain.connect(DAC);

     amp_canvas.cutAnalyser(gain)
      
Feel free to Try demo demo

data control


DrSaX.js data control

DSX.valueChange : Make a data control system

Object Property Method()
DSX.valueChange("input tag id","changing properties");

"changing properties" is like 'osc.frequency' except 'value'

DSX.valueChange example code


<webaudio-knob id="knob1" value="0" max="2000" step="1"></webaudio-knob>

<webaudio-knob id="knob2" value="0" max="1" step="0.001"></webaudio-knob>

      var oscfrequency = new DSX.valueChange("knob1", osc.frequency);
      var ampgain = new DSX.valueChange("knob2", gain.gain);
      
Feel free to Try demo

data function control


DrSaX.js data function control

DSX.functionChange : data function control

Object Property Method()
DSX.functionChange('input tag id','function name');

DSX.functionChange control data with function

DSX.functionChange example code



<webaudio-switch id="switch1" value="0" max="1" ></webaudio-switch>

    var sound_on_off = new DSX.functionChange("switch1",swit);
    function swit(e) {
        if (e.target.value == "1") {
            saxInput.connect(gain);
            gain.connect(DAC);
      amp_canvas.getAnalyser(gain);


        }

        if (e.target.value == "0") {
            gain.disconnect();
    amp_canvas.cutAnalyser(gain);

        }
    }

      
Feel free to Try demo

data toggle control


DrSaX.js data toggle control

DSX.valueToggle : data toggle control

Object Property Method()
DSX.valueToggle('input tag id','function name');

DSX.valueToggle control data with function

DSX.valueToggle example code



    <button id="play_audio">Play</button>
    <button id="stop_audio">Stop</button>


var playing =new DSX.valueToggle('play_audio',play);

function play(){

file_upload.connect(gain)
gain.connect(DAC)

                }
var play_new =new DSX.valueToggle('stop_audio',stop);

function stop(){

file_upload.stop();

                }

      
Feel free to Try demo

contact


Euyshick Hong


Avatar

Euy Shick Hong

http://drsax.kr   antaresax@gmail.com