Чтобы сделать элементы управления, нам нужно создать какую-то страницу.

Вот весь код, который мы получили из последнего раздела. Вставьте его в пустой текстовый файл, сохраненный как index.html, а затем откройте его в браузере.

<html>
  <head>
    <!-- Javascript side -->
    <script>
      //Channel 1
      const channel1 = new (window.AudioContext || window.webkitAudioContent) ();

      //Channel 2
      const channel2 = new (window.AudioContext || window.webkitAudioContent) ();

      //Tone 1
      const osc1 = channel1.createOscillator() //default frequency is 440HZ

      //Tone 2
      const osc2 = channel2.createOscillator()
      osc2.frequency.value = 435

      //Channel 1 Left Stereo
      const leftStereo = new StereoPannerNode(channel1)
      leftStereo.pan.value = -1 // -1 left side, 0 balanced, 1 right side

      //Channel 2 right Stereo
      const rightStereo = new StereoPannerNode(channel2, { pan: 1}) //shortcut: set pan in creation options

      //Plug the 1st tone into left stereo, and then out channel 1
      osc1.connect(leftStereo).connect(channel1.destination)

      //Plug the 2nd tone into right stereo, and then out channel 2
      osc2.connect(rightStereo).connect(channel2.destination)

      //Start tones
      osc1.start()
      osc2.start()
    </script>
  </head>

  <!-- HTML side -->
  <body>
  </body>
</html>

Вы, наверное, еще ничего не слышите. Если вы откроете консоль, вы, вероятно, увидите ошибку, подобную приведенной ниже.

Технически AudioContext запустился. Он только что был приостановлен, и для его возобновления требуется жест пользователя, например нажатие кнопки.

На стороне HTML добавьте кнопку возобновления и кнопку паузы.

<!-- HTML side -->
<body>
  <button onclick="resume()">Resume</button>
  <button onclick="pause()">Pause</button>
</body>

Затем добавьте код для него обратно на стороне Javascript.

//FUNCTIONS

//Resume
function resume() {
  channel1.resume()
  channel2.resume()
}

//Pause
function pause() {
  channel1.suspend()
  channel2.suspend()
}

Теперь вы должны услышать звуковые сигналы после нажатия кнопки «Возобновить».

Последние элементы управления, которые мы сейчас добавим, — это по одному для каждого тона, чтобы изменить любую из их частот.

Снова на стороне HTML…

<!-- HTML side -->
<body>
  <div>
    <button onclick="resume()">Resume</button>
    <button onclick="pause()">Pause</button>
  </div>
  <div>
    <input id="leftStereo" type="number" value=440 onchange="updateLeftStereo()" />
    <input id="rightStereo" type="number" value=435 onchange="updateRightStereo()" />
  </div>
</body>

И снова добавьте функции на стороне Javascript.

//Update left stereo (channel 1's tone)
function updateLeftStereo() {
  const val = document.getElementById("leftStereo").value
  osc1.frequency.value = val
}

//Update right stereo (channel 2's tone)
function updateRightStereo() {
  const val = document.getElementById("rightStereo").value
  osc2.frequency.value = val
}

Вы должны услышать изменение бинаурального ритма при обновлении частот. По мере того, как две частоты отдаляются друг от друга, колебание ускоряется. И он замедляется по мере сближения частот.

Далее: Веб-страница