scottwwh/gist:4159188

## gistfile1.txt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Audio Draw</title>

    <style type="text/css" media="screen">

        body { color: #fff; background-color: #111; text-align: center; }

        button { font-size: 2em; }

    </style>
</head>
<body>


<h1>Audio thinger</h1>


<canvas id="draw" width="1024" height="384" style="background-color: #000;"></canvas>

<br />
<button onclick="generateSound();">Play sound</button>

<script type="text/javascript">

    window.addEventListener('load', init, false);


    var canvas, context = null;


    var ctx, audio = null;
    var SAMPLE_RATE = 44100;
    var PI_2 = Math.PI * 2;


	function init()
    {
		try
        {
            canvas = document.getElementById( 'draw' );
            context = canvas.getContext( '2d' );

            document.getElementById( 'draw' ).addEventListener( 'mousemove', draw, false )
            document.addEventListener( 'mousedown', mouseHandler, false )
            document.addEventListener( 'mouseup', mouseHandler, false )


            if (! window.AudioContext) {
                if (! window.webkitAudioContext) {
                    bad_browser();
                    return;
                }
                window.AudioContext = window.webkitAudioContext;
            }

            // var ctx = new AudioContext();
            ctx = new AudioContext();
            // audio = new webkitAudioContext();


            /*
            var FLOAT_SAMPLES = 512;
            var buffer = ctx.createBuffer( 1, FLOAT_SAMPLES, 44100 );
            var buf = buffer.getChannelData(0);

            for (i = 0; i < FLOAT_SAMPLES; ++i) {
                // buf[i] = Math.sin(440 * PI_2 * i / SAMPLE_RATE);
                buf[i] = Math.sin( 440 * PI_2 * i / SAMPLE_RATE);
            }


            var node = ctx.createBufferSource(0);
            node.buffer = buffer;
            node.connect(ctx.destination);
            node.noteOn(ctx.currentTime + 0.1);

            var node = ctx.createBufferSource(0);
            node.buffer = buffer;
            node.connect(ctx.destination);
            node.noteOn(ctx.currentTime + 0.3);
            */


		}
		catch(e) {
			alert('Web Audio API is not supported in this browser');
		}
	}

    var mousedown = false;

    function mouseHandler( e )
    {
        if ( e.type == 'mousedown' )
        {
            mousedown = true;
        }
        else
        {
            mousedown = false;
        }

        // console.log( mousedown );
    }

    function draw( e )
    {
        if ( ! mousedown ) return ;

        var pt = new Point( e.offsetX, e.offsetY );

        var res = 64;
        var w = canvas.width / res;
        var h = canvas.height / res;


        var x = Math.floor( pt.x / canvas.width * w );
        var y = Math.floor( pt.y / canvas.height * h );
        // console.log( x, y );


        context.fillStyle = "rgba( 0, 255, 0, 0.1 )";
        context.fillRect( x * res, y * res, res, res );
    }

    function generateSound()
    {
        var FLOAT_SAMPLES = 22050;
        // var buffer = ctx.createBuffer( 1, FLOAT_SAMPLES, 44100 );
        buffer = ctx.createBuffer( 1, FLOAT_SAMPLES, 44100 );
        var buf = buffer.getChannelData(0);

        for (i = 0; i < FLOAT_SAMPLES; ++i) {
            // buf[i] = Math.sin(440 * PI_2 * i / SAMPLE_RATE);
            // buf[i] = Math.sin( 440 * PI_2 * i / SAMPLE_RATE );
            buf[i] = Math.sin( 400 * PI_2 * i / SAMPLE_RATE );
        }


        // playSound();
        setTimeout( playSound, 500 );
    }

    var buffer;

    function playSound()
    {
        console.log( 'Play' );


        var node = ctx.createBufferSource(0);
        node.buffer = buffer;
        node.connect(ctx.destination);
        node.noteOn(ctx.currentTime + 0);


        /*
        var node = ctx.createBufferSource(0);
        node.buffer = buffer;
        node.connect(ctx.destination);
        node.noteOn(ctx.currentTime + 0.1);
        */
    }

    function Point( x, y )
    {
        this.x = x || 0;
        this.y = y || 0;

        return this;
    }

</script>


</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title>Audio Draw</title>

	<style type="text/css" media="screen">

	body { color: #fff; background-color: #111; text-align: center; }

	button { font-size: 2em; }

	</style>
	</head>
	<body>


	<h1>Audio thinger</h1>


	<canvas id="draw" width="1024" height="384" style="background-color: #000;"></canvas>

	<br />
	<button onclick="generateSound();">Play sound</button>

	<script type="text/javascript">

	window.addEventListener('load', init, false);


	var canvas, context = null;


	var ctx, audio = null;
	var SAMPLE_RATE = 44100;
	var PI_2 = Math.PI * 2;


	function init()
	{
	try
	{
	canvas = document.getElementById( 'draw' );
	context = canvas.getContext( '2d' );

	document.getElementById( 'draw' ).addEventListener( 'mousemove', draw, false )
	document.addEventListener( 'mousedown', mouseHandler, false )
	document.addEventListener( 'mouseup', mouseHandler, false )



	if (! window.AudioContext) {
	if (! window.webkitAudioContext) {
	bad_browser();
	return;
	}
	window.AudioContext = window.webkitAudioContext;
	}

	// var ctx = new AudioContext();
	ctx = new AudioContext();
	// audio = new webkitAudioContext();



	/*
	var FLOAT_SAMPLES = 512;
	var buffer = ctx.createBuffer( 1, FLOAT_SAMPLES, 44100 );
	var buf = buffer.getChannelData(0);

	for (i = 0; i < FLOAT_SAMPLES; ++i) {
	// buf[i] = Math.sin(440 * PI_2 * i / SAMPLE_RATE);
	buf[i] = Math.sin( 440 * PI_2 * i / SAMPLE_RATE);
	}


	var node = ctx.createBufferSource(0);
	node.buffer = buffer;
	node.connect(ctx.destination);
	node.noteOn(ctx.currentTime + 0.1);

	var node = ctx.createBufferSource(0);
	node.buffer = buffer;
	node.connect(ctx.destination);
	node.noteOn(ctx.currentTime + 0.3);
	*/





	}
	catch(e) {
	alert('Web Audio API is not supported in this browser');
	}
	}

	var mousedown = false;

	function mouseHandler( e )
	{
	if ( e.type == 'mousedown' )
	{
	mousedown = true;
	}
	else
	{
	mousedown = false;
	}

	// console.log( mousedown );
	}

	function draw( e )
	{
	if ( ! mousedown ) return ;

	var pt = new Point( e.offsetX, e.offsetY );

	var res = 64;
	var w = canvas.width / res;
	var h = canvas.height / res;


	var x = Math.floor( pt.x / canvas.width * w );
	var y = Math.floor( pt.y / canvas.height * h );
	// console.log( x, y );


	context.fillStyle = "rgba( 0, 255, 0, 0.1 )";
	context.fillRect( x * res, y * res, res, res );
	}

	function generateSound()
	{
	var FLOAT_SAMPLES = 22050;
	// var buffer = ctx.createBuffer( 1, FLOAT_SAMPLES, 44100 );
	buffer = ctx.createBuffer( 1, FLOAT_SAMPLES, 44100 );
	var buf = buffer.getChannelData(0);

	for (i = 0; i < FLOAT_SAMPLES; ++i) {
	// buf[i] = Math.sin(440 * PI_2 * i / SAMPLE_RATE);
	// buf[i] = Math.sin( 440 * PI_2 * i / SAMPLE_RATE );
	buf[i] = Math.sin( 400 * PI_2 * i / SAMPLE_RATE );
	}




	// playSound();
	setTimeout( playSound, 500 );
	}

	var buffer;

	function playSound()
	{
	console.log( 'Play' );


	var node = ctx.createBufferSource(0);
	node.buffer = buffer;
	node.connect(ctx.destination);
	node.noteOn(ctx.currentTime + 0);


	/*
	var node = ctx.createBufferSource(0);
	node.buffer = buffer;
	node.connect(ctx.destination);
	node.noteOn(ctx.currentTime + 0.1);
	*/
	}

	function Point( x, y )
	{
	this.x = x \|\| 0;
	this.y = y \|\| 0;

	return this;
	}

	</script>


	</body>
	</html>