User:Zuhui/Weekly notes/code for audio api, 0923: Difference between revisions

Latest revision as of 12:44, 5 October 2024

Michael's code for reference

 <body>
 <button class=“sb-start-audio">start</button>
 <audio src="software_art_repository.ogg" controls style="width: 100%" class=“sb-source” id="voice" data-connect=“voice-volume"></audio>
 Vol: <input type="range" id="voice-volume" class="sb-gain" data-connect="voice-panner" min="0" max="50" value="1" step="0.01" />

 Pan: <input type="range" id="voice-panner" class="sb-panner" data-connect="voice-chorus" min="-1" max="1" value="0" step="0.01" />

 Chorus 

 Enabled: <input type="checkbox" id="voice-chorus" data-connect="voice-delay" class="sb-tuna" data-tuna-classname="Chorus" />
 Rate: <input type="range" id="voice-chorus" class="sb-tuna-param" data-param="rate" data-for="voice-chorus" min="0.01" max="8" value="0.01" step="0.01" />

 Feedback: <input type="range" class="sb-tuna-param" data-param="feedback" data-for="voice-chorus" min="0" max="1" value="0.4" step="0.005" />

 Depth: <input type="range" class="sb-tuna-param" data-param="depth" data-for="voice-chorus" min="0" max="1" value="0.7" step="0.005" />

 Delay: <input type="range" class="sb-tuna-param" data-param="delay" data-for="voice-chorus" min="0" max="1" value="0.0045" step="0.0005" />

 Delay

 Enabled: <input type="checkbox" id="voice-delay" class="sb-tuna" data-tuna-classname="Delay" data-connect=“voice-phaser"/>
 DelayTime: <input type="range"  class="sb-tuna-param" data-param="delayTime" data-for="voice-delay" min="1" max="10000" value="1000" step=“1"/>

 Feedback: <input type="range" class="sb-tuna-param" data-param="feedback" data-for="voice-delay" min="0" max="1" value="0.45" step="0.005" />

 wetLevel: <input type="range" class="sb-tuna-param" data-param="wetLevel" data-for="voice-delay" min="0" max="1" value="0.5" step="0.005" />

 dryLevel: <input type="range" class="sb-tuna-param" data-param="dryLevel" data-for="voice-delay" min="0" max="1" value="1" step="0.005" />

 Cutoff: <input type="range" class="sb-tuna-param" data-param="cutoff" data-for="voice-delay" min="20" max="22050" value="20000" step="10" />

 Phaser

 enabled: <input type="checkbox" id="voice-phaser" class="sb-tuna" data-tuna-classname="Phaser" data-connect="voice-compressor" />
 rate: <input type="range" class="sb-tuna-param" data-param="rate" data-for="voice-phaser" min="0.01" max="8" value="0.1" step="0.01" />

 depth: <input type="range" class="sb-tuna-param" data-param="depth" data-for="voice-phaser" min="0" max="1" value="0.6" step="0.005" />

 feedback: <input type="range" class="sb-tuna-param" data-param="feedback" data-for="voice-phaser" min="0" max="1" value="0.7" step="0.005" />

 stereoPhase: <input type="range" class="sb-tuna-param" data-param="stereoPhase" data-for="voice-phaser" min="0" max="180" value="40 step="1" />

 compressor

 enabled: <input type="checkbox" id="voice-compressor" class="sb-tuna" data-tuna-classname="Compressor" data-connect="destination" />
 threshold: <input type="range" class="sb-tuna-param" data-param="threshold" data-for="voice-compressor" min="-100" max="0" value="-20" step="1" />

 makeupGain: <input type="range" class="sb-tuna-param" data-param="makeupGain" data-for="voice-compressor" min="0" max="10" value="1" step="1" />

 attack: <input type="range" class="sb-tuna-param" data-param="attack" data-for="voice-compressor" min="0" max="1000" value="1" step="1" />

 release: <input type="range" class="sb-tuna-param" data-param="release" data-for="voice-compressor" min="0" max="3000" value="250" step="1" />

 ratio: <input type="range" class="sb-tuna-param" data-param="ratio" data-for="voice-compressor" min="1" max="20" value="4" step="1" />

 knee: <input type="range" class="sb-tuna-param" data-param="ratio" data-for="voice-compressor" min="0" max="40" value="5" step="1" />

 <audio src=“오디오파일" controls style="width: 100%"></audio>
 so using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, and <a href="https://github.com/Theodeus/tuna">tuna</a> + <a href="https://github.com/Theodeus/tuna/wiki/Getting-started">the tuna wiki</a>,
 </body>
 <script src=“tuna.js”></script>
 <script src=“soundboard.js”></script>
 </html>

