HTML5 Web Audio Api－2 发声oscillator

最新推荐文章于 2021-09-09 18:34:18 发布

置顶 Daniel_SYR

最新推荐文章于 2021-09-09 18:34:18 发布

阅读量509

点赞数 1

分类专栏： web Audio Api

本文链接：https://blog.csdn.net/qq_29426997/article/details/52608546

版权

web Audio Api 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

（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秒钟

Daniel_SYR

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Web Audio Api－2 发声oscillator

（Web Audio Api基础信息整理中，到时候补上）oscillator的意思是振荡器，众所周知，声音就是物体振动产生的声波。在Web Audio Api中，官方给我们提供了一个振荡器需要用createOscillator去初始。当然光有一个振荡器也是不行的，我们需要一个介质将声音传送出去，在Web Audio Api中，我们有个觉destination的变量，他就是我们的“播放
复制链接

扫一扫

专栏目录