vue小项目之钢琴

今天带大家做一个vue小项目——一个可以弹奏的钢琴。

下面是效果图

项目地址： github and gitee

首先我们用vite创建项目：npm create vite@latest 选择vue3+TypeScript

启动项目后，通过 npm install @types/node less -D 下载这两个包

然后在项目根目录的vite-env.d.ts文件中加入以下配置

declare module '*.vue' {
    // 引入vue模块中ts的方法
    import type { DefineComponent } from 'vue'
    // 定义vue组件以及类型注解
    const component: DefineComponent<{}, {}, any>
    export default component
}  

在tsconfig.json的"compilerOptions"对象中加入以下配置

"baseUrl": "./",
        "paths": {
            "@": ["src"],
            "@/*": ["src/*"]
        }

在vite.config.js中配置

import { defineConfig } from 'vite'
import { resolve } from "path"
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [vue()],
  // 配置根路径
  resolve: {
    // ↓路径别名，主要是这部分
    alias: {
      "@": resolve(__dirname, "./src")
    }
  }
})

这样后续使用@代替“./src”路径导入其他组件或ts文件就不会报错了

组件一共两个钢琴黑键‘blackKey.vue’,钢琴白健‘whiteKey.vue’ 用css绘制两个矩形按键然后v-for循环调整就可以了

对于如何使钢琴按键发出相应的声音，我们知道钢琴一共88个键，每个键他都有相应的振动频率，对应的表我们可以查到：

在src/public/data.ts里面是我整理好的键位-频率数据，具体实现大家可以clone上面地址中的项目观看，导出的数据如下，每组中key是键名，带‘#’号的是黑键，value是这个键对应的频率

接下来我们可以使用 Web Audio API 创建一个音频上下文，通过传入对应的频率使其发出相应的音调 具体api我们可以看mdn介绍：链接

我们最后只要在每个按键点击的时候调用utils/index.ts导出的createKey方法传入相应的频率就行了。 内容其实并不多，所以讲的还是比较粗浅，具体实现请大家clone项目看看吧，有什么想法欢迎交流，谢谢大家！