Get started with scribbletune CDN

MIT licensed

ScribbleTune is a library for creating interactive, music-driven animations.

Tags:
  • music
  • javascript
  • webaudioapi
  • tonejs
  • scribbletune
  • midi
  • audio
  • synth

Stable version

Copied!

How to start using scribbletune CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with scribbletune CDN - cdnhub.io</title>
    <style>
        #canvas {
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="https://cdn.cdnhub.io/scribbletune/5.0.2/scribbletune.js"></script>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const width = canvas.width;
        const height = canvas.height;

        ScribbleTune.load({
            canvas,
            width,
            height,
            onload: () => {
                const synth = new Tone.Synth().toMaster();
                const player = new Tone.Player('C4', '4n').toMaster();

                ScribbleTune.setSynth(synth);
                ScribbleTune.setPlayer(player);

                const draw = () => {
                    ctx.clearRect(0, 0, width, height);
                    ScribbleTune.draw(ctx);
                    requestAnimationFrame(draw);
                };

                draw();

                const playNote = () => {
                    player.start();
                };

                const stopNote = () => {
                    player.stop();
                };

                document.addEventListener('keydown', playNote);
                document.addEventListener('keyup', stopNote);
            }
        });
    </script>
</body>
</html>
Copied!
Copied!

All versions