Tuna

Tuna.js는 Web Audio API를 확장하는 오픈소스 라이브러리입니다. Web Audio API는 웹에서 오디오를 제어하고 처리하는 강력한 도구이지만, 기본적으로 제공하는 오디오 효과와 기능들이 다소 저수준이고 복잡하게 느껴질 수 있습니다. Tuna.js는 이 Web Audio API의 기능을 보완하여, 쉽게 사용할 수 있는 고수준의 오디오 효과들을 제공합니다.
Tuna.js의 핵심 기능
Tuna.js는 여러 가지 일반적인 오디오 효과를 웹 애플리케이션에 쉽게 추가할 수 있도록 해줍니다. 이 라이브러리는 Web Audio API의 저수준 오디오 프로세싱을 더 간단하게 만들어주고, 아래와 같은 다양한 오디오 효과들을 제공합니다:

Chorus (코러스): 소리를 약간씩 변형하여 여러 소리가 겹치는 듯한 효과를 내는 효과. 합창단이 여러 명이 동시에 노래를 부를 때 발생하는 소리와 비슷합니다.
Delay (딜레이): 소리를 약간의 시간 차이를 두고 반복해서 재생하는 에코 효과입니다.
Phaser (페이저): 특정 주파수를 시간에 따라 이동시키며 소리를 회전하는 듯한 느낌을 주는 효과입니다.
Compressor (컴프레서): 소리의 볼륨을 자동으로 조절해주는 기능으로, 소리의 다이내믹 범위를 좁히는 데 사용됩니다.
Bitcrusher (비트크러셔): 소리의 해상도를 줄여 독특한 로파이(Lo-Fi) 음향을 만들어내는 효과입니다.

Tuna.js가 필요한 이유

편리한 인터페이스: Web Audio API를 사용할 때 저수준의 복잡한 코드를 직접 작성하지 않아도 됩니다. Tuna.js는 고수준의 API를 제공하여 오디오 효과를 직관적으로 다룰 수 있게 합니다.
간편한 오디오 효과 적용: Tuna.js는 다양한 오디오 효과를 간단한 설정만으로 적용할 수 있도록 합니다. 예를 들어, 코러스나 딜레이 같은 효과를 직접 Web Audio API로 구현하려면 복잡한 프로세싱 노드를 연결해야 하지만, Tuna.js를 사용하면 몇 줄의 코드로 이러한 효과를 적용할 수 있습니다.
확장 가능성: Tuna.js는 기본적으로 Web Audio API와 함께 작동하므로, 필요한 경우 Web Audio API의 다른 기능들과 결합해 더욱 복잡한 오디오 처리를 할 수 있습니다.

예시: Tuna.js 없이 코러스 효과를 구현하려면
Web Audio API만을 사용해 코러스 효과를 직접 구현하려면, 여러 개의 DelayNode와 OscillatorNode를 직접 설정하고 연결하는 등 복잡한 작업이 필요합니다. 하지만 Tuna.js를 사용하면, 단순히 Chorus라는 클래스를 사용해 효과를 적용하고 필요한 매개변수만 설정하면 됩니다.
결론 Tuna.js는 Web Audio API를 사용하는 웹 개발자들이 복잡한 오디오 처리를 간편하고 직관적으로 할 수 있도록 도와주는 라이브러리입니다. 다양한 오디오 효과를 간단한 코드로 구현할 수 있기 때문에, 오디오를 다루는 웹 애플리케이션 개발에서 매우 유용하게 사용됩니다.

Soundboard

soundboard.js는 해당 코드에서 사용자 인터페이스(UI)와 오디오 프로세싱(Web Audio API와 Tuna.js)를 연결하는 스크립트 역할을 합니다. 쉽게 말해서, 사용자가 웹 페이지에서 오디오를 조작할 수 있도록 하는 논리를 담당하는 파일입니다.
Soundboard.js의 역할

