vue小项目之钢琴

2023-03-11 11:37| 来源: 网络整理| 查看: 265

今天带大家做一个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 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项目看看吧，有什么想法欢迎交流，谢谢大家！

【本文地址】

公司简介

联系我们