javascript - 在JavaScript中，是否可以将音频输入作为事件监听器？ (构想)

Question

在过去的几周里，我一直在想一个主意。我非常认真地意识到这个概念，但是我完全不知道如何实现。在解释什么是主意时，我将分享一些想法。
我们有网站。他们中大多数人反应灵敏。
什么是responsive web design？
总的来说，响应式网页设计意味着设计和开发应基于屏幕尺寸，平台和方向来响应用户的行为和环境。如果更改窗口大小，则我的网站应相应更改其尺寸。
如果我缩放屏幕上的某些对象，则网站应相应地重新排列/重新缩放。
这很好，但是没有什么令人兴奋的(如今!)。
我再一次被屏幕及其内部发生的一切所困扰，以至于我在室外所做的事情似乎仍然是非常外部的并且不是无缝的。除了我与鼠标/键盘的接触外，我不知道与屏幕内发生的事情进行通讯的其他方法。我的屏幕体验仍然是非常外部的功能，无法与我的认知完美融合。我认为这也是为什么我的计算机始终是一台计算机，并且不会表现出人体的自然延伸的原因。
我在玩弄一个我不知道如何实现的主意。我有一个基本的想法，但我需要从那些对此深深着迷的人那里获得一些技术/设计帮助。
这个想法很简单:使屏幕更具响应性，但是这次无需使用鼠标或任何此类输入设备。所有笔记本电脑和大多数台式机都带有麦克风。如何使用这种小型设备进行输入？
让我解释:
想象一下，一个网站，当您在屏幕上吹气时，屏幕图标会重新出现。吹口哨时，您喜欢的播放列表上的歌曲会改变。
假设您在屏幕上有一个动画树。当您向其吹气时，那棵树就会掉下叶子。脱落取决于您吹多快。有一个小主意？
让我放一些图形(请参阅本段后的超链接)，我认为它将做得更好。我计划制作一个网站/ API，其中有人盯着你。如果您从屏幕的右侧吹气，她的头发就会移到左侧。如果从左侧吹空气，则她的头发向右侧吹。如果吹弱，她的头发就会散落。吹口哨，有些顽皮的东西:屏幕上的角色眨眨眼，或者说抛出令人作呕的表情-随便什么。
整个概念是，网络的每个元素都必须与坐在屏幕外部的用户直接相关。如果我的口哨声，吹口哨甚至是打喷嚏之类的事情都能对网站有所帮助，它将为网站架构带来很多真实感!我没有被约束在鼠标或键盘上，以引起注意。这样是否可以减轻用户的大量认知负担呢？
看到这张图片:http://imgur.com/mg4Whua
现在谈到我需要指导的技术方面。
如果要使用JavaScript构建常规的响应式网站，则可以使用addeventhandler(“Click”，Animate)或addeventhandler(“resize”，Animate)-之类的方法。在这里，我希望事件处理程序是来自麦克风的音频输入。另外，我需要知道音频的来源位置，以便我可以确定头发必须落在哪一侧并播放该动画。
因此，在麦克风的180/360度范围内，我不仅需要捕捉音频，而且还需要捕捉可以播放正确动画的 Angular 。如果在我吹牛的地方播放相同的动画，那将是一次失败的失败。它需要具有现实主义的元素。
我四处询问，有人建议我尝试HTML5的WebRTC。我仍在查看是否可行，否则还有其他选择吗？我猜Processing是其中之一。有人处理过它的音频功能吗？
在研究这种想法可能带来的巨大可能性之前，我想先构建一个简单的原型(prototype)。但是，如果您有一些很棒的想法，请告诉我。令人兴奋的想法是一回事，而令人兴奋的实现则完全是另一回事。我们都想要。
已经有这样的网站吗？这方面有什么工作吗？
任何小小的指导都很重要!

Answer 1

有很多方法可以创建自己的事件。大多数库都有一些内置的方法。基本上，您是在谈论observer pattern，这是一篇很好的文章，对它进行了更详细的说明:https://dottedsquirrel.com/javascript/observer-pattern/
同样，就听音频而言，在输入信号上使用分析器节点(AnalyserNode)和一些巧妙的代码来确定声音就是您想要听的声音，使用上述自定义事件触发事件是小菜一碟。
但是，在深入探讨这些因素之前，先确定声音的 Angular ？我认为那是不可能的。您也许可以在“2d”范围内确定声音原点的 Angular ，但是肯定不会给您一个 Angular 。我认为您需要比简单的立体声麦克风设置更巧妙的方法来确定 Angular 。