纯 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);
如果看不懂,没关系,访问 这里 ,有非常详细的解释。
好,希望本文的内容可以帮到你的学习。
转载自:https://juejin.cn/post/7174065297061019656