This repository has been archived by the owner on Aug 31, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 75
/
arpeggio-demo.html
95 lines (81 loc) · 5.25 KB
/
arpeggio-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
<head>
<title>SoundBox arpeggio demo</title>
<style type="text/css">
body {
font-family: arial, sans-serif;
background: #000;
color: #fff;
}
</style>
<script type="text/javascript" src="player-small.js"></script>
<script type="text/javascript" src="third_party/Blob.js"></script>
<script type="text/javascript">
function startDemo() {
//----------------------------------------------------------------------------
// Music data section
//----------------------------------------------------------------------------
// Song data
var song={songData:[{i:[2,255,128,0,1,154,116,9,0,0,15,4,49,0,0,0,84,4,1,2,53,25,7,32,39,3,45,4],p:[1,11,2,3,4,10,5,6,12],c:[{n:[142,,145,149,,142,145,,149,142,,149,142,,145,149,,142,145,,149,142,,149,130,,,,,118,,,,,,,130,,,,,130],f:[13,,,,,,,,,,,,,,,,,,,,,,,,40]},{n:[137,,140,144,,137,140,,144,137,,144,137,,140,144,,137,140,,144,137,,144,125,,,,,113,,,,,,,125,,,,,125],f:[]},{n:[144,,147,151,,144,147,,151,144,,151,144,,147,151,,144,147,,151,144,,151,132,,,,,120,,,,,,,132,,,,,132],f:[]},{n:[142,,145,149,,142,145,,149,142,,149,142,,145,149,,142,145,,149,142,,149,130,,,118,,118,130,,,118,,118,130,,,118,,118,130,,,118,,118],f:[13,,,,,,,,,,,,,,,,,,,,,,,,49]},{n:[137,,140,144,,137,140,,144,137,,144,137,,140,144,,137,140,,144,137,,144,125,,,113,,113,125,,,113,,113,125,,,113,,113,125,,,113,,113],f:[]},{n:[144,,147,151,,144,147,,151,144,,151,144,,147,151,,144,147,,151,144,,151,132,,,120,,120,132,,,120,,120,132,,,120,,120,132,,,120,,120],f:[]},{n:[],f:[]},{n:[],f:[]},{n:[],f:[]},{n:[142,,144,149,,142,144,,149,142,,149,142,,144,149,,142,144,,149,142,,149,130,,,118,,118,130,,,118,,118,130,,,118,,118,130,,,118,,118],f:[]},{n:[142,,144,149,,142,144,,149,142,,149,142,,144,149,,142,144,,149,142,,149,130,,,,,118,,,,,,,130,,,,,130],f:[]},{n:[130],f:[]}]},{i:[0,255,123,1,3,156,118,7,1,7,4,6,37,0,0,0,0,0,0,2,26,66,1,39,0,0,0,0],p:[1,1,1,1,1,1,1,1,2,3],c:[{n:[135,,,,,,135,,,,,,135,,,,,,135],f:[]},{n:[135],f:[]},{n:[],f:[]}]},{i:[0,221,128,1,3,210,128,0,1,127,0,0,105,0,0,3,77,3,1,3,57,174,1,71,20,0,75,2],p:[,,,,1,1,1,2,3],c:[{n:[,,,135,,,,,135,,,135,,,,135,,,,,135,,,135],f:[13,,,,,,,,,,,,,,,,,,,,,,,,53]},{n:[,,,135,,,,,135,,,135,,,,135,,,,135,,,135,135],f:[]},{n:[139],f:[13,,,,,,,,,,,,,,,,,,,,,,,,105]}]},{i:[2,146,140,0,2,224,128,3,0,0,112,17,134,0,3,3,179,4,1,3,41,218,11,45,150,3,111,4],p:[1,4,2,3,1,4,2,3,5],c:[{n:[130,,,118],f:[14]},{n:[125,,,113],f:[]},{n:[132,,139],f:[]},{n:[130,,137],f:[]},{n:[130],f:[14,,,,,,,,,,,,,,,,,,,,,,,,55]}]},{i:[2,40,140,1,0,0,140,0,0,255,5,0,20,0,0,0,0,0,0,3,161,192,0,16,67,4,7,1],p:[,,,2,1,1,1,1],c:[{n:[123,123,123,123,123,123,123,123,123,123,123,123,123,123,123,123,123,123,123,123,123,123,123,123],f:[]},{n:[,,,,,,,,,,,,123,,,123,,,123,,,123,123,123],f:[]}]},{i:[3,146,140,0,3,224,128,3,0,0,4,0,56,124,4,0,80,4,1,1,49,146,11,37,119,4,72,2],p:[1,2,3,4,1,2,3,4,5],c:[{n:[,,,142,,,,,142,,,142,,,,142,,,,,142,,,142],f:[14,,,,,,,,,,,,,,,,,,,,,,,,55]},{n:[,,,142,,,,,142,,,142,,,,142,,,,,142,,,142],f:[14,,,,,,,,,,,,,,,,,,,,,,,,39]},{n:[,,,137,,,,,137,,,137,,,,137,,,,,137,,,137],f:[14,,,,,,,,,,,,,,,,,,,,,,,,55]},{n:[,,,132,,,,,132,,,132,,,,132,,,,,132,,,132],f:[14,,,,,,,,,,,,,,,,,,,,,,,,124]},{n:[142,130,118,106],f:[14,,,,,,,,,,,,,,,,,,,,,,,,55]}]}],rowLen:5703,patternLen:24,endPattern:9,numChannels:6};
//----------------------------------------------------------------------------
// Demo program section
//----------------------------------------------------------------------------
// Initialize music generation (player).
var t0 = new Date();
var player = new CPlayer();
player.init(song);
// Generate music...
var done = false;
setInterval(function () {
if (done) {
return;
}
var s = document.getElementById("status");
s.textContent = s.textContent + ".";
done = player.generate() >= 1;
if (done) {
var t1 = new Date();
s.textContent = s.textContent + "done (" + (t1 - t0) + "ms)";
// Put the generated song in an Audio element.
var wave = player.createWave();
var audio = document.createElement("audio");
audio.src = URL.createObjectURL(new Blob([wave], {type: "audio/wav"}));
audio.play();
// Start an oscilloscope animation.
var ctx = document.getElementById("canvas").getContext("2d");
setInterval(function () {
// Get currently playing data.
var t = audio.currentTime;
var data = player.getData(t, 300);
// Clear background.
ctx.fillStyle = "rgb(0,30,0)";
ctx.fillRect(0, 0, 300, 200);
ctx.fillStyle = "rgb(0,30,60)";
ctx.fillRect(0, 0, 300 * (t / audio.duration), 200);
ctx.strokeStyle = "rgb(255,255,255)";
// Plot left channel.
ctx.beginPath();
ctx.moveTo(0, 50 + 90 * data[0]);
for (var k = 1; k < 300; ++k) {
ctx.lineTo(k, 50 + 90 * data[k * 2]);
}
ctx.stroke();
// Plot right channel.
ctx.beginPath();
ctx.moveTo(0, 150 + 90 * data[1]);
for (var k = 1; k < 300; ++k) {
ctx.lineTo(k, 150 + 90 * data[k * 2 + 1]);
}
ctx.stroke();
}, 16);
}
}, 0);
}
</script>
</head>
<body onload="startDemo();">
<h1>SoundBox arpeggio demo</h1>
<p id="status">Generating</p>
<canvas id="canvas" width="300" height="200" />
</body>
</html>