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 77
/
Copy pathdemo.html
95 lines (81 loc) · 3.6 KB
/
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 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,192,128,0,2,192,128,3,0,0,32,222,60,0,0,0,2,188,3,1,3,55,241,60,67,53,5,75,5],p:[1,2,3,4,3,4],c:[{n:[123],f:[]},{n:[118],f:[]},{n:[123,111],f:[]},{n:[118,106],f:[]}]},{i:[3,100,128,0,3,201,128,7,0,0,17,43,109,0,0,0,3,113,4,1,1,23,184,2,29,147,6,67,3],p:[,,1,2,1,2],c:[{n:[123,,,,,,,,123,,,,,,,,123,,,,,,,,123,,,,,,,,126,,,,,,,,126,,,,,,,,126,,,,,,,,126,,,,,,,,130,,,,,,,,130,,,,,,,,130,,,,,,,,130],f:[]},{n:[122,,,,,,,,122,,,,,,,,122,,,,,,,,122,,,,,,,,125,,,,,,,,125,,,,,,,,125,,,,,,,,125,,,,,,,,130,,,,,,,,130,,,,,,,,130,,,,,,,,130],f:[]}]},{i:[0,192,99,64,0,80,99,0,0,3,4,0,66,0,0,0,0,19,4,1,2,86,241,18,195,37,4,0,0],p:[,,1,1,1,1,1],c:[{n:[147,,,,147,,,,147,,,,147,,,,147,,,,147,,,,147,,,,147],f:[]}]},{i:[2,146,140,0,2,224,128,3,0,0,84,0,95,0,0,0,3,179,5,1,2,62,135,11,15,150,3,157,6],p:[,,,,1,2],c:[{n:[147,,145,,147,,,,,,,,,,,,135],f:[11,,,,,,,,,,,,,,,,11,,,,,,,,,,,,,,,,27,,,,,,,,,,,,,,,,84]},{n:[142,,140,,142,,,,,,,,,,,,130],f:[11,,,,,,,,,,,,,,,,11,,,,,,,,,,,,,,,,27,,,,,,,,,,,,,,,,84]}]}],rowLen:6615,patternLen:32,endPattern:6,numChannels:4};
//----------------------------------------------------------------------------
// 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 demo</h1>
<p id="status">Generating</p>
<canvas id="canvas" width="300" height="200" />
</body>
</html>