Sound

by sirfizx

HTML

<body onload="init()">
    <canvas id="can" height="300" width="500">
    </canvas>
    <br />
    <audio src="" id="audio" controls></audio>
    <img id="flake" src="flake.png" style="display:none" />
</body>

CSS

canvas {
            position: absolute;
            top: 10px;
            left: 10px;
            border-radius: 25px;
        }
        audio {
            position: absolute;
            top: 307px;
            left: 160px;
        }

JavaScript

var can, ctx, flake,
            x = [], y = [], xIncr = [], yIncr = [];
            rot = 0, grad, rainbow, audio;
 
        function init() {
            flake = document.getElementById("flake");
            audio = document.getElementById("audio");
            can = document.getElementById("can");
            ctx = can.getContext("2d");
            // create blue background gradient
            grad = ctx.createLinearGradient(0, can.height, 0, 0);
            grad.addColorStop(0, 'rgb(20,20,128)');
            grad.addColorStop(1, 'rgb(140,140,255)');
            // create rainbow gradient for letters
            rainbow = ctx.createLinearGradient(20, 0, can.width - 20, 0);
            rainbow.addColorStop(0, 'red');
            rainbow.addColorStop(1 / 6, 'orange');
            rainbow.addColorStop(2 / 6, 'yellow');
            rainbow.addColorStop(3 / 6, 'green');
            rainbow.addColorStop(4 / 6, 'aqua');
            rainbow.addColorStop(5 / 6, 'blue');
            rainbow.addColorStop(6 / 6, 'purple');
            // set font properties
            ctx.font = "140pt Papyrus bold italic";
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";
            // create snowflakes above screen
            // drifting slowly down and randomly left or right
            for (i = 1; i <= 16; i++) {
                x[i] = Math.random() * can.width;
                y[i] = Math.random() * can.height / -2;
                yIncr[i] = Math.max(Math.random() * .4, 0.15);
                xIncr[i] = Math.random() * 0.3 - 0.15;
            }
            // add listener function to loop on end
            audio.addEventListener("ended", loop, false);
            // set animation on perpetual loop
            setInterval(animate, 30);
        }
 
        function loop() {
            audio.play();
        }
 
        function animate() {
            model();
            draw();
        }
 
        function model() {
                // increment...