纯 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);

如果看不懂，没关系，访问 这里 ，有非常详细的解释。

好，希望本文的内容可以帮到你的学习。