Visual js - Sound

You can draw any native js canvas2d example in visual-js.

by Nikola Lukic

HTML

<script src="https://maximumroulette.com/visual-js/manifest/manifest_jsfiddle.js"></script>
<script src="https://maximumroulette.com/visual-js/lib/build.js"></script>
<body style="margin:0;padding:0;border:none;background-color:black;">

  <input id="volume" type="range" min="0" max="1" step="0.1" value="0.5"/>

<div id="RTC_HELP" style="display:none;height: 400px;overflow: auto;overflow-x: hidden;    padding-left: 50px;" ></div>

<div id="UPLOAD_BOX" style="display:block" >
</div>
<div id="experiment" style="display:block" >
<video id="webcam" autoplay width="640" height="480" style="display:none;position:absolute;left:0;top:0;"></video>
<canvas id="canvas-blended" width="640" height="480" style="position:absolute;left:0;top:0;display:none;"></canvas>
<canvas id="canvas-render" width="640" height="480" style="position:absolute;left:0;top:0;display:none;"></canvas>
</div>
<canvas tabindex='1' width="1" height="1" id="HELLO_WORLD"></canvas>
<div style="display:block;"> 

<!--audio controls id="audio_ambient"  >
<source src="http://radio.nessradio.net:8000/nessradio.mp3" type="audio/mpeg">
<source src="http://radio.nessradio.net:8000/nessradio.ogg" type="audio/ogg">
</audio-->
</div>


</body>

JavaScript

window.START = function(){

SYS.DOM.CREATE_SURFACE( "SURF" , "HELLO_WORLD" , 100 , 99.4 , "DIAMETRIC" );


//NOW HELLO_WORLD IS OBJECT WITH ONE CANVAS TAG
HELLO_WORLD.ENGINE.CREATE_MODUL("STARTER");
var SMODULE = HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER"); 
 
SMODULE.NEW_OBJECT("TESLA" , 45 , 35 , 20 , 10 , 10);
TESLA.TYPE_OF_GAME_OBJECT = 'CUSTOM';

var CHANNELS = 120;
TESLA.SOUND = {};
 
HELLO_WORLD.MAP.CLEAR_MAP = true;
var COUNT = 0
 
TESLA.CUSTOM = function (s) {
 
 SURF.fillStyle = 'rgba(111 ,222 ,22 , 1)';
 
 for (var d = 0; d < CHANNELS;d++){
	
 SURF.fillRect( 50 + 10 * d , 120 , 3 , 5 + TESLA.SOUND['amp' + d])
   
  SURF.strokeStyle = 'rgba('+40+ TESLA.SOUND['amp' + d]+' ,'+11+TESLA.SOUND['amp' + d]+' ,'+1+TESLA.SOUND['amp' + d]+' , 0.8)';
  SURF.beginPath();
  SURF.arc(500, 300, 1 +  TESLA.SOUND['amp' + d], 0, 2 * Math.PI);
  SURF.stroke();
   
 SURF.fillRect( 50 + 10 * d , 500 , 3 , 5 - TESLA.SOUND['amp' + d])
   
	 
 }
// SURF.fill();
  
  SURF.rotate(90);

  
 
 //SURF.fill();
  
  
COUNT++

};
 
//////////////////////////////////////
// TEST
//////////////////////////////////////

 var audioInput = function (channels) {

    var root = this;

	root.channels = channels;
	
    var audioContext = new AudioContext();
    console.log("audio is starting up ...");
    var BUFF_SIZE = 16384;
    var audioInput = null,
        micStream = null,
        gain_node = null,
        script_processor_node = null,
        script_processor_fft_node = null,
        analyserNode = null;

    if (!navigator.getUserMedia)
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;

    if (navigator.getUserMedia){
        navigator.getUserMedia({audio:true}, 
          function(stream) {
              start_microphone(stream);
          },
          function(e) {
            console.log('Error :' + e);
          }
        );

    } else {...