播放聲音頻率 HTML5 Web Audio API

之前在讀書時，誤打誤撞選擇選修科時，選譯了音樂欣賞
最後音樂就不太懂得欣賞，反而增加對聲音的興趣，便尋找更多關於聲音的資料
發現並開始學習使用 HTML5 Web Audio API



在試用 HTML5 Web Audio API 前，需要先了解一些基本的聲音概念及技術
樂理音譜有8度共12律：

• C
• C^# / D^b
• D
• D^#/ E^b
• E
• F
• F^#/ G^b
• G
• G^#/ A^b
• A
• A^#/ B^b
• B

12個現今常用的音標名稱
根據 十二平均律 Equal temperament 單音倍率為 2^(n / 12)
以 Middle A 為 440 Hz，所以頻率換算方程式為 440 * 2^(n / 12) ，當 n = 0 時，就是 Middle A
因此可以以 88鍵鋼琴 作為基礎，計算出每個琴鍵對應的頻率

音標名稱	Midi值(十進制)	Midi值(十六進制)	n	頻率
A0	21	15	-48	27.500000000000
A#0 / Bb0	22	16	-47	29.135235094881
B0	23	17	-46	30.867706328508
C1	24	18	-45	32.703195662575
C#1 / Db1	25	19	-44	34.647828872109
D1	26	1A	-43	36.708095989676
D#1 / Eb1	27	1B	-42	38.890872965260
E1	28	1C	-41	41.203444614109
F1	29	1D	-40	43.653528929126
F#1 / Gb1	30	1E	-39	46.249302838954
G1	31	1F	-38	48.999429497719
G#1 / Ab1	32	20	-37	51.913087197493
A1	33	21	-36	55.000000000000
A#1 / Bb1	34	22	-35	58.270470189761
B1	35	23	-34	61.735412657016
C2	36	24	-33	65.406391325150
C#2 / Db2	37	25	-32	69.295657744218
D2	38	26	-31	73.416191979352
D#2 / Eb2	39	27	-30	77.781745930520
E2	40	28	-29	82.406889228218
F2	41	29	-28	87.307057858251
F#2 / Gb2	42	2A	-27	92.498605677909
G2	43	2B	-26	97.998858995437
G#2 / Ab2	44	2C	-25	103.826174394986
A2	45	2D	-24	110.000000000000
A#2 / Bb2	46	2E	-23	116.540940379522
B2	47	2F	-22	123.470825314031
C3	48	30	-21	130.812782650299
C#3 / Db3	49	31	-20	138.591315488436
D3	50	32	-19	146.832383958704
D#3 / Eb3	51	33	-18	155.563491861040
E3	52	34	-17	164.813778456435
F3	53	35	-16	174.614115716502
F#3 / Gb3	54	36	-15	184.997211355817
G3	55	37	-14	195.997717990875
G#3 / Ab3	56	38	-13	207.652348789973
A3	57	39	-12	220.000000000000
A#3 / Bb3	58	3A	-11	233.081880759045
B3	59	3B	-10	246.941650628062
C4 (Middle C)	60	3C	-9	261.625565300599
C#4 / Db4	61	3D	-8	277.182630976872
D4	62	3E	-7	293.664767917408
D#4 / Eb4	63	3F	-6	311.126983722081
E4	64	40	-5	329.627556912870
F4	65	41	-4	349.228231433004
F#4 / Gb4	66	42	-3	369.994422711634
G4	67	43	-2	391.995435981749
G#4 / Ab4	68	44	-1	415.304697579945
A4 (Middle A)	69	45	0	440.000000000000
A#4 / Bb4	70	46	1	466.163761518090
B4	71	47	2	493.883301256124
C5	72	48	3	523.251130601197
C#5 / Db5	73	49	4	554.365261953744
D5	74	4A	5	587.329535834815
D#5 / Eb5	75	4B	6	622.253967444162
E5	76	4C	7	659.255113825740
F5	77	4D	8	698.456462866008
F#5 / Gb5	78	4E	9	739.988845423269
G5	79	4F	10	783.990871963499
G#5 / Ab5	80	50	11	830.609395159890
A5	81	51	12	880.000000000000
A#5 / Bb5	82	52	13	932.327523036180
B5	83	53	14	987.766602512248
C6	84	54	15	1046.502261202390
C#6 / Db6	85	55	16	1108.730523907490
D6	86	56	17	1174.659071669630
D#6 / Eb6	87	57	18	1244.507934888320
E6	88	58	19	1318.510227651480
F6	89	59	20	1396.912925732020
F#6 / Gb6	90	5A	21	1479.977690846540
G6	91	5B	22	1567.981743927000
G#6 / Ab6	92	5C	23	1661.218790319780
A6	93	5D	24	1760.000000000000
A#6 / Bb6	94	5E	25	1864.655046072360
B6	95	5F	26	1975.533205024500
C7	96	60	27	2093.004522404790
C#7 / Db7	97	61	28	2217.461047814980
D7	98	62	29	2349.318143339260
D#7 / Eb7	99	63	30	2489.015869776650
E7	100	64	31	2637.020455302960
F7	101	65	32	2793.825851464030
F#7 / Gb7	102	66	33	2959.955381693080
G7	103	67	34	3135.963487853990
G#7 / Ab7	104	68	35	3322.437580639560
A7	105	69	36	3520.000000000000
A#7 / Bb7	106	6A	37	3729.310092144720
B7	107	6B	38	3951.066410048990
C8	108	6C	39	4186.009044809580

