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
1.3.0
1.4.0
1.4.1
1.4.2
1.4.3
1.5.0
1.5.1
1.5.2
1.5.3
1.5.4
1.6.0
1.6.1
1.7.0
1.7.1
1.8.0
1.8.1
1.8.2
1.8.3
1.9.0
1.9.1
1.9.2
1.9.4
2.0.0
2.0.1
2.0.2
3.0.0
3.1.0
3.10.1
3.11.0
3.12.1
3.14.1
3.15.0
3.15.1
3.2.0
3.2.1
3.3.0
3.3.1
3.3.2
3.4.0
3.4.1
3.4.2
3.4.3
3.4.4
3.4.5
3.4.6
3.5.0
3.5.1
3.5.2
3.5.3
3.6.0
3.6.1
3.7.0
3.8.0
3.9.0
3.9.1
4.0.0
4.0.0-alpha
4.0.1
4.0.2
4.0.3
4.1.0
4.1.1
5.0.0
5.0.0-alpha.0
5.0.0-alpha.1
5.0.0-alpha.2
5.0.1
*** 5.0.2