UI와 오디오 효과 연결:

사용자가 슬라이더(볼륨, 팬, 효과의 매개변수 등)를 조작하거나 체크박스(효과 활성화)를 클릭하면, 이 변화가 오디오에 즉시 반영되어야 합니다. soundboard.js는 이러한 사용자 인터페이스(UI) 요소들과 Tuna.js 또는 Web Audio API가 제공하는 오디오 노드들을 연결하는 역할을 합니다. 즉, 슬라이더나 체크박스에서 발생한 입력을 해당 오디오 처리 노드의 매개변수에 반영하는 것입니다.

데이터 연결:

HTML 요소의 data-connect 속성들을 보면, 각 슬라이더나 체크박스가 어떤 오디오 노드 또는 효과와 연결되어 있는지 명시되어 있습니다. 예를 들어, data-connect="voice-volume" 속성은 이 슬라이더가 오디오 볼륨을 조절하는 역할을 한다는 의미입니다. 이런 연결을 해석하고 반영하는 로직이 soundboard.js에 포함되어 있습니다.
data-tuna-classname 속성은 Tuna.js의 특정 효과 클래스를 지정하는데, 이를 통해 Tuna.js의 코러스, 딜레이 같은 고급 오디오 효과를 활성화하고 매개변수를 조정할 수 있습니다.

실시간 오디오 조작:

사용자가 페이지 내에서 오디오 조작을 실시간으로 할 수 있도록 돕습니다. 예를 들어, 사용자가 볼륨 슬라이더를 조작하면 soundboard.js가 그 입력을 받아서 Web Audio API를 통해 실제 오디오의 볼륨을 즉시 변경합니다. 마찬가지로, 코러스나 딜레이 같은 Tuna.js의 고급 오디오 효과가 활성화되면, 사용자가 효과 매개변수(예: 속도, 피드백)를 조절하는 것 역시 soundboard.js가 처리합니다.

예시: 볼륨 슬라이더

vol: <input type="range" id="voice-volume" class="sb-gain" data-connect="voice-panner" min="0" max="50" value="1" step="0.01" />

이 슬라이더는 오디오의 볼륨을 조절하는 역할을 하며, data-connect="voice-panner" 속성에 의해 볼륨 조정 후에는 패닝(panning) 효과와 연결됩니다. soundboard.js는 이 슬라이더의 변화를 감지하고, Web Audio API의 GainNode 또는 PannerNode를 통해 실시간으로 소리의 볼륨과 방향을 조절합니다.
왜 Soundboard.js가 필요한가요?
soundboard.js는 사용자와 웹 페이지의 오디오 처리 기능 사이의 중재자 역할을 합니다. 사용자가 UI 요소(슬라이더, 체크박스)를 통해 입력하는 값들이 실제로 Tuna.js나 Web Audio API의 오디오 처리에 반영될 수 있도록 연결해주는 필수적인 역할을 합니다. 이 없으면, 사용자 인터페이스에서 아무리 버튼이나 슬라이더를 조작해도 오디오에는 영향을 미치지 않게 됩니다.

왜 두 파일이 모두 필요한가요?

Tuna.js는 고급 오디오 효과를 추가하고, 이러한 효과를 쉽게 다룰 수 있게 만들어줍니다. 코러스, 딜레이, 페이저 등의 고수준 오디오 효과를 Tuna.js가 제공하므로, 이 파일이 없으면 이러한 기능을 구현하기 어려워집니다.
Soundboard.js는 UI와 오디오 처리 기능을 연결하는 로직을 담당합니다. 사용자가 슬라이더나 버튼을 조작할 때, 그 값들이 Tuna.js나 Web Audio API를 통해 오디오 효과에 적용되도록 해주는 역할을 합니다.
즉, Tuna.js는 오디오 효과들을 제공하고, Soundboard.js는 사용자의 입력을 처리하여 이 오디오 효과에 적용하는 연결 고리 역할을 합니다. 두 파일이 협력해야 완전한 오디오 조작 기능이 작동하게 되는 것이죠.

@@ Line 1: / Line 1: @@
 ===Michael's code for reference===