function getFrequencies(){
    var baseFrequency = 440;
    var frequencyNames = ["A0", "As0", "B0", "C1", "Cs1", "D1", "Ds1", "E1", "F1", "Fs1", "G1", "Gs1", "A1", "As1", "B1","C2", "Cs2", "D2", "Ds2", "E2", "F2", "Fs2", "G2", "Gs2", "A2", "As2", "B2", "C3", "Cs3", "D3", "Ds3", "E3", "F3", "Fs3", "G3", "Gs3", "A3", "As3", "B3", "C4", "Cs4", "D4", "Ds4", "E4", "F4", "Fs4", "G4", "Gs4", "A4", "As4", "B4", "C5", "Cs5", "D5", "Ds5", "E5", "F5", "Fs5", "G5", "Gs5", "A5", "As5", "B5", "C6", "Cs6", "D6", "Ds6", "E6", "F6", "Fs6", "G6", "Gs6", "A6", "As6", "B6", "C7", "Cs7", "D7", "Ds7", "E7", "F7", "Fs7", "G7", "Gs7", "A7", "As7", "B7", "C8"];
    var frequencies = {};
    for (var i in frequencyNames){
        frequencies[frequencyNames[i]] = baseFrequency * Math.pow(2, (i - 48) / 12);
    }
    return frequencies;
}

便可以隨時獲得音標頻率

獲得音標頻率開始了解 HTML5 Web Audio API
使用 HTML5 Web Audio API ，需要建立 AudioContext(音訊內容) 物件，但 AudioContext 未統一建立方法
一些瀏覽器需要使用 webkitAudioContext ，因此建立使用

var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();

確保不同瀏覽器的都能建立 AudioContext

1. 聲音來源 (Audio Source)
2. 處理器 (Processor) ，非必要
3. 輸出目的地 (Output Destination)

要令聲音輸出最簡單就是載入來源並選擇目的地輸出，不需要任何加工

最簡單的聲音來源可以透過 HTMLAudioElement 建立 或 Oscillator (振湯器) 產生

HTMLAudioElement 就很簡單，建立 HTMLAudioElement 再設定 src

var audio = new window.Audio();
audio.src = "/path/of/audio";

Oscillator 則有多種設定內容

Oscillator.type 有四種，預設為 sine

• sine (正弦波) ，預設種類，聲音比較柔和
• square (方波) ，只有高音或低音頻率，非常吵耳
• triangle (三角波) ，與 sine 類似，但比較響亮
• sawtooth (鋸齒波) ，與 sqaure 類似，有反覆振盪感覺，連腦都一同振盪的感覺

Oscillator.detune.value 能夠微調各種頻率聲音
數值越大頻率越高， detune 能夠設定為負數，越小頻率越低，預設為 0

Oscillator.frequency.value 就是振盪時頻率的聲音
預設為 440 ，即是 Middle A 的頻率

