编码的很棒的事情是有无限的可能性。每个人都有一些编码。在我发现编码之前，我的一种激情是音乐。因此，自然而然地，我一直对如何将这两件事合并在一起。最近，我一直在阅读有关网络音频API的信息。这是一个JavaScript API，用于处理和合成Web应用程序中的音频。此API的目的是重现大多数音频生产应用程序中发现的功能，但可以用于视频游戏音频和声音效果等其他事物。今天，我将使用HTML，CSS和JavaScript构建一个简单的振荡器，以显示Web Audio API可以做什么。

首先，我将在我的HTML身体内部创建一个简单的按钮元素，以便我们可以单击并创建声音。我们还将有一个滑块，可以增加和降低声音的音高。

<button id="osc"></button>

<input type="range" id="oscPitch" min="50" max="500" step="1" value="90">

非常简单！尽管没有必要

#osc {  
  background-color:aqua;  
  width: 200px;  
  height: 200px;  
}

在该代码之后，这是按钮和幻灯片的样子。

现在很有趣！为了使我们使用Web Audio API做任何事情，我们需要在JavaScript中创建AudioContext的实例。这就是赋予我们API的所有功能和功能的原因。我们将创建两个变量一个来创建音频上下文，一个在我们的html中获取振荡器按钮。

const context = new AudioContext(); //allows access to webaudioapi  
const osc = document.querySelector('#osc'); //grabs the button

接下来，我们将创建一个函数，只要持续一个按钮，就会发出声音。为此，我们需要在功能内部创建一个振荡器，并为其分配波形类型和频率。大多数合成器都使用四种波形类型来发出声音。它们被称为正弦波，三角形波，正方形/脉冲波和锯波。这些波具有不同的声音特性。锯浪的音调刺耳，正弦波具有更多的柔和的音调。阅读有关振荡器波形here的更多信息。让我们继续构建此功能。

osc.onmousedown = function() {

  let oscPitch = document.querySelector('#oscPitch').value; //assigning the value of the slider to a variable

  oscillator = context.createOscillator(); //creates oscillator

  oscillator.type = "sine"; //chooses the type of wave

  oscillator.frequency.value = oscPitch; //assigning the value of oscPitch to the oscillators frequency value

  oscillator.connect(context.destination); //sends to output

  oscillator.start(context.currentTime) //starts the sound at the current time

}

在此代码中，我使用了正弦波，但是您可以尝试任何其他波形。标准值是正弦，锯齿或三角形。尝试一下，以便您可以听到差异。我还使用了振荡器上的连接方法。这将振荡器连接到目的地。将其视为将振荡器连接到计算机扬声器。然后，我们使用启动方法启动振荡器声音，并指定应在当前时间开始。

您可能会注意到，一旦单击声音，声音就不会停止。好吧，我们必须创建一个函数，该功能一旦抬高鼠标按钮，就会断开振荡器。这是一个看起来像这样的非常简单的功能。

osc.onmouseup = function() {  
  oscillator.disconnect() //disconnects the oscillator  
}

全部完成了！这只是在Web Audio API上刮擦表面。我将发布有关网络音频API和其他音频/编程相关的内容的更多信息，我对它们的了解越多。尝试添加更多振荡器！愉快的编码！ð