Чтобы сделать элементы управления, нам нужно создать какую-то страницу.
Вот весь код, который мы получили из последнего раздела. Вставьте его в пустой текстовый файл, сохраненный как 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 }
Вы должны услышать изменение бинаурального ритма при обновлении частот. По мере того, как две частоты отдаляются друг от друга, колебание ускоряется. И он замедляется по мере сближения частот.
Далее: Веб-страница