-<code>
+  <code><body>
-  <body>
    <button class=“sb-start-audio">start</button>
    <audio src="software_art_repository.ogg" controls style="width: 100%" class=“sb-source” id="voice" data-connect=“voice-volume"></audio>
@@ Line 45: / Line 44: @@
    </html>
    </code>
+===Tuna===
+Tuna.js는 Web Audio API를 확장하는 오픈소스 라이브러리입니다. Web Audio API는 웹에서 오디오를 제어하고 처리하는 강력한 도구이지만, 기본적으로 제공하는 오디오 효과와 기능들이 다소 저수준이고 복잡하게 느껴질 수 있습니다. Tuna.js는 이 Web Audio API의 기능을 보완하여, 쉽게 사용할 수 있는 고수준의 오디오 효과들을 제공합니다. <br>
+'''Tuna.js의 핵심 기능'''<br>
+Tuna.js는 여러 가지 일반적인 오디오 효과를 웹 애플리케이션에 쉽게 추가할 수 있도록 해줍니다. 이 라이브러리는 Web Audio API의 저수준 오디오 프로세싱을 더 간단하게 만들어주고, 아래와 같은 다양한 오디오 효과들을 제공합니다:<br>
+* Chorus (코러스): 소리를 약간씩 변형하여 여러 소리가 겹치는 듯한 효과를 내는 효과. 합창단이 여러 명이 동시에 노래를 부를 때 발생하는 소리와 비슷합니다.
+* Delay (딜레이): 소리를 약간의 시간 차이를 두고 반복해서 재생하는 에코 효과입니다.<br>
+* Phaser (페이저): 특정 주파수를 시간에 따라 이동시키며 소리를 회전하는 듯한 느낌을 주는 효과입니다.<br>
+* Compressor (컴프레서): 소리의 볼륨을 자동으로 조절해주는 기능으로, 소리의 다이내믹 범위를 좁히는 데 사용됩니다.<br>
+* Bitcrusher (비트크러셔): 소리의 해상도를 줄여 독특한 로파이(Lo-Fi) 음향을 만들어내는 효과입니다.<br>
+'''Tuna.js가 필요한 이유'''<br>
+* 편리한 인터페이스: Web Audio API를 사용할 때 저수준의 복잡한 코드를 직접 작성하지 않아도 됩니다. Tuna.js는 고수준의 API를 제공하여 오디오 효과를 직관적으로 다룰 수 있게 합니다.<br>
+* 간편한 오디오 효과 적용: Tuna.js는 다양한 오디오 효과를 간단한 설정만으로 적용할 수 있도록 합니다. 예를 들어, 코러스나 딜레이 같은 효과를 직접 Web Audio API로 구현하려면 복잡한 프로세싱 노드를 연결해야 하지만, Tuna.js를 사용하면 몇 줄의 코드로 이러한 효과를 적용할 수 있습니다.<br>
+* 확장 가능성: Tuna.js는 기본적으로 Web Audio API와 함께 작동하므로, 필요한 경우 Web Audio API의 다른 기능들과 결합해 더욱 복잡한 오디오 처리를 할 수 있습니다.<br>
+'''예시: Tuna.js 없이 코러스 효과를 구현하려면'''<br>
+Web Audio API만을 사용해 코러스 효과를 직접 구현하려면, 여러 개의 DelayNode와 OscillatorNode를 직접 설정하고 연결하는 등 복잡한 작업이 필요합니다. 하지만 Tuna.js를 사용하면, 단순히 Chorus라는 클래스를 사용해 효과를 적용하고 필요한 매개변수만 설정하면 됩니다.<br>
+'''결론'''
+Tuna.js는 Web Audio API를 사용하는 웹 개발자들이 복잡한 오디오 처리를 간편하고 직관적으로 할 수 있도록 도와주는 라이브러리입니다. 다양한 오디오 효과를 간단한 코드로 구현할 수 있기 때문에, 오디오를 다루는 웹 애플리케이션 개발에서 매우 유용하게 사용됩니다.<br>
+<br>
+===Soundboard===
+soundboard.js는 해당 코드에서 사용자 인터페이스(UI)와 오디오 프로세싱(Web Audio API와 Tuna.js)를 연결하는 스크립트 역할을 합니다. 쉽게 말해서, 사용자가 웹 페이지에서 오디오를 조작할 수 있도록 하는 논리를 담당하는 파일입니다.<br>
+'''Soundboard.js의 역할'''<br>
+* UI와 오디오 효과 연결:
+사용자가 슬라이더(볼륨, 팬, 효과의 매개변수 등)를 조작하거나 체크박스(효과 활성화)를 클릭하면, 이 변화가 오디오에 즉시 반영되어야 합니다.
+soundboard.js는 이러한 사용자 인터페이스(UI) 요소들과 Tuna.js 또는 Web Audio API가 제공하는 오디오 노드들을 연결하는 역할을 합니다. 즉, 슬라이더나 체크박스에서 발생한 입력을 해당 오디오 처리 노드의 매개변수에 반영하는 것입니다.
+* 데이터 연결:
+HTML 요소의 data-connect 속성들을 보면, 각 슬라이더나 체크박스가 어떤 오디오 노드 또는 효과와 연결되어 있는지 명시되어 있습니다. 예를 들어, data-connect="voice-volume" 속성은 이 슬라이더가 오디오 볼륨을 조절하는 역할을 한다는 의미입니다. 이런 연결을 해석하고 반영하는 로직이 soundboard.js에 포함되어 있습니다.<br>
+data-tuna-classname 속성은 Tuna.js의 특정 효과 클래스를 지정하는데, 이를 통해 Tuna.js의 코러스, 딜레이 같은 고급 오디오 효과를 활성화하고 매개변수를 조정할 수 있습니다.
+* 실시간 오디오 조작:
+사용자가 페이지 내에서 오디오 조작을 실시간으로 할 수 있도록 돕습니다. 예를 들어, 사용자가 볼륨 슬라이더를 조작하면 soundboard.js가 그 입력을 받아서 Web Audio API를 통해 실제 오디오의 볼륨을 즉시 변경합니다.
+마찬가지로, 코러스나 딜레이 같은 Tuna.js의 고급 오디오 효과가 활성화되면, 사용자가 효과 매개변수(예: 속도, 피드백)를 조절하는 것 역시 soundboard.js가 처리합니다.
+'''예시: 볼륨 슬라이더'''
+ vol: <input type="range" id="voice-volume" class="sb-gain" data-connect="voice-panner" min="0" max="50" value="1" step="0.01" />
+이 슬라이더는 오디오의 볼륨을 조절하는 역할을 하며, data-connect="voice-panner" 속성에 의해 볼륨 조정 후에는 패닝(panning) 효과와 연결됩니다.
+soundboard.js는 이 슬라이더의 변화를 감지하고, Web Audio API의 GainNode 또는 PannerNode를 통해 실시간으로 소리의 볼륨과 방향을 조절합니다.
+<br>
+'''왜 Soundboard.js가 필요한가요?'''<br>
+soundboard.js는 사용자와 웹 페이지의 오디오 처리 기능 사이의 중재자 역할을 합니다. 사용자가 UI 요소(슬라이더, 체크박스)를 통해 입력하는 값들이 실제로 Tuna.js나 Web Audio API의 오디오 처리에 반영될 수 있도록 연결해주는 필수적인 역할을 합니다. 이 없으면, 사용자 인터페이스에서 아무리 버튼이나 슬라이더를 조작해도 오디오에는 영향을 미치지 않게 됩니다.
+===왜 두 파일이 모두 필요한가요?===
+'''Tuna.js'''는 고급 오디오 효과를 추가하고, 이러한 효과를 쉽게 다룰 수 있게 만들어줍니다. 코러스, 딜레이, 페이저 등의 고수준 오디오 효과를 Tuna.js가 제공하므로, 이 파일이 없으면 이러한 기능을 구현하기 어려워집니다. <br>
+'''Soundboard.js'''는 UI와 오디오 처리 기능을 연결하는 로직을 담당합니다. 사용자가 슬라이더나 버튼을 조작할 때, 그 값들이 Tuna.js나 Web Audio API를 통해 오디오 효과에 적용되도록 해주는 역할을 합니다.<br>
+즉, Tuna.js는 오디오 효과들을 제공하고, Soundboard.js는 사용자의 입력을 처리하여 이 오디오 효과에 적용하는 연결 고리 역할을 합니다. 두 파일이 협력해야 완전한 오디오 조작 기능이 작동하게 되는 것이죠.