-
Notifications
You must be signed in to change notification settings - Fork 0
/
testing.html
80 lines (64 loc) · 1.63 KB
/
testing.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
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.3.1/Tone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scribbletune/1.9.4/scribbletune.js"></script>
<script src= "patterns.js"> </script>
<style>
li{padding: 10px ;
cursor: pointer ;}
li.active{font-weight:bold;}
</style>
</head>
<body>
<div id="patternsList">
<ol>
</ol>
</div>
</body>
<script>
for (var l=0; l<100; l++) {
document.querySelector('#patternsList ol').insertAdjacentHTML('beforeend', '<li id="pattern'+l+'" onclick="PlayPattern('+l+')">' + patterns[l] + '</li>')
}
function convertPatternToBeatString(pattern, note){
var string = '';
for(var i=0; i<pattern.length; i++){
pattern[i] == note
if (pattern[i]==note) {
string=string +'x'
} else {
string=string +'-'
}
}
return string;
}
var highClip;
var lowClip;
function PlayPattern(id){
document.querySelectorAll('li').forEach(function(el){
el.className = '';
});
document.querySelector('#pattern'+id).className = "active";
var pattern = patterns[id];
Tone.context.resume();
if(typeof highClip !== 'undefined'){
highClip.stop();
lowClip.stop();
}
Tone.Transport.stop();
lowClip = scribble.clip({
pattern: convertPatternToBeatString(pattern, 'l'),
sample: 'wav/low.wav'
});
highClip = scribble.clip({
pattern: convertPatternToBeatString(pattern, 'h'),
sample: 'wav/high.wav'
});
lowClip.loop = 1;
highClip.loop = 1;
lowClip.start();
highClip.start();
Tone.Transport.bpm.value = 240;
Tone.Transport.start();
}
</script>
</html>