-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsave-audio.html
104 lines (88 loc) · 2.39 KB
/
save-audio.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
95
96
97
98
99
100
101
102
103
104
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.4.9/Tone.min.js"></script>
<script src= "patterns.js"> </script>
</head>
<body>
<button onclick="init()">INIT AUDIO</button>
<p>Pattern ID: <input id="pattern" type="number" min=1 max=100></input></p>
<p>BPM: <input id="bpm" type="number" min=40 max=240 value=120></input></p>
<button id="next">PLAY</button>
<audio controls></audio>
</body>
<script>
var audio, actx, dest, recorder, highClip, lowClip;
var chunks = [];
var audio = document.querySelector('audio');
function init(){
actx = Tone.context;
actx.resume();
dest = actx.createMediaStreamDestination();
recorder = new MediaRecorder(dest.stream);
highClip = new Tone.Player({
"url" : "wav/high.wav",
"autostart" : false
}).toMaster();
lowClip = new Tone.Player({
"url" : "wav/low.wav",
"autostart" : false
}).toMaster();
clickClip = new Tone.Player({
"url" : "wav/click.mp3",
"autostart" : false
}).toMaster();
// Tone.connect(highClip, recorder);
// Tone.connect(lowClip, recorder);
highClip.connect(dest);
lowClip.connect(dest);
clickClip.connect(dest);
recorder.ondataavailable = function(e){
chunks.push(e.data);
}
recorder.onstop = function(){
var blob = new Blob(chunks, { type: 'audio/ogg; codecs=opus' });
audio.src = URL.createObjectURL(blob);
}
}
document.querySelector('#next').addEventListener('click', function(){
PlayPattern(document.querySelector('#pattern').value);
});
function createPart(pattern){
var part = new Tone.Sequence(function(time, value){
if(value == 'h'){
highClip.restart(time);
//highClip.restart(time);
}
if(value == 'l'){
//lowClip.start();
lowClip.restart(time);
}
}, pattern, "8n");
part.loop = 0;
return part;
}
function PlayPattern(id){
var pattern = patterns[id];
chunks = [];
var clicks = new Tone.Sequence(function(t,v){
clickClip.restart(t);
}, [1,2,3,4], "4n");
clicks.loop = 0;
var part = createPart(pattern);
recorder.start();
clicks.start();
Tone.Transport.schedule(function(){
part.start();
}, "1:0:0")
Tone.Transport.schedule(function(){
recorder.stop();
clicks.dispose();
part.dispose();
Tone.Transport.stop();
}, "5:0:0");
Tone.Transport.bpm.value = document.querySelector("#bpm").value;
//recorder.start();
Tone.Transport.start();
}
</script>
</html>