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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
---
title: AudioParam.setTargetAtTime()
slug: Web/API/AudioParam/setTargetAtTime
tags:
- API
- AudioParam
- Method
- Reference
- Web Audio API
- setTargetAtTime
browser-compat: api.AudioParam.setTargetAtTime
---
{{ APIRef("Web Audio API") }}
{{domxref("AudioParam")}} 인터페이스의 `setTargetAtTime()` 메서드는 `AudioParam` 값에 점진적인 변화의 시작을 예정합니다. 이 메서드는 ADSR 엔벨로프의 decay 혹은 release 부분에 유용합니다.
## 구문
```js
var paramRef = param.setTargetAtTime(target, startTime, timeConstant);
```
### 매개변수
- target
- : 주어진 시작 시간에 매개변수가 변화를 시작할 값.
- startTime
- : {{domxref("BaseAudioContext/currentTime", "AudioContext.currentTime")}}과 같은 시간 좌표계에서 지수적 변화가 시작될 시간. 만약 이 값이 `AudioContext.currentTime` 보다 작거나 같다면, 매개변수는 즉시 변화를 시작할 것입니다.
- timeConstant
- : target 값을 향한 지수적 접근의 시간 상수 값 (초 단위로 주어짐). 이 값이 클수록, 변화는 더 느려질 것입니다.
### 반환
이 `AudioParam` 객체에 대한 참조. 이 인터페이스의 몇몇 오래된 브라우저 구현은 void를 반환합니다.
## 설명
변화는 `startTime` 에 명시된 시간에 시작해 `target` 매개변수에 의해 주어진 값을 향해 지수적으로 움직입니다. `timeConstant` 매개변수에 의해 정의된 감소율은 지수적입니다. 그러므로 값은 절대 `target` 에 완벽히 도달하지 못할 것이지만, `timeConstant` 길이의 각 시간 단계 이후에, 값은 또 다른 <math>
<semantics>
<mrow>
<mn>1</mn>
<mo>-</mo>
<msup>
<mi>e</mi>
<mrow>
<mo>-</mo>
<mn>1</mn>
</mrow>
</msup>
<mo>≈</mo>
<mn>63.2</mn>
<mtext>%</mtext>
</mrow>
<annotation encoding="TeX">1 - e^{-1} \대략 63.2%</annotation>
</semantics>
</math> 에 의해 `target` 에 다가가게 될 것입니다. (일차 선형 연속 시불변 시스템을 사용하는) 완전한 공식은 [Web
Audio 명세서](https://webaudio.github.io/web-audio-api/#dom-audioparam-settargetattime)에서 확인할 수 있습니다.
만약 특정한 시간까지 target 값에 절대적으로 도달할 필요가 있다면, {{domxref("AudioParam.exponentialRampToValueAtTime()")}}를 사용할 수 있습니다. 그러나, 수학적인 이유로, 이 메서드는 현재 값이나 target 값이 `0` 이면 작동하지 않습니다.
### 좋은 `timeConstant` 고르기
위에서 언급되었다시피, 각 `timeConstant` 가 target 값을 향해 63.2% 만큼씩 움직이며, 값은 지수적으로 변화합니다. target 값에 도달하는 것에 대해 걱정할 필요가 없습니다. 한 번 충분히 가까워지고 나면, 듣는 사람은 추가적인 변화를 감지하지 못할 것입니다.
사용하는 경우에 따라, target 값에 95% 만큼 도달하는 것은 충분할 것입니다. 그 경우, `timeConstant` 를 원하는 기간의 1/3만큼 설정할 수 있습니다.
시간이 진행함에 따라 어떻게 값이 0%에서 100%로 변화하는지에 대해서는 아래의 표를 참고해 보세요.
| `startTime` 이후로의 시간 | 값 |
| ---------------------- | --------------------------------- |
| `0 * timeConstant` | 0% |
| `0.5 * timeConstant` | 39.3% |
| `1 * timeConstant` | 63.2% |
| `2 * timeConstant` | 86.5% |
| `3 * timeConstant` | 95.0% |
| `4 * timeConstant` | 98.2% |
| `5 * timeConstant` | 99.3% |
| `n * timeConstant` | <math><semantics><mrow><mn>1</mn> |
<math>
<semantics>
<mrow>
<mn>1</mn>
<mo>-</mo>
<msup>
<mi>e</mi>
<mrow>
<mo>-</mo>
<mi>n</mi>
</mrow>
</msup>
</mrow>
<annotation encoding="TeX">1 - e^{-n}</annotation>
</semantics>
</math>
## 예제
이 예제에는 두 개의 제어 버튼을 가진 미디어 소스가 있습니다 (소스 코드는 [webaudio-examples
repo](https://github.com/mdn/webaudio-examples/blob/master/audio-param/index.html)에서 볼 수 있고, [작동 예제](https://mdn.github.io/webaudio-examples/audio-param/)도 볼 수 있습니다). 이 버튼이 눌렸을 때, `setTargetAtTime()` 이 사용되어 각각 gain 값을 1.0까지, 그리고 0까지 서서히 사라지게(fade) 하는데, 이 이펙트는 1초 후에 시작되고 이펙트가 지속되는 시간의 길이는 timeConstant에 의해 제어됩니다.
```js
// 오디오 컨텍스트를 생성합니다
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
// 예제를 위한 기본 변수를 설정합니다
var myAudio = document.querySelector('audio');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');
pre.innerHTML = myScript.innerHTML;
var atTimePlus = document.querySelector('.at-time-plus');
var atTimeMinus = document.querySelector('.at-time-minus');
// MediaElementAudioSourceNode를 생성합니다
// HTMLMediaElement를 노드 내로 전달합니다
var source = audioCtx.createMediaElementSource(myAudio);
// gain 노드를 생성하고 gain 값을 0.5로 설정합니다
var gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5;
var currGain = gainNode.gain.value;
// AudioBufferSourceNode를 gainNode에 연결하고
// gainNode를 destination에 연결합니다
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
// onclick이 발생했을 때 무언가를 하기 위해 버튼을 설정합니다
atTimePlus.onclick = function() {
currGain = 1.0;
gainNode.gain.setTargetAtTime(1.0, audioCtx.currentTime + 1, 0.5);
}
atTimeMinus.onclick = function() {
currGain = 0;
gainNode.gain.setTargetAtTime(0, audioCtx.currentTime + 1, 0.5);
}
```
## 명세서
{{Specifications}}
## 브라우저 호환성
{{Compat}}
## 같이 보기
- [Web Audio API 사용하기](/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
|
