当前位置：首页 > VUE

vue实现电子琴

2026-02-22 16:34:32VUE

使用 Vue 实现电子琴

准备工作

安装 Vue.js 和相关的依赖。可以通过 Vue CLI 或直接引入 Vue 的 CDN 来创建项目。

npm install vue

创建电子琴组件

创建一个 Vue 组件来模拟电子琴的键盘界面。键盘通常由黑白键组成，每个键对应一个音符。

<template>
  <div class="piano">
    <div 
      v-for="(key, index) in keys" 
      :key="index" 
      class="piano-key" 
      :class="{ 'black': key.isBlack }"
      @mousedown="playSound(key.note)"
      @mouseup="stopSound(key.note)"
    >
      {{ key.note }}
    </div>
  </div>
</template>

定义键盘数据

在组件的 data 或 setup 函数中定义键盘的布局和音符。通常钢琴键盘由白键和黑键交替组成。

vue实现电子琴

data() {
  return {
    keys: [
      { note: 'C4', isBlack: false },
      { note: 'C#4', isBlack: true },
      { note: 'D4', isBlack: false },
      { note: 'D#4', isBlack: true },
      { note: 'E4', isBlack: false },
      { note: 'F4', isBlack: false },
      { note: 'F#4', isBlack: true },
      { note: 'G4', isBlack: false },
      { note: 'G#4', isBlack: true },
      { note: 'A4', isBlack: false },
      { note: 'A#4', isBlack: true },
      { note: 'B4', isBlack: false }
    ]
  }
}

播放和停止音符

使用 Web Audio API 或第三方库（如 Tone.js）来播放音符。以下是一个简单的实现：

methods: {
  playSound(note) {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const oscillator = audioContext.createOscillator();
    oscillator.type = 'sine';
    oscillator.frequency.value = this.getFrequency(note);
    oscillator.connect(audioContext.destination);
    oscillator.start();
    this.activeOscillators[note] = oscillator;
  },
  stopSound(note) {
    if (this.activeOscillators[note]) {
      this.activeOscillators[note].stop();
      delete this.activeOscillators[note];
    }
  },
  getFrequency(note) {
    const notes = {
      'C4': 261.63,
      'C#4': 277.18,
      'D4': 293.66,
      'D#4': 311.13,
      'E4': 329.63,
      'F4': 349.23,
      'F#4': 369.99,
      'G4': 392.00,
      'G#4': 415.30,
      'A4': 440.00,
      'A#4': 466.16,
      'B4': 493.88
    };
    return notes[note];
  }
}

样式设计

为电子琴键盘添加样式，区分黑白键并使其看起来像真实的钢琴键盘。

vue实现电子琴

.piano {
  display: flex;
  position: relative;
  height: 200px;
}

.piano-key {
  height: 100%;
  border: 1px solid #000;
  background: white;
  flex: 1;
  position: relative;
  cursor: pointer;
}

.piano-key.black {
  background: black;
  height: 60%;
  position: absolute;
  width: 50px;
  z-index: 1;
  margin-left: -25px;
}

响应键盘事件

为了让用户可以通过键盘按键来弹奏电子琴，可以监听键盘事件并映射到对应的音符。

mounted() {
  window.addEventListener('keydown', this.handleKeyDown);
  window.addEventListener('keyup', this.handleKeyUp);
},
beforeDestroy() {
  window.removeEventListener('keydown', this.handleKeyDown);
  window.removeEventListener('keyup', this.handleKeyUp);
},
methods: {
  handleKeyDown(event) {
    const keyMap = {
      'a': 'C4',
      'w': 'C#4',
      's': 'D4',
      'e': 'D#4',
      'd': 'E4',
      'f': 'F4',
      't': 'F#4',
      'g': 'G4',
      'y': 'G#4',
      'h': 'A4',
      'u': 'A#4',
      'j': 'B4'
    };
    if (keyMap[event.key]) {
      this.playSound(keyMap[event.key]);
    }
  },
  handleKeyUp(event) {
    const keyMap = {
      'a': 'C4',
      'w': 'C#4',
      's': 'D4',
      'e': 'D#4',
      'd': 'E4',
      'f': 'F4',
      't': 'F#4',
      'g': 'G4',
      'y': 'G#4',
      'h': 'A4',
      'u': 'A#4',
      'j': 'B4'
    };
    if (keyMap[event.key]) {
      this.stopSound(keyMap[event.key]);
    }
  }
}

使用 Tone.js 简化音频处理

Tone.js 是一个专业的 Web 音频框架，可以简化音频播放逻辑。

npm install tone

import * as Tone from 'tone';

methods: {
  playSound(note) {
    const synth = new Tone.Synth().toDestination();
    synth.triggerAttackRelease(note, '8n');
  }
}