⌈⌋ ⎇ branch:  Bitrhythm


Artifact Content

Check-ins Using Download Hex Html

Artifact dda4094c47195a04e7b07ff835eff16441336a2046e154ae5e52ac7eb8d99313:

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Musician's Toolkit</title>
  <script src="../dist/NexusUI.js"></script>
  <script src="js/Tone9.js"></script>
  <meta name="viewport" content="width=200, initial-scale=1">
</head>
<body style="margin:0;padding:0;">


  <div style="font-size:20px;padding:20px;text-align:center;margin-top:40px;">
    NexusUI Basic Demo
  </div>

  <button id="mobileStart">Press to Init Mobile Audio</button>

  <div id="drone" style=>
    <div style="background-color:#fff;border:solid 1px #ccc;width:200px;padding:20px;margin:0 auto;">
      <div>
        <div nexus-ui="toggle" id="power" style="width:40px;height:25px;float:left;margin:0"></div>
        <span style="height:25px;line-height:28px;margin-left:10px">Power On</span>
      </div>
      <div style="overflow:auto">
        <div style="padding:15px 0px 0px;width:200px;overflow:auto">
          <div nexus-ui="slider" id="timbre" style="width:200px;height:25px;display:inline-block;"></div>
          <div style="display:inline-block;float:left;padding:3px 0px 0px">Timbre</div>
        </div>
        <div style="padding:15px 0px 0px;width:200px;overflow:auto">
          <div nexus-ui="pan" id="pan" style="width:200px;height:25px;display:inline-block;"></div>
          <div style="display:inline-block;float:left;padding:3px 0px 0px">Pan</div>
        </div>

        <div style="padding:15px 0px 0px;width:200px;overflow:auto">
          <div nexus-ui="position" id="filter" style="width:200px;height:150px;display:inline-block;"></div>
          <div style="display:inline-block;float:left;padding:3px 0px 0px">Filter</div>
        </div>

      </div>


      <div>
        <div nexus-ui="spectrogram" id="spectrogram" style="width:240px;height:50px;margin-left:-20px;margin-bottom:-20px;"></div>
      </div>
    </div>

  </div>


<style>

body {
  font-family:helvetica;
  font-weight:300;
  background-color:#f3f3f3;
  color:#333;
}
[nexus-ui] {
  margin:0px;
}
</style>
</body>
<script>

  Nexus.context = Tone.context;

  mobileStart = document.getElementById('mobileStart')
  mobileStart.addEventListener('touchend',function() {
    var osc = Nexus.context.createOscillator()
    osc.connect(Nexus.context.destination)
    osc.start(0)
    osc.stop(0.1)
    Nexus.clock.start();
  })

  Nexus.colors.accent = "#2cc";



  drone = new Nexus.Rack('#drone');

  droneSynth = {
    fm: new Tone.FMOscillator(100, "sawtooth", "sawtooth").start(),
    fm2: new Tone.FMOscillator(112.5, "sawtooth", "sawtooth").start(),
    vol: new Tone.Volume(-Infinity),
    pan: new Tone.Panner(0),
    filter: new Tone.Filter(100, "bandpass"),
    verb: new Tone.Freeverb(),
    compressor: new Tone.Compressor(-30, 10)
  }

  droneSynth.fm.connect( droneSynth.filter )
  droneSynth.fm2.connect( droneSynth.filter );
  droneSynth.filter.chain( droneSynth.compressor, droneSynth.vol, droneSynth.pan, droneSynth.verb, Tone.Master)


  droneSynth.fm.harmonicity.value = 4
  droneSynth.fm2.harmonicity.value = 4


  drone.power.on('change',function(v) {
    if (v) {
      droneSynth.vol.volume.rampTo(-20,1)
    } else {
      droneSynth.vol.volume.rampTo(-Infinity,1)
    }
  })

  drone.timbre.min = 10
  drone.timbre.max = 20
  drone.timbre.on('change',function(v) {
    droneSynth.fm.modulationIndex.rampTo(v,0.1)
    droneSynth.fm2.modulationIndex.rampTo(v,0.1)
  })
  drone.timbre.value = 0


  drone.pan.on('change',function(v) {
    droneSynth.pan.pan.value = v.value;
  })



  drone.filter.minX = 0
  drone.filter.maxX = 1400
  drone.filter.minY = 0
  drone.filter.maxY = 10

  drone.filter.on('change',function(v) {
    droneSynth.filter.frequency.value = v.x;
    droneSynth.filter.Q.value = v.y;
  })



    droneSynth.verb.wet.value = 0.2


    drone.spectrogram.connect(Tone.Master);
    drone.spectrogram.colorize("fill","#fff")
    drone.spectrogram.colorize("accent","#2cc")



</script>
</html>