이것은 정말로 유용합니다 — 이제 우리는 gain 값에 audio param 메서드의 힘을 사용할 수 있습니다. 우리는 특정한 시간에 값을 설정할 수 있거나, {{domxref("AudioParam.linearRampToValueAtTime")}}과 같은 메서드로 시간에 따라 이것을 변화시킬 수 있습니다.
-우리의 attack과 release에 대해, 우리는 위에서 언급된 linearRampToValueAtTime 메서드를 사용할 것입니다. 이것은 두 개의 매개변수를 취합니다 — 변화시키고 있는 매개변수에 설정하기 원하는 값 (이 경우 gain) 그리고 언제 이것을 하고 싶은지. 우리의 경우 언제는 우리의 입력에 의해 제어됩니다. 그래서 아래의 예제에서 gain은 attack 범위 입력이 설정된 시간에 따라 선형 비율로 1까지 증가됩니다. 비슷하게 release의 경우, release 입력이 설정된 시간에 걸쳐 선형 비율로 gain은 0으로 설정됩니다.
우리의 attack과 release에 대해, 우리는 위에서 언급된 linearRampToValueAtTime 메서드를 사용할 것입니다. 이것은 두 개의 매개변수를 취합니다 — 변화시키고 있는 파라미터에 설정하기 원하는 값 (이 경우 gain) 그리고 언제 이것을 하고 싶은지. 우리의 경우 언제는 우리의 입력에 의해 제어됩니다. 그래서 아래의 예제에서 gain은 attack 범위 입력이 설정된 시간에 따라 선형 비율로 1까지 증가됩니다. 비슷하게 release의 경우, release 입력이 설정된 시간에 걸쳐 선형 비율로 gain은 0으로 설정됩니다.
let sweepLength = 2;
function playSweep(time) {
@@ -210,7 +210,7 @@ osc.stop(time + pulseTime);
<label for="lfo">LFO</label>
<input name="lfo" id="lfo" type="range" min="20" max="40" value="30" step="1" />
-이전처럼, 우리는 range 입력 값이 사용자에 의해 변화되었을 때 매개변수에 변화를 줄 것입니다.
+이전처럼, 우리는 range 입력 값이 사용자에 의해 변화되었을 때 파라미터에 변화를 줄 것입니다.
let pulseHz = 880;
const hzControl = document.querySelector('#hz');
diff --git a/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.html b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.html
index 8a2e4c82f0..f672742601 100644
--- a/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.html
+++ b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.html
@@ -1,5 +1,5 @@
---
-title: ConstantSourceNode로 다수의 매개변수 제어하기
+title: ConstantSourceNode로 다수의 파라미터 제어하기
slug: Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode
tags:
- Audio
@@ -13,17 +13,17 @@ tags:
---
{{APIRef("Web Audio API")}}
-이 글은 다수의 매개변수가 같은 값을 공유하도록 매개변수들을 함께 연결하기 위해 어떻게 {{domxref("ConstantSourceNode")}}를 사용하는지를 설명합니다. 이 값은 {{domxref("ConstantSourceNode.offset")}} 매개변수의 값을 설정함으로써 변경될 수 있습니다.
+이 글은 다수의 파라미터가 같은 값을 공유하도록 파라미터들을 함께 연결하기 위해 어떻게 {{domxref("ConstantSourceNode")}}를 사용하는지를 설명합니다. 이 값은 {{domxref("ConstantSourceNode.offset")}} 파라미터의 값을 설정함으로써 변경될 수 있습니다.
-간혹 다수의 오디오 매개변수들이 같은 값을 공유할 수 있도록, 심지어 값이 어떤 방법으로 변경되는 동안일지라도, 연결시켜두고 싶을 때가 있습니다. 예를 들자면, 한 세트의 오실레이터들이 있고, 이 두 개가 하나의 설정 가능한 볼륨을 공유할 필요가 있거나, 특정한 입력에 적용되나 모든 입력에는 적용되지 않는 필터가 있을 수도 있습니다. 반복문을 사용하여 각각의 영향받는 {{domxref("AudioParam")}}의 값을 한번에 하나씩 변경할 수도 있겠지만, 여기에는 두 가지 문제점이 있습니다. 첫째는, 곧 보게 되겠지만, 작성할 필요가 없는 추가적인 코드의 작성입니다. 그리고 둘째는, 그 반복은 스레드 (메인 스레드일 가능성이 높음) 의 소중한 CPU 시간을 사용합니다. 이런 작업을 이에 최적화되어 있으며 여러분의 코드보다 더욱 적합한 우선도에서 실행할 수 있는 오디오 렌더링 스레드에 넘길 수 있는 방법이 있습니다.
+간혹 다수의 오디오 파라미터들이 같은 값을 공유할 수 있도록, 심지어 값이 어떤 방법으로 변경되는 동안일지라도, 연결시켜두고 싶을 때가 있습니다. 예를 들자면, 한 세트의 오실레이터들이 있고, 이 두 개가 하나의 설정 가능한 볼륨을 공유할 필요가 있거나, 특정한 입력에 적용되나 모든 입력에는 적용되지 않는 필터가 있을 수도 있습니다. 반복문을 사용하여 각각의 영향받는 {{domxref("AudioParam")}}의 값을 한번에 하나씩 변경할 수도 있겠지만, 여기에는 두 가지 문제점이 있습니다. 첫째는, 곧 보게 되겠지만, 작성할 필요가 없는 추가적인 코드의 작성입니다. 그리고 둘째는, 그 반복은 스레드 (메인 스레드일 가능성이 높음) 의 소중한 CPU 시간을 사용합니다. 이런 작업을 이에 최적화되어 있으며 여러분의 코드보다 더욱 적합한 우선도에서 실행할 수 있는 오디오 렌더링 스레드에 넘길 수 있는 방법이 있습니다.
그 해결책이란 간단한데, 바로 첫눈에는 그다지 유용해 보이지 않는 오디오 노드 유형 {{domxref("ConstantSourceNode")}}을 사용하는 것입니다.
기법
-이 방법은 듣기엔 어려워 보이지만 사실은 굉장히 쉽습니다. {{domxref("ConstantSourceNode")}}를 생성하고 항상 일치하는 값을 갖도록 연결된 모든 {{domxref("AudioParam")}}에 이 노드를 연결합니다. ConstantSourceNode의 {{domxref("ConstantSourceNode.offset", "offset")}} 값은 모든 출력으로 바로 전달되므로, 이 노드는 그 값을 각각의 연결된 매개변수에 보내는 스플리터 역할을 합니다.
+이 방법은 듣기엔 어려워 보이지만 사실은 굉장히 쉽습니다. {{domxref("ConstantSourceNode")}}를 생성하고 항상 일치하는 값을 갖도록 연결된 모든 {{domxref("AudioParam")}}에 이 노드를 연결합니다. ConstantSourceNode의 {{domxref("ConstantSourceNode.offset", "offset")}} 값은 모든 출력으로 바로 전달되므로, 이 노드는 그 값을 각각의 연결된 파라미터에 보내는 스플리터 역할을 합니다.
-아래의 그림은 이 과정이 어떻게 작동하는지 보여줍니다. 입력값 N은 {{domxref("ConstantSourceNode.offset")}} 속성의 값으로 설정됩니다. ConstantSourceNode는 필요한 만큼 많은 출력을 가질 수 있습니다. 아래 그림의 경우, ConstantSourceNode를 세 개의 노드에 연결했습니다. 두 개의 {{domxref("GainNode")}}와 {{domxref("StereoPannerNode")}}입니다. 그래서 N은 명시된 매개변수의 값이 됩니다 ({{domxref("GainNode")}}의 {{domxref("GainNode.gain", "gain")}}, {{domxref("StereoPannerNode")}}의 pan).
+아래의 그림은 이 과정이 어떻게 작동하는지 보여줍니다. 입력값 N은 {{domxref("ConstantSourceNode.offset")}} 속성의 값으로 설정됩니다. ConstantSourceNode는 필요한 만큼 많은 출력을 가질 수 있습니다. 아래 그림의 경우, ConstantSourceNode를 세 개의 노드에 연결했습니다. 두 개의 {{domxref("GainNode")}}와 {{domxref("StereoPannerNode")}}입니다. 그래서 N은 명시된 파라미터의 값이 됩니다 ({{domxref("GainNode")}}의 {{domxref("GainNode.gain", "gain")}}, {{domxref("StereoPannerNode")}}의 pan).
@@ -214,9 +214,9 @@ window.addEventListener("load", setup, false);
constantNode.offset.value = volumeControl.value;
}
-이 간단한 함수는 두 노드의 gain을 제어합니다. 우리가 해야 하는 것은 {{domxref("ConstantSourceNode")}}의 {{domxref("ConstantSourceNode.offset", "offset")}} 매개변수의 값을 설정하는 것 뿐입니다. 이 값은 노드의 상수 출력 값이 되는데, 이는 노드의 모든 출력에 전달되고, 이 출력이라 함은, 위에서 설정되었다시피 gainNode2와 gainNode3입니다.
이 간단한 함수는 두 노드의 gain을 제어합니다. 우리가 해야 하는 것은 {{domxref("ConstantSourceNode")}}의 {{domxref("ConstantSourceNode.offset", "offset")}} 파라미터의 값을 설정하는 것 뿐입니다. 이 값은 노드의 상수 출력 값이 되는데, 이는 노드의 모든 출력에 전달되고, 이 출력이라 함은, 위에서 설정되었다시피 gainNode2와 gainNode3입니다.
이것이 아주 간단한 예제이긴 하지만, 다수의 연결된 노드에서 재생되는 다수의 연결된 매개변수를 가진 32개의 오실레이터 신시사이저를 상상해 보십시오. 그것들 모두를 조정하기 위해 연산의 수를 줄일 수 있음은 코드의 크기와 성능 양 쪽 모두에 대해 매우 유용함을 증명할 것입니다.
+이것이 아주 간단한 예제이긴 하지만, 다수의 연결된 노드에서 재생되는 다수의 연결된 파라미터를 가진 32개의 오실레이터 신시사이저를 상상해 보십시오. 그것들 모두를 조정하기 위해 연산의 수를 줄일 수 있음은 코드의 크기와 성능 양 쪽 모두에 대해 매우 유용함을 증명할 것입니다.
오실레이터 재생하기
diff --git a/files/ko/web/api/web_audio_api/index.html b/files/ko/web/api/web_audio_api/index.html index 1ccd2526b3..fa41714856 100644 --- a/files/ko/web/api/web_audio_api/index.html +++ b/files/ko/web/api/web_audio_api/index.html @@ -264,7 +264,7 @@ translation_of: Web/API/Web_Audio_API- Tones: Web Audio API를 사용하여 특정한 음색/음을 재생하는 간단한 라이브러리
- Tone.js: 브라우저에서 상호작용을 하는 음악을 생성하기 위한 프레임워크 -
- howler.js: 다른 유용한 기능들을 제공할 뿐만 아니라, Web Audio API을 기본으로 하고 HTML5 Audio에 대안을 제공하는 JS 오디오 라이브러리 +
- howler.js: 다른 유용한 기능들을 제공할 뿐만 아니라, Web Audio API을 기본으로 하고 HTML5 Audio를 대비책으로 가지는 JS 오디오 라이브러리
- Mooog: jQuery 스타일의 AudioNode 체이닝, mixer 스타일의 전송/반환, 등등
- XSound: 신시사이저, 이펙트, 시각화, 레코딩 등을 위한 Web Audio API 라이브러리
- OpenLang: 다른 소스로부터 하나의 파일에 비디오와 오디오를 레코드하고 결합시키기 위한 Web Audio API를 사용하는 HTML5 비디오 language lab 웹 애플리케이션 (GitHub에 있는 소스) diff --git a/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.html b/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.html index 5b3e2c46a1..e734422eb8 100644 --- a/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.html +++ b/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.html @@ -215,7 +215,7 @@ panner.distanceModel = "exponential"; // exponential distance 모
Gain 제어는 이것만의 노드 유형으로 이동됨
-Web Audio 표준은 이제 모든 gain을 {{domxref("GainNode")}}를 사용하여 제어합니다. gain 속성을 직접 음원에 설정하는 대신, 여러분은 소스를 gain 노드에 연결하고 이 노드의 gain 매개변수를 사용하여 gain을 제어합니다.
Web Audio 표준은 이제 모든 gain을 {{domxref("GainNode")}}를 사용하여 제어합니다. gain 속성을 직접 음원에 설정하는 대신, 여러분은 소스를 gain 노드에 연결하고 이 노드의 gain 파라미터를 사용하여 gain을 제어합니다.
AudioBufferSourceNode
diff --git a/files/ko/web/api/web_audio_api/using_web_audio_api/index.html b/files/ko/web/api/web_audio_api/using_web_audio_api/index.html index 8a217a29f5..89b98f88c1 100644 --- a/files/ko/web/api/web_audio_api/using_web_audio_api/index.html +++ b/files/ko/web/api/web_audio_api/using_web_audio_api/index.html @@ -48,7 +48,7 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_APIWeb Audio API로 무엇인가를 하기 위해서는 오디오 컨텍스트의 인스턴스를 생성할 필요가 있습니다. 이는 우리에게 API의 모든 기능에 접근할 수 있게 합니다.
-// for legacy browsers +// 레거시 브라우저를 위해 const AudioContext = window.AudioContext || window.webkitAudioContext; const audioContext = new AudioContext(); @@ -73,10 +73,10 @@ const audioContext = new AudioContext();Web Audio API로 얻을 수 있는 모든 것을 사용하려면 이 요소에서 소스를 가져와 우리가 만든 컨텍스트에 연결해야 합니다. 운 좋게도 이걸 할 수 있는 메서드가 있습니다 — {{domxref("AudioContext.createMediaElementSource")}}입니다:
-// get the audio element +// 오디오 요소를 얻습니다 const audioElement = document.querySelector('audio'); -// pass it into the audio context +// 오디오 요소를 오디오 컨텍스트에 전달합니다 const track = audioContext.createMediaElementSource(audioElement);@@ -112,17 +112,17 @@ const track = audioContext.createMediaElementSource(audioElement);이제 우리는 재생과 정지 기능을 추가할 수 있습니다.
-// select our play button +// 재생 버튼을 선택합니다 const playButton = document.querySelector('button'); playButton.addEventListener('click', function() { - // check if context is in suspended state (autoplay policy) + // 컨텍스트가 연기된(suspended) 상태에 있는지 검사합니다 (자동 재생 정책) if (audioContext.state === 'suspended') { audioContext.resume(); } - // play or pause track depending on state + // 상태에 따라 트랙을 재생하거나 정지합니다 if (this.dataset.playing === 'false') { audioElement.play(); this.dataset.playing = 'true'; @@ -180,7 +180,7 @@ volumeControl.addEventListener('input', function() {-참고: 노드 객체의 값 (예:
+GainNode.gain)은 간단한 값이 아닙니다; 실제로는 {{domxref("AudioParam")}} 유형의 객체입니다 — 이것들은 매개변수라고 불립니다. 이것이 우리가 단순히gain에 직접 값을 설정하기보다,GainNode.gain의value속성을 설정해야만 하는 이유입니다. 예를 들자면, 매개변수에 설정된 기간 동안 사이에 변화하는 특정한 값들의 집합을 전달하는 것을 감안하며, 이는 이것들이 더욱 유연하게 될 수 있게 합니다.참고: 노드 객체의 값 (예:
GainNode.gain)은 단순한 값이 아닙니다. 이 값은 실제로는 {{domxref("AudioParam")}} 유형의 객체입니다 — 이것은 파라미터라고 불립니다. 이것이 바로gain에 직접 값을 설정하기보다,GainNode.gain의value속성을 설정해야 하는 이유입니다. 이렇게 함은 이 객체가 좀 더 유연해 질 수 있게 하는데, 예를 들자면 파라미터에 주어진 시간 사이에서 변화시킬 값들의 집합을 전달하는 것을 고려해 볼 수 있겠습니다.좋습니다, 이제 사용자는 트랙의 볼륨을 업데이트할 수 있습니다! gain 노드는 만약 여러분이 무음 기능을 추가하기를 원한다면 사용하기에 완벽한 노드입니다.
-- cgit v1.2.3-54-g00ecf