HTML5 Web Audio Api－2 发声oscillator

（Web Audio Api基础信息整理中，到时候补上）

oscillator的意思是振荡器，众所周知，声音就是物体振动产生的声波。

在Web Audio Api中，官方给我们提供了一个振荡器需要用createOscillator去初始。

当然光有一个振荡器也是不行的，我们需要一个介质将声音传送出去，在Web Audio Api中，我们有个觉destination的变量，他就是我们的“播放器”

使用oscillator.connect(context.destination);去连接。

相同的我们也可以用oscillator.disconnetc();去解除连接关系

因为有振动，所以就有频率。

oscillator.frequency.value 就是这个音节频率的参数，单位是hz

好了长话短说上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.button {margin-left: auto;margin-right: auto;width: 40%;height: 50px;background-color: aqua;border-radius: 5px;text-align: center;line-height: 50px;}</style>
</head>
<body>
<div οnclick="makeNoise()" class="button">点击发声</div>
<script type="application/javascript">var AudioContext=AudioContext||webkitAudioContext,context=new AudioContext,canClick = true,timeOut;function makeNoise(){if (canClick){canClick = false;var oscillator = context.createOscillator();oscillator.connect(context.destination);oscillator.frequency.value = 500;oscillator.start(0);setTimeout(function(){oscillator.disconnect();clearTimeout(timeOut);canClick = true;},1500)}}
</script></body>
</html>

注：我默认了浏览器支持AudioContext

效果就是播放500hz的声波1.5秒钟

HTML5 Web Audio Api－2 发声oscillator相关推荐

利用HTML5 Web Audio API给网页JS交互增加声音
转自张鑫旭老师博客原文地址一.庞然的HTML5 Web Audio API 首先务必要弄清这一点,本文这里所说的HTML5 Web Audio API和HTML5 元素完全不是一个东西,其体量也完 ...
html5 audio api 录音,如何使用HTML5 Web Audio API录制我的声音
在webkit浏览器上,您可以将 get user media api与webkitGetUserMedia一起使用 – 如 html5rocks所示. 如果你想用你的声音来创建javascript事 ...
Web Audio API 入门1
将吉他和效果器(effect pedal 比如失真效果器)链接,然后将效果器和放大器(amplifier)链接,最后将放大器和音响(speaker)连接,既:吉他-效果器–放大器-音响 Web Aud ...
【Web】1326- 深入浅出 Web Audio API
前言 2011被提出,同年草案被Google Chrome和Mozilla Firefox实现在此之前Web音频较为原始,无法应付较为复杂的应用场景,例如Web游戏或互动应用旨在提供全套Web音频 ...
ASP.NET Core环境Web Audio API+SingalR+微软语音服务实现web实时语音识别
处于项目需要,我研究了一下web端的语音识别实现.目前市场上语音服务已经非常成熟了,国内的科大讯飞或是国外的微软在这块都可以提供足够优质的服务,对于我们工程应用来说只需要花钱调用接口就行了,难点在于整 ...
webrtc 语音流java_Web语音处理 - Web Audio API WebRTC
概述很多设备都具备native的语音输入功能,并提供App来提供语言录入等功能.如果你想开发一些语言应用,那么针对不同的设备平台,包括desktop和移动设备如ios.android,你可能需要使用 ...
web audio api_带有Web Audio API的动态声音
web audio api This article is part of a web dev series from Microsoft. Thank you for supporting the ...
html5audio音频自动缓冲,HTML5网络音频卡住了（缓冲问题？）(HTML5 web audio getting stuck (buffering issue?))...
HTML5网络音频卡住了(缓冲问题?)(HTML5 web audio getting stuck (buffering issue?)) 我正在制作一个(每周广播节目)音频网站,我一直遇到同样的问题 ...
如何使用Web Audio API听到“ Yanny”和“ Laurel”的声音
by _haochuan 通过_haochuan 如何使用Web Audio API听到" Yanny"和" Laurel"的声音 (How you can h ...

HTML5 Web Audio Api－2 发声oscillator

HTML5 Web Audio Api－2 发声oscillator相关推荐

最新文章

热门文章