diff options
| -rw-r--r-- | files/ko/web/api/audioparam/settargetattime/index.md | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/files/ko/web/api/audioparam/settargetattime/index.md b/files/ko/web/api/audioparam/settargetattime/index.md new file mode 100644 index 0000000000..38ceb6bddd --- /dev/null +++ b/files/ko/web/api/audioparam/settargetattime/index.md @@ -0,0 +1,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) |