你有没有在乐团热身的时候敲过水杯？
玻璃杯装不同量的水，敲下去的声音都不一样。水越少，声音越高。这个现象，其实就是物理：水量影响震动频率。
你可能以为这种“敲什么像什么”的游戏，要靠专业设备才能做出来。
其实不用。一个 HTML 文件、浏览器，还有你的电脑麦克风，就够了。
这是什么
一个免安装的浏览器互动玩具。你对着麦克风敲水杯，系统实时判断声音落在哪个音高区间，画面跟着变色、动画跳动，声音马上变成视觉。
原理：浏览器里的耳朵
浏览器给了我们 getUserMedia 这个功能。它可以叫浏览器去打开你电脑或手机的麦克风，然后实时把声音变成数字数据流。
拿到数据流之后，我们用“快速傅立叶变换”把声音拆开，看里面有哪些频率。
三个杯子，各装不同的水量，敲下去，画面就告诉你：这是低音、中音、还是高音。
完整范例：只要一个 HTML 文件
把以下内容存成 glass.html，用浏览器打开就能玩：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>敲水杯奏音乐</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 40px; transition: background 0.3s; }
#start { padding: 12px 24px; font-size: 18px; cursor: pointer; }
#zone { font-size: 48px; font-weight: bold; margin: 30px; color: #fff; }
.hint { color: #888; margin-top: 20px; }
</style>
</head>
<body>
<h1>敲水杯奏音乐</h1>
<button id="start">开启麦克风</button>
<div id="zone">—</div>
<p class="hint">装不同量水的三个杯子，敲敲看</p>
<script>
const startBtn = document.getElementById免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
