纯 JS 给Web页面增加交互音效

先看作用

您能够狠狠地点击这里：鼠标hover按钮无中生有播映声音demo

点开上面的链接，会看到一个按钮，此刻点击按钮，然后再不断 hover 经过，就会有美好悦耳的音效呈现了。

而这个声音是硬件主动生成的，不是调用现成的mp3音频播映出来的。

换种说法便是：无需任何音频文件，只需要几行JS代码，我们就能让网页发出各种各样的腔调。

如何实现？

运用的是Web Audio API实现的，关键代码其实并不多，就这么点：

1.  window.AudioContext = window.AudioContext || window.webkitAudioContext;
2.  var audioCtx = new AudioContext();
3.  var oscillator = audioCtx.createOscillator();
4.  var gainNode = audioCtx.createGain();
5.  oscillator.connect(gainNode);
6.  gainNode.connect(audioCtx.destination);
7.  oscillator.type = 'sine';
8.  oscillator.frequency.value = 196.00;
9.  gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
10. gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
11. oscillator.start(audioCtx.currentTime);
12. gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
13. oscillator.stop(audioCtx.currentTime + 1);

如果看不懂，不要紧，拜访这里 ，有非常详细的解释。

好，希望本文的内容能够帮到你的学习。