先看作用

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

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

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

而这个声音是硬件主动生成的,不是调用现成的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);

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

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