var oscillator = audioContext.createOscillator();
oscillator.type = "sine";
oscillator.detune.value = 0;
oscillator.frenquency.value = 440;

兩者完成設定後都使用 connect 連接到 audioCotext.destination

audio.connect(audioContext.destination);

oscillator.connect(audioContext.destination);

由於 Oscillator 及 HTMLAudioElement 都實作了 AudioNode 的 start() 及 stop() 功能，連接後可以使用

/*
設定 Oscillator 在執行 0 秒後開始，預設為 0
*/
oscillator.start(0);
/*
設定 Oscillator 在執行 1 秒結果，預設為 0
*/
oscillator.stop(1);

除了聲音來源，還有不同的處理器

• Gain (增益)
  

  var gain = audioContext.createGain();
  /*
  1 為 100% 音量， 0 即係沒有音量
  但在下認為 1 非常響亮，因此使用 0.1
  */
  gain.gain.value = 0.1;
  oscillator.connect(gain);
  gain.connect(audioContext.destination);

• Delay (延遲)
  

  var delay = audioContext.createDelay();
  /*
  延遲 1 秒，可以使用小數
  */
  delay.delayTime.value = 1;
  oscillator.connect(delay);
  delay.connect(audioContext.destination);

簡單例子

• Javascript
  

  function change(){
      document.getElementById("showFrequency").value = document.getElementById("frequency").value;
      document.getElementById("showDetune").value = document.getElementById("detune").value;
      document.getElementById("showGain").value = document.getElementById("gain").value;
  }
  
  function test(element){
      var AudioContext = window.AudioContext || window.webkitAudioContext;
      if (AudioContext){
          element.disabled = true;
          var audioContext = new AudioContext();
          var gain = audioContext.createGain();
          gain.gain.value = document.getElementById("gain").value;
          var oscillator = audioContext.createOscillator();
          oscillator.addEventListener("ended", function(){
              element.disabled = false;
          });
          oscillator.type = document.getElementById("type").value;
          oscillator.frequency.value = document.getElementById("frequency").value;
          oscillator.detune.value = document.getElementById("detune").value;;
          oscillator.connect(gain);
          gain.connect(audioContext.destination);
          oscillator.start(0);
          oscillator.stop(1);
      }
  }

• HTML
  

  <table border="1" width="95%">
      <colgroup> 
          <col width="40"/> 
      </colgroup> 
      <tbody>
          <tr valign="top">
              <td>波紋</td>
              <td><select id="type">
                  <option value="sine">Sine</option>
                  <option value="square">Square</option>
                  <option value="triangle">Triangle</option>
                  <option value="sawtooth">Sawtooth</option>
              </select></td>
          </tr>
          <tr valign="top">
              <td>頻率</td>
              <td>
                  <input id="frequency" type="range" min="0" max="4200" step="1" value="440" style="width: 400px;" oninput="change();"/>
                  <input id="showFrequency" type="text" value="440" style="width: 40px;" readonly="true"/>
              </td>
          </tr>
          <tr valign="top">
              <td>音調</td>
              <td>
                  <input id="detune" type="range" min="-1000" max="1000" step="1" value="0" style="width: 400px;" oninput="change();"/>
                  <input id="showDetune" type="text" value="0" style="width: 40px;" readonly="true"/>
              </td>
          </tr>
          <tr valign="top">
              <td>增幅</td>
              <td>
                  <input id="gain" type="range" min="0" max="1" step="0.01" value="0.1" style="width: 400px;" oninput="change();"/>
                  <input id="showGain" type="text" value="0.1" style="width: 40px;" readonly="true"/>
              </td>
          </tr>
          <tr valign="top">
              <td colspan="2">
                  <input type="button" value="播放" onclick="test(this);"/>
              </td>
          </tr>
      </tbody> 
  </table>

• 效果
  警告：
  播放時，請先將閣下電腦的音量調低，避免影響聽覺
  如果閣下有曾經因為聽到頻率產生頭暈、想嘔的感覺
  閣下便不要播放測試頻率
  

  波紋	Sine Square Triangle Sawtooth
  頻率
  音調
  增幅