API-интерфейс Web Audio: добавьте звук, подходящий для полосы пропускания, на вашу веб-страницу

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

Стоит отметить, что я протестировал это как в Chrome, так и в Firefox, поэтому вы должны использовать один из этих браузеров.

В oscillatorNodecontext.createOscillator()const oscillatorNode = context.createOscillator();


 type

Далее давайте настроим наш узел. Установите для его свойства 'sine'frequency.value150

 oscillatorNode.type = 'sine';
oscillatorNode.frequency.value = 150;

Чтобы воспроизвести нашу синусоидальную волну через наши динамики или наушники, вызовите oscillatorNode.connectcontext.destination Наконец, давайте вызовем oscillatorNode.startoscillatorNode.stopcontext.currentTime + 0.5 это остановит звук через 500 миллисекунд в соответствии с меткой времени аппаратного планирования нашего AudioContext's Наш метод playSound

 function playSound() {
  const oscillatorNode = context.createOscillator();

  oscillatorNode.type = 'sine';
  oscillatorNode.frequency.value = 150;

  oscillatorNode.connect(context.destination);
  oscillatorNode.start();
  oscillatorNode.stop(context.currentTime + 0.5);
}

После сохранения изменений и нажатия кнопки « Отправить» мы услышим звук уведомления.

Представляем GainNode

Само собой разумеется, это довольно броско. Почему бы не использовать узел эффектов, чтобы сделать этот звук более приятным? GainNode — один из примеров узла эффектов. Усиление является средством изменения амплитуды входного сигнала, и в нашем случае оно позволяет нам контролировать громкость аудиоисточника.

Под объявлением oscillatorNodegainNodecontext.createGain()

 const gainNode = context.createGain();

В конфигурации oscillatorNodegainNodegain.value Это будет воспроизводить звук на 30% от его первоначальной громкости:

 gainNode.gain.value = 0.3;

Наконец, чтобы добавить GainNodegainNodeoscillatorNode.connectgainNode.connectcontext.destination

 function playSound() {
  const oscillatorNode = context.createOscillator();
  const gainNode = context.createGain();

  oscillatorNode.type = 'sine';
  oscillatorNode.frequency.value = 150;

  gainNode.gain.value = 0.3;

  oscillatorNode.connect(gainNode);
  gainNode.connect(context.destination);

  oscillatorNode.start();
  oscillatorNode.stop(context.currentTime + 0.5);
}

После сохранения изменений и нажатия кнопки « Отправить» мы услышим, что наш звук звучит тише.

Смешивание вещей с AudioParam

Возможно, вы заметили, что для того, чтобы установить частоту нашего OscillatorNodeGainNodevalue Причина этого контракта заключается в том, что gainfrequencyAudioParam . Это интерфейс, который можно использовать для установки не только определенных значений, но и запланированных, постепенно меняющихся значений. AudioParam

• setValueAtTime
• linearRampToValueAtTime
• exponentialRampToValueAtTime В отличие от линейного изменения, которое является постоянным, экспоненциальное изменение будет увеличиваться или уменьшаться с большими приращениями по мере приближения планировщика к конечному времени. Это может быть предпочтительнее, так как звучит более естественно для человеческого слуха

Теперь мы будем экспоненциально увеличивать частоту и усиление. Чтобы использовать метод exponentialRampToValueAtTime Замените oscillatorNode.frequency.valueoscillatorNode.frequency.setValueAtTime Передайте ту же частоту 150context.currentTime

 oscillatorNode.frequency.setValueAtTime(150, context.currentTime);

 oscillatorNode.frequency.exponentialRampToValueAtTime(500, context.currentTime + 0.5);

 gainNode.gain.setValueAtTime(0.3, context.currentTime);

 function playSound() {
  const oscillatorNode = context.createOscillator();
  const gainNode = context.createGain();

  oscillatorNode.type = 'sine';
  oscillatorNode.frequency.setValueAtTime(150, context.currentTime);
  oscillatorNode.frequency.exponentialRampToValueAtTime(500, context.currentTime + 0.5);

  gainNode.gain.setValueAtTime(0.3, context.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, context.currentTime + 0.5);

  oscillatorNode.connect(gainNode);
  gainNode.connect(context.destination);

  oscillatorNode.start();
  oscillatorNode.stop(context.currentTime + 0.5);
}

 oscillatorNode.start();
oscillatorNode.stop(context.currentTime + 0.5);
oscillatorNode.start(context.currentTime + 0.5);
oscillatorNode.stop(context.currentTime + 1);