关于本次项目的简略介绍：

大体分为硬件端和软件端，硬件端包括：esp32在面包板上的连接，画pcb电路图，焊接调试pcb电路，最后用三维设计外壳。软件端包括：用python编写的后端服务器，页面展示的客户端。（本项目要用到有关乐理知识）

我们的项目总的流程图

文字描述：esp32硬件先连接WiFi，蓝灯亮了表示连接成功，不亮就用蜂鸣器发声，亮的话，esp32的琴键摁下将对应摁键通过udp通讯发送到服务端，服务端收到udp信息可以利用pygame发声，也可以通过服务端和前端的websocket连接，将信息发送到前端，前端收到信息，去实现对应的琴键变颜色，记录简谱。

还可以通过前端的琴键摁下，让服务端的pygame发声，并变颜色和记录简谱。

拓展部分：1.作弊模式：硬件摁下一个摁键，不管硬件摁下哪个按键，都发出前端已经规定好的音谱。

软件端要达到的效果如下：

一后端（thonny）

1.使esp32发出不同的声音

2.esp32发声（奏乐）

2.录制esp32发音，判断摁键摁下的长短

3.利用pygame发声

4.用udp连接使服务器和硬件建立联系，硬件摁下琴键服务端收到udp信息，发出对应的音调

5.esp32的WiFi连接

二前端（vscode）

1.在页面绘制UI琴键

2.构建电子琴结构

3.服务端和前端建立websocket连接

4.硬件发送udp向服务端，服务端收到信息通过websocket连接发送到前端

以下是拓展部分：

1.开启作弊模式

2.切换上一首下一首，清除页面前一个音符，清空页面全部音符

3.播放音乐

硬件端要达到的效果如下：

1.esp32在面包板上的连接

2.画pcb电路图

3.pcb电路板的焊接

4.三维模型的设计打印

最终三维打印，前端页面优化以及乐器多重奏：

1.前端优化

2.三维设计，pcb焊接，锂电池的供电

3.硬件的调试（按定义好的音调奏乐）

“坚持就是胜利”

------------------------------------------------------------------------------

在动手做之前我们应该了解基本乐理知识：音乐基础乐理知识大全 | 乐理知识 - 知乎 (zhihu.com)

在发音之前我们一个了解蜂鸣器有关知识：蜂鸣器原理 - 单片机教程 - C语言网 (dotcpp.com)

ESP32 MicroPython上手指南 — MicroPython 1.14 文档 (01studio.org)esp32官网：ESP32 MicroPython上手指南 — MicroPython 1.14 文档 (01studio.org)

了解面包板：(4条消息) 面包板使用简介_countofdane的博客-CSDN博客_面包板的详细使用方法

用到的硬件有esp32 剥线钳导线蜂鸣器（下图是esp32）

"万事俱备只欠东风 --------------------------------"

首先我们需要先将esp32在面包板上的连线完成

完成连线过后我们可以去实现功能了

①当面包板上的琴键摁出发出不同音调并且亮蓝灯

代码如下：

from machine import TouchPad, Pin,PWM
from time import sleep

LED = Pin(2,Pin.OUT)

pwm0 = PWM(Pin(23))
freq_val=5
duty_val=0
pwm0.freq(freq_val)
pwm0.duty(duty_val)

PINn = (32,33,27,13,12,14,15,4)#元组

TPx = [TouchPad(Pin(i)) for i in PINn]#TPx 所有的触摸管脚定义

Tone2 = (#对应管脚要演奏声音的频率
523,
586,
658,
697,
783,
879,
987,
1045,
)

def dzq():
global freq_val,duty_val
'电子琴子程序'
for ton,tp in zip(Tone2,TPx):
'遍历所有的触摸按钮'
if tp.read()<200:
freq_val=ton
duty_val = 1024//2
LED.on()
break
else:
#'如果运行完所有的循环，没有break，就执行这个else'
freq_val = 10
duty_val = 0
LED.off()

freq1 = pwm0.freq()#读取当前频率

# pwm0.freq(freq_val)
# sleep(0.01)
# pwm0.duty(duty_val)

if freq1 != freq_val:
'只有频率被修改的时候，才去重新配置频率和占空比'
pwm0.freq(freq_val)
sleep(0.01)#需要一定时间的延时，否则的话，同时修改评论和占空比会导致占空比修改失败
pwm0.duty(duty_val)

# while pwm0.duty() != duty_val:
# pwm0.duty(duty_val)
# print(pwm0.freq(),pwm0.duty())

while True:
dzq()
sleep(0.01)

------------------------------------------------------------------------

②实现录制播放并且记录摁下时间长短：

import time #引入时间类
from machine import TouchPad, Pin, PWM #引入触摸管脚
import threading

switch = TouchPad(Pin(32))
switch_mode = 0

PINn = (33,27,13,12,14,15,4)#元组
TPx = [TouchPad(Pin(i)) for i in PINn]#TPx 所有的触摸管脚定义

LED = Pin(2, Pin.OUT)

pwm0 = PWM(Pin(26))
time.sleep(0.5)
pwm0.duty(0)
time.sleep(0.01)
pwm0.freq(1)

Tone = (#对应管脚要演奏声音的频率
523,
586,
658,
697,
783,
879,
987,
)

my_rhythm = [] #创建节拍空数组
my_tones = [] #创建音调空数组

release=0 #松开状态
press=1 #按下状态
key_state = [release]*8 #按键状态缓存变量
ALLkey_state = release
start = time.ticks_ms() #记录开始的时间戳
end = 0 #记录结束的时间戳
time_diff = 0 #开始和结束的时间差

def Record_time():
global start,end,time_diff
end = time.ticks_ms() #记录这一次按键变化结束的时间戳
time_diff = time.ticks_diff(end, start) #根据这一次按键变化的开始和结束时间戳，计算出按键变化的时间差
my_rhythm.append(time_diff/1000) #将时间差存入数组末尾
# print(my_rhythm) #打印数组
#-----------------------------------------------------
start = time.ticks_ms() #记录下一次按键变化开始的时间戳

def playtone(frequency):
pwm0.duty(512)
time.sleep(0.01)
pwm0.freq(frequency)

def bequiet():
pwm0.duty(0)
time.sleep(0.01)
pwm0.freq(1)

def playsong():
global switch_mode
for i in range(len(my_rhythm)):
if (my_tones[i] == 0 ):
bequiet()
else:
playtone(my_tones[i])
time.sleep(my_rhythm[i])
bequiet()
switch_mode=0
print('music_OK')

my_music = threading.Thread(target=playsong)

def switchkey():
global switch_mode,start
while True:
if switch.read()<200:
if switch_mode==0:
my_rhythm.clear()
my_tones.clear()
switch_mode=1
start = time.ticks_ms() #记录开始的时间戳
my_tones.append(0) #第一个项为空拍，与节拍数组格式对应
LED.on()
elif switch_mode==1:
Record_time()
print(my_tones)
print(my_rhythm)
switch_mode=2
LED.off()
my_music.start()
while switch.read()<200:
time.sleep(0.01)

sw_key = threading.Thread(target=switchkey)
sw_key.start()

while True:
for i in range(7): #循环7次，读取7个按键状态
if TPx[i].read()<200: #读取按键电容值，判断按键是否按下
if key_state[i] != press: #如果按键状态缓存变量非此按键键值，表示按键发生了改变
key_state[i] = press #将按键状态缓存变量置为此按键键值
if switch_mode==1:
Record_time() #记录按键改变的时间差
my_tones.append(Tone[i]) #记录当前按键的音调
playtone(Tone[i]) #发出对应频率的音调
ALLkey_state = press #表示有按键按下
else:
key_state[i] = release #将当前按键状态置为松开

if press not in key_state:
if ALLkey_state != release : #全部松开状态下判断之前是否有按键按下
ALLkey_state = release #将按键状态置为全部松开状态
if switch_mode==1:
Record_time() #记录按键改变的时间差
my_tones.append(0) #记录当前空拍音调
bequiet() #不发声

time.sleep(0.1) #延时

③利用pygame发声 a~z摁下都可以发声，记录并打印摁下时间：

import pygame.midi
import pygame
import time

# 初始化设置
volume = 127 # 音量 0-127
pygame.init() # 初始化PYgame
windowSurface = pygame.display.set_mode((800, 600)) # 建立窗口
device = 0 # device number in win10 laptop
instrument = 0 # 乐器 http://www.ccarh.org/courses/253/handout/gminstruments/
# initize Pygame MIDI ----------------------------------------------------------
pygame.midi.init() # PYGAMEMIDI库的初始化
# 初始化设置结束

screen = pygame.display.set_mode((400,400))

# 设置窗口的标题，即游戏名称
pygame.display.set_caption('pygame 钢琴')

# 引入字体类型
f = pygame.font.Font('C:/Windows/Fonts/simhei.ttf',135)
# 生成文本信息，第一个参数文本内容；第二个参数，字体是平滑；
# 第三个参数，RGB模式的字体颜色；第四个参数，RGB模式字体背景颜色；
text = f.render("Zhang",True,(255,244,255),(31,56,99))
#获得显示对象的rect区域坐标
textRect =text.get_rect()
# 设置显示对象居中
textRect.center = (200,200)
# 将准备好的文本信息，绘制到主屏幕 Screen 上。
screen.blit(text,textRect)

# 固定代码段，实现点击"X"号退出界面的功能，几乎所有的pygame都会使用该段代码
Tone = { # 音调字典，不全，需要大家完善。从C1-C5都完善起来
'A0':21,'A#0':22,'B0':23,

'C1':24,'C#1':25,'D1':26,'D#1':27,'E1':28,'F1':29,'F#1':30,'G1':31,'G#1':32,'A1':33,'A#1':34,'B1':35,

'C2':36,'C#2':37,'D2':38,'D#2':39,'E2':40,'F2':41,'F#2':42,'G2':43,'G#2':44,'A2':45,'A#2':46,'B2':47,

'C3':48,'C#3':49,'D3':50,'D#3':51,'E3':52,'F3':53,'F#3':54,'G3':55,'G#3':56,'A3':57,'A#3':58,'B3':59,

'C4':60,'C#4':61,'D4':62,'D#4':63,'E4':64,'F4':65,'F#4':66,'G4':67,'G#4':68,'A4':69,'A#4':70,'B4':71,

'C5':72,'C#5':73,'D5':74,'D#5':75,'E5':76,'F5':77,'F#5':78,'G5':79,'G#5':80,'A5':81,'A#5':82,'B5':83,

'C6':84,'C#6':85,'D6':86,'D#6':87,'E6':88,'F6':89,'F#6':90,'G6':91,'G#6':92,'A6':93,'A#6':94,'B6':95,

'C7':96,'C#7':97,'D7':98,'D#7':99,'E7':100,'F7':101,'F#7':102,'G7':103,'G#7':104,'A7':105,'A#7':106,'B7':107,

'C8':108,
}
# set the output device --------------------------------------------------------
player = pygame.midi.Output(device) # 定义了一个输出音轨

# set the instrument -----------------------------------------------------------
player.set_instrument(instrument) # 设置乐器音色

key_value = ('a','s','d','f','g','h','j','q','w','e','r','t','y','u','z','x','c','v','b','n','m','1','2','3','4','5','6','7','i','o','p','k','l',)
key_tone = {
'a':"C2",'s':"D2",'d':"E2",'f':"F2",'g':"G2",'h':"A2",'j':"B2",

'q':"C3",'w':"D3",'e':"E3",'r':"F3",'t':"G3",'y':"A3",'u':"B3",

'z':"C1",'x':"D1",'c':"E1",'v':"F1",'b':"G1",'n':"A1",'m':"B1",

'1':"C4",'2':"D4",'3':"E4",'4':"F4",'5':"G4",'6':"A4",'7':"B4",

'i':'C5','o':'D5','p':'E5','k':'F5','l':'G5',
}

while True:
for event in pygame.event.get(): # 检测事件

if event.type == pygame.QUIT:
exit()
if event.type == pygame.KEYDOWN:
for i in range(33):
if event.key == pygame.__dict__[ 'K_'+key_value[i] ]:
print('正在发第'+str(i)+'个的音')
t1 = time.time()
player.note_on(Tone[ key_tone[ key_value[i] ] ], volume)

elif event.type == pygame.KEYUP:# 按键=松开的话，关闭对应的音调
for i in range(33):
if event.key == pygame.__dict__[ 'K_'+key_value[i] ]:
print('停止发第'+str(i)+'个')
t2 = time.time()
t3 = t2 - t1
print(str(t3)+'s')
player.note_off(Tone[ key_tone[ key_value[i] ] ], volume)

# 循环获取事件，监听事件状态
for event in pygame.event.get():
# 判断用户是否点了"X"关闭按钮,并执行if代码段
if event.type == pygame.QUIT:
#卸载所有模块
print("退出")
pygame.quit()
#终止程序，确保退出程序
sys.exit()
pygame.display.flip() #更新屏幕内容

pygame发声

④窗口显示按键样式和音符：

import pygame.midi
import pygame
import time
import sys
# 初始化设置
volume = 127 # 音量 0-127
pygame.init() # 初始化PYgame

windowSurface=pygame.display.set_mode((800,600)) #建立窗口
# screen = pygame.display.set_mode((400,400))

# 设置窗口标题，即游戏名称
pygame.display.set_caption('键盘钢琴')

#引入字体
f = pygame.font.Font('C:/Windows/Fonts/simhei.ttf',75)
#生成文本信息，第一个参数文本内容；第二个参数，字体是否平滑；
#第三个参数，RGB模式的字体颜色；第四个参数，RGB模式字体背景颜色；
text = f.render("Lebron",True,'deeppink','purple')
# 获得显示对象的rect区域坐标
textRect = text.get_rect()
# 设置显示对象居中
textRect.center = (400,40)
# 将准备好的文本信息，绘制到主屏幕 Screen 上。
windowSurface.blit(text,textRect)

Tone = { # 音调字典
'A0':21,'A#0':22,'B0':23,
'C1':24,'C#1':25,'D1':26,'D#1':27,'E1':28,'F1':29,'F#1':30,'G1':31,'G#1':32,'A1':33,'A#1':34,'B1':35,
'C2':36,'C#2':37,'D2':38,'D#2':39,'E2':40,'F2':41,'F#2':42,'G2':43,'G#2':44,'A2':45,'A#2':46,'B2':47,
'C3':48,'C#3':49,'D3':50,'D#3':51,'E3':52,'F3':53,'F#3':54,'G3':55,'G#3':56,'A3':57,'A#3':58,'B3':59,
'C4':60,'C#4':61,'D4':62,'D#4':63,'E4':64,'F4':65,'F#4':66,'G4':67,'G#4':68,'A4':69,'A#4':70,'B4':71,
'C5':72,'C#5':73,'D5':74,'D#5':75,'E5':76,'F5':77,'F#5':78,'G5':79,'G#5':80,'A5':81,'A#5':82,'B5':83,
'C6':84,'C#6':85,'D6':86,'D#6':87,'E6':88,'F6':89,'F#6':90,'G6':91,'G#6':92,'A6':93,'A#6':94,'B6':95,
'C7':96,'C#7':97,'D7':98,'D#7':99,'E7':100,'F7':101,'F#7':102,'G7':103,'G#7':104,'A7':105,'A#7':106,'B7':107,
'C8':108,
}
# set the output device --------------------------------------------------------
player = pygame.midi.Output(device)#定义了一个输出音轨

# set the instrument -----------------------------------------------------------
player.set_instrument(instrument)#设置乐器音色

key_tone = {
'1':"C5", '2':"D5", '3':"E5", '4':"F5", '5':"G5", '6':"A5", '7':"B5",
'q':"C3", 'w':"D3", 'e':"E3", 'r':"F3", 't':"G3", 'y':"A3", 'u':"B3",
'a':"C4", 's':"D4", 'd':"E4", 'f':"F4", 'g':"G4", 'h':"A4", 'j':"B4",
'z':"C2", 'x':"D2", 'c':"E2", 'v':"F2", 'b':"G2", 'n':"A2", 'm':"B2",
}

text_col = 'black' # 文本颜色
bd_col1 = 'white' # 背景颜色（初始值）
bd_col2 = 'red' # 背景颜色（按下反显值）

def key_color (text,x,y,color): #按键改变颜色（文本内容，坐标x，坐标y，颜色R）
key = f.render(text,True,text_col,color)
key_rect = key.get_rect()
key_rect.center = (x,y)
windowSurface.blit(key,key_rect)

for key in key_tone.keys(): #在窗口中循环打印字典中的字符key内容
n=list(key_tone.keys()).index(key) #检索字符是否在字符串列表中，返回字符所在位置
key_color(key+' ',50+(n//7)*60+(n%7)*90,150+(n//7)*100,bd_col1)

# print( list(key_tone.keys()) )
# print( list(key_tone.keys())[0] )
# print(list(key_tone.keys()).index('r'))

while True:
for event in pygame.event.get(): # 检测事件
if event.type == pygame.QUIT:
#卸载所有模块
print("退出")
pygame.quit()
#终止程序，确保退出程序
sys.exit()
if event.type == pygame.KEYDOWN:
if chr(event.key) in key_tone.keys():#所按下的按键，在音符键盘的字典中
n=list(key_tone.keys()).index(chr(event.key))#检索字符是否在字符串列表中，返回字符所在位置
key_color(chr(event.key)+' ',50+(n//7)*60+(n%7)*90,150+(n//7)*100,bd_col2)

print('正在发'+key_tone[chr(event.key)]+'音')
t1 = time.time() #记录t1的时间戳
player.note_on(Tone[key_tone[chr(event.key)]], volume)
elif event.type == pygame.KEYUP:# 按键=松开的话，关闭对应的音调
if chr(event.key) in key_tone.keys():#所按下的按键，在音符键盘的字典中

n=list(key_tone.keys()).index(chr(event.key))#检索字符是否在字符串列表中，返回字符所在位置
key_color(chr(event.key)+' ',50+(n//7)*60+(n%7)*90,150+(n//7)*100,bd_col1)

print('停止发'+key_tone[chr(event.key)]+'音')
t2 = time.time() #记录t2的时间戳
t3 = t2 - t1 #根据t1和t2的时间戳，计算t3时间差
print(str(t3)+'s') #打印出时间差
player.note_off(Tone[key_tone[chr(event.key)]], volume)
pygame.display.flip() #更新
time.sleep(0.005) #每0.005s循环一次

窗口显示按键样式和音符

⑤udp通讯：

# -*- coding: utf-8 -*-
import socket
import time

#client 发送端
client_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
PORT = 8008

while True:
start = time.time() #获取当前时间
print(time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(start))) #以指定格式显示当前时间
msg=input("本客户端192.168.43.131，请输入要发送的内容：")
server_address = ("192.168.43.82", PORT) # 接收方服务器的ip地址和端口号
client_socket.sendto(bytes(msg.encode("utf-8")), server_address) #将msg内容发送给指定接收方
now = time.time() #获取当前时间
run_time = now-start #计算时间差，即运行时间
print(time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(now)))
print("run_time: %d seconds\n" %run_time)
time.sleep(1)
###

以上是客户端，以下是服务端

# -*- coding: utf-8 -*-
import pygame.midi
import socket #导入socket模块
import time #导入time模块

#server 接收端
# 设置服务器默认端口号
PORT = 8008
# 创建一个套接字socket对象，用于进行通讯
# socket.AF_INET 指明使用INET地址集，进行网间通讯
# socket.SOCK_DGRAM 指明使用数据协议，即使用传输层的udp协议
server_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
address = ("", PORT)
server_socket.bind(address) #为服务器绑定一个固定的地址，ip和端口
server_socket.settimeout(10) #设置一个时间提示，如果10秒钟没接到数据进行提示

device = 0 # device number in win10 laptop
instrument = 0 #乐器 http://www.ccarh.org/courses/253/handout/gminstruments/
# initize Pygame MIDI ----------------------------------------------------------
pygame.midi.init()# PYGAMEMIDI库的初始化
# set the output device --------------------------------------------------------
player = pygame.midi.Output(device)#定义了一个输出音轨
volume = 127 # 音量 0-127
# set the instrument -----------------------------------------------------------
player.set_instrument(instrument)#设置乐器音色
Tone = { # 音调字典
'A0':21,'AS0':22,'B0':23,
'C1':24,'CS1':25,'D1':26,'DS1':27,'E1':28,'F1':29,'FS1':30,'G1':31,'GS1':32,'A1':33,'AS1':34,'B1':35,
'C2':36,'CS2':37,'D2':38,'DS2':39,'E2':40,'F2':41,'FS2':42,'G2':43,'GS2':44,'A2':45,'AS2':46,'B2':47,
'C3':48,'CS3':49,'D3':50,'DS3':51,'E3':52,'F3':53,'FS3':54,'G3':55,'GS3':56,'A3':57,'AS3':58,'B3':59,
'C4':60,'CS4':61,'D4':62,'DS4':63,'E4':64,'F4':65,'FS4':66,'G4':67,'GS4':68,'A4':69,'AS4':70,'B4':71,
'C5':72,'CS5':73,'D5':74,'DS5':75,'E5':76,'F5':77,'FS5':78,'G5':79,'GS5':80,'A5':81,'AS5':82,'B5':83,
'C6':84,'CS6':85,'D6':86,'DS6':87,'E6':88,'F6':89,'FS6':90,'G6':91,'GS6':92,'A6':93,'AS6':94,'B6':95,
'C7':96,'CS7':97,'D7':98,'DS7':99,'E7':100,'F7':101,'FS7':102,'G7':103,'GS7':104,'A7':105,'AS7':106,'B7':107,
'C8':108,
}

player.note_on(Tone['C3'], volume)
time.sleep(1)
player.note_off(Tone['C3'], volume)

while True:
   #正常情况下接收数据并且显示，如果10秒钟没有接收数据进行提示（打印 "time out"）
   #当然可以不要这个提示，那样的话把"try:" 以及 "except"后的语句删掉就可以了
try:
now = time.time() #获取当前时间
# 接收客户端传来的数据 recvfrom接收客户端的数据，默认是阻塞的，直到有客户端传来数据
# recvfrom 参数的意义，表示最大能接收多少数据，单位是字节
# recvfrom返回值说明
# receive_data表示接受到的传来的数据,是bytes类型
# client 表示传来数据的客户端的身份信息，客户端的ip和端口，元组
receive_data, client = server_socket.recvfrom(1024)
tone_temp = str(receive_data,'utf-8')#bytes转换为str字符串
if tone_temp in Tone.keys():
player.note_on(Tone[tone_temp], volume)

print(time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(now))) #以指定格式显示时间
print("来自客户端%s,发送的%s\n" % (client, receive_data)) #打印接收的内容
except socket.timeout: #如果10秒钟没有接收数据进行提示（打印 "time out"）
print("time out")

⑥wifi电子键盘每个ESP32触摸键盘能够使服务器演奏对应钢琴音：

服务器用pycharm 发送端用thonny

#用thonny 做客户端 pycharm 做服务端
#用thonny 做客户端 pycharm 做服务端
def is_legal_wifi(essid, password):
'''
判断WIFI密码是否合法
'''
if len(essid) == 0 or len(password) == 0:
return False
return True

def do_connect():
import json
import network

# 尝试读取配置文件wifi_confi.json,这里我们以json的方式来存储WIFI配置
# wifi_config.json在根目录下

# 若不是初次运行,则将文件中的内容读取并加载到字典变量 config
try:
with open('wifi_config.json','r') as f:
config = json.loads(f.read())
# 若初次运行,则将进入excpet,执行配置文件的创建
except:
essid = ''
password = ''

while True:
essid = input('wifi name:') # 输入essid
password = input('wifi passwrod:') # 输入password

if is_legal_wifi(essid, password):
config = dict(essid=essid, password=password) # 创建字典
with open('wifi_config.json','w') as f:
f.write(json.dumps(config)) # 将字典序列化为json字符串,存入wifi_config.json
break
else:
print('ERROR, Please Input Right WIFI')

#以下为正常的WIFI连接流程
wifi = network.WLAN(network.STA_IF)
if not wifi.isconnected():
print('connecting to network...')
wifi.active(True)
wifi.connect(config['essid'], config['password'])
import utime

for i in range(200):
print('第{}次尝试连接WIFI热点'.format(i))
if wifi.isconnected():
break
utime.sleep_ms(100) #一般睡个5-10秒,应该绰绰有余

if not wifi.isconnected():
wifi.active(False) #关掉连接,免得repl死循环输出
print('wifi connection error, please reconnect')
import os
# 连续输错essid和password会导致wifi_config.json不存在
try:
os.remove('wifi_config.json') # 删除配置文件
except:
pass
do_connect() # 重新连接
else:
print('network config:', wifi.ifconfig())

import socket
import time
from machine import Pin
from time import sleep
LED=Pin(2,Pin.OUT)

do_connect()
LED.on()

#多键触摸发声
#-----------------------------------
from machine import TouchPad, Pin, #引用touch库，GPIO库，PWM库
from time import sleep #引用time库
touch_do=TouchPad(Pin(13)) #创建 DO音 TouchPad对象
touch_re=TouchPad(Pin(12)) #创建 RE音 TouchPad对象
touch_mi=TouchPad(Pin(14)) #创建 MI音 TouchPad对象
touch_fa=TouchPad(Pin(27)) #创建 FA音 TouchPad对象
touch_so=TouchPad(Pin(33)) #创建 SO音 TouchPad对象
touch_la=TouchPad(Pin(32)) #创建 LA音 TouchPad对象
touch_si=TouchPad(Pin(15)) #创建 SI音 TouchPad对象
touch_si=TouchPad(Pin(4)) #创建 SI音 TouchPad对象

# LED点亮说明WIFI连接正常

#client 发送端
client_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
server_address = ("192.168.43.82", 8008) # 接收方服务器的ip地址和端口号
while True:
#循环体
# A=touch_do.read()
# B=touch_re.read()
# C=touch_mi.read()
# D=touch_fa.read()
# E=touch_so.read()
# F=touch_la.read()
# G=touch_si.read()
# H=touch_si.read()

PINn = (13,12,14,27,33,32,15,4)#元组
TPx = [TouchPad(Pin(i)) for i in PINn]
Tone2 = (
"A3",
"A7",
"A5",
"B3",
"D3",
"C7",
"B5",
"A1",

)

for ton,tp in zip(Tone2,TPx):
if tp.read()<200:
print("已经发送啦！")
msg = ton
client_socket.sendto(bytes(msg.encode('utf-8')), server_address) #将msg内容发送给指定接收方
time.sleep(0.01)

⑦esp32的WiFi连接：

后期这个直接烧录进esp32

import network
import time
#WIFI连接流程
def wifi_connect():
wifi = network.WLAN(network.STA_IF)
wifi.active(True)
wifi.connect('', '')

for i in range(200):
print('第{}次尝试连接WIFI热点'.format(i))
if wifi.isconnected():
break
time.sleep(0.1) #一般睡个5-10秒,应该绰绰有余

if not wifi.isconnected():
wifi.active(False) #关掉连接,免得repl死循环输出
print('wifi connection error, please reconnect')
else:
print('network config:', wifi.ifconfig())

前端：

①电子琴的完整数据结构和点击发声：-

</div>
</div>

</div>
</div>
</template>

// 基础数据
//白键对应显示
baseWhiteNotes: ['c', 'd', 'e', 'f', 'g', 'a', 'b'],
//黑键对应显示
baseBlackNotes: ['cs', 'ds', '', 'fs', 'gs', 'as'],
//音符时长
duration: [125, 250, 500, 1000, 2000],

piano_data: [],
//时间差
diff_time: 0,

//黑键数据结构
//白键数据结构
//音符键盘对应字典
//乐谱
}
},
methods: {
// 退格
// 清空乐谱
// 播放乐谱
// 按下琴键
mouseDown(key) {
let now = new Date()
this.diff_time = now.getTime()

console.log("我按下了")
console.log(key)

let audio = document.createElement("audio")
audio.src = require("../assets/sound/" + key.note + ".mp3")
audio.play()

},
// 松开琴键
mouseup(key) {
let now = new Date()
this.diff_time = now.getTime() - this.diff_time
console.log(this.diff_time)

console.log("我松开了")
console.log(key)

let diff = 8888
let diff_index = -1

this.duration.forEach((element, index) => {
if (Math.abs(this.diff_time - element) < diff) {
diff = Math.abs(this.diff_time - element)
diff_index = index
}

});
console.log("我按了" + this.diff_time)
console.log("我找到距离我最近的音符是:")
console.log(this.duration[diff_index])

}
},
created() {

for (let i = 0; i < 5; i++){
let group = {

black_keys: [],
white_keys: []

}

let white_list = []
this.baseWhiteNotes.forEach((element, index) => {
let key = {
note: element + (i+2),
notenum: index + 1,
lh: i+2,
half: false

}
white_list.push(key)
});
group.white_keys = white_list
this.piano_data.push(group)

// baseWhiteNotes数字对象（array） element一个对象完整的forEach
let black_List = []
this.baseBlackNotes.forEach((element, index) => {
let key = {}
key = {
note: index == 2 ? "" : element + (i+2),
notenum: index + 1,
lh: i+2,
half: true
}
black_List.push(key)
});
group.black_keys = black_List
this.piano_data.push(group)

//构建数据结构
//建立websocket连接
}
},

beforeDestroy() {
//销毁连接
},

mounted() {}
}
</script>

<style scoped>
.frame {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background-color: rgb(53, 29, 22);
height: 100vh;
}

.voice {
border: 1px solid #eee;
box-shadow: 5px 5px 5px #666;
width: 620px;
/* height: 520px; */
overflow-y: auto;
padding: 190px;
background-color: wheat;
}

.piano {
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}

.white_keys {
display: flex;
flex-direction: row;
}

.white-key {
width: 40px;
height: 300px;
border: 1px solid #999;
/* 边框 border——width宽度 border——style样式 border——color颜色 */
margin-left: -1px;
/* 左边距 */
box-shadow: 2px 2px 2px #666;
/* 盒子阴影 */
display: flex;
align-items: flex-end;
justify-content: center;
background-color: #FFF;
}

.white-key:active {
background-color: #666;
}

.piano_group {
position: relative;
}

.black_keys {
position: absolute;
/* 关于css中的position ，static默认位置，relative相对定位，absolute，fixed固定位置 */
width: calc(100% - 60px);
height: 200px;
top: 0;
left: 25px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}

.black_key {
width: 30px;
height: 200px;
background-color: #000;
z-index: 99;
box-shadow: 2px 2px 2px 1px #999;
border-block-start: 5px;
border-block-end: 5px;
}
.black_key:active {
background-color: red;
}

.black_key_empty {
z-index: -1;
/* 属性指定一个元素的堆叠顺序，为正数会在其上，为负数则在其下 */
}
</style>

②建立服务端和前端的websocket连接：

服务端：

from flask import Flask #Flask服务器库
from flask_sockets import Sockets #WS连接库
import pygame.midi #弹奏音乐的库
import pygame #pygame的库
import json
from concurrent.futures import ThreadPoolExecutor
import socket

instruments = [1,46,25,56]

# 创建线程池执行器
executor = ThreadPoolExecutor(2)
# 初始化pygame设置
volume = 127 # 音量 0-127
device = 0 # device number in win10 laptop
instrument = 1 # 乐器 http://www.ccarh.org/courses/253/handout/gminstruments/
# initize Pygame MIDI ----------------------------------------------------------
pygame.midi.init() # PYGAMEMIDI库的初始化
# set the output device --------------------------------------------------------
player = pygame.midi.Output(device) # 定义了一个输出音轨
# set the instrument -----------------------------------------------------------
player.set_instrument(instrument) # 设置乐器音色
# 初始化设置结束

Tone = {#音调字典
'C0':12,'CS0':13,'D0':14,'DS0':15,'E0':16,'F0':17,'FS0':18,'G0':19,'GS0':20,'A0':21,'AS0':22,'B0':23,
'C1':24,'CS1':25,'D1':26,'DS1':27,'E1':28,'F1':29,'FS1':30,'G1':31,'GS1':32,'A1':33,'AS1':34,'B1':35,
'C2':36,'CS2':37,'D2':38,'DS2':39,'E2':40,'F2':41,'FS2':42,'G2':43,'GS2':44,'A2':45,'AS2':46,'B2':47,
'C3':48,'CS3':49,'D3':50,'DS3':51,'E3':52,'F3':53,'FS3':54,'G3':55,'GS3':56,'A3':57,'AS3':58,'B3':59,
'C4':60,'CS4':61,'D4':62,'DS4':63,'E4':64,'F4':65,'FS4':66,'G4':67,'GS4':68,'A4':69,'AS4':70,'B4':71,
'C5':72,'CS5':72,'D5':74,'DS5':75,'E5':76,'F5':77,'FS5':78,'G5':79,'GS5':80,'A5':81,'AS5':82,'B5':83,
'C6':84,'CS6':85,'D6':86,'DS6':87,'E6':88,'F6':89,'FS6':90,'G6':91,'GS6':92,'A6':93,'AS6':94,'B6':95,
'C7':96,'CS7':97,'D7':98,'DS7':99,'E7':100,'F7':101,'FS7':102,'G7':103,'GS7':104,'A7':105,'AS7':106,'B7':107,
}

wsSev = {}
app = Flask(__name__)
sockets = Sockets(app)

cheatMode = 0
cheatIndex = 0
currentGroup = ["C4","D4","E4","F4","G4","A4","B4"]

# 服务器启动时，开启ws服务器
def main_app():
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler
server = pywsgi.WSGIServer(('192.168.10.106', 9302), app, handler_class=WebSocketHandler)
# 开启udp监听
executor.submit(udp_conn)
print("websocket服务启动")
server.serve_forever()

def udp_conn():
global wsSev
global cheatMode
global cheatIndex
global currentGroup
udp_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
address=('192.168.10.106', 9302)
udp_socket.bind(address)
print('UDP监听开启')
try:
while True:
revc_data = udp_socket.recvfrom(1024)
print(str(revc_data[0], encoding = "utf-8"))
noteinfo = json.loads(str(revc_data[0], encoding = "utf-8"))
print(cheatMode)
if cheatMode == 1 and str(noteinfo["status"])=='1':
noteinfo["note"] = currentGroup[cheatIndex]
print(currentGroup[cheatIndex])
cheatIndex = cheatIndex + 1
if len(currentGroup) == cheatIndex:
cheatIndex = 0

play(noteinfo)
if wsSev:
wsSev.send(json.dumps(noteinfo))
except:
wsTarget.close()

# 持续监听客户端发送的数据
def ws_listener():
global wsSev
try:
while True:
message = wsSev.receive()
print(message)
if message is not None:
noteinfo = json.loads(message)
play(noteinfo)
#wsSev.send("我接收到了！")
except:
wsSev.close()

# 客户端与服务器建立连接的接口
@sockets.route('/connectServer')
def connect_server(socket):
global wsSev
print('connected')
wsSev = socket
print('接收到客户端的连接')
#wsSev.send("你已成功连接至服务器")
ws_listener()

def play(noteinfo): #使用Pygame调用声卡发声
global cheatMode
global cheatIndex
if str(noteinfo['status']) == "1":
print("发声")
print(noteinfo['note'])
if str(noteinfo['note']) == 'X1':
cheatMode = 1
cheatIndex = 0
print("开启cheat模式")
elif str(noteinfo['note']) == 'X2':
cheatMode = 0
cheatIndex = 0
print("关闭cheat模式")
else:
player.note_on(Tone[noteinfo['note']], volume) #弹出声音
else:
print("停止")
player.note_off(Tone[noteinfo['note']], volume) #关闭声音

if __name__ == "__main__":
main_app()

前端：

1、访问初始化接口，建立连接

this.ws = new WebSocket("ws://9.7.0.65:9303/connectServer");

ws需要作为一个全局对象，在data中初始化

2、持续监听（接收数据）

this.ws.onmessage = ((event) => {// 将接收到的数据序列化为JSON结构（Object对象）let socketMessage = event.dataconsole.log(socketMessage)
});

3、发送数据

this.ws.send('要发送的内容')

icon图标（前端）：

用到UI控件 Element：Element - The world's most popular Vue UI framework

注意注意：

开始前记得，安装和在main.js中引用！

<el-button type="info" circle>播放</el-button> 这样之后，但并不是我想要的结果，接下来有两种方法，第一在button按钮菜单下的图标按钮的下拉代码下选择，第二是icon图标里找寻需要的图标。图标标签是<i></i> 最终：<el-button type="info" circle><i class="el-icon-caret-right" style="font-size:30px" @click="playSong"></i></el-button>

本项目需要三个icon，第一个：开始播放，第二个：删除前一个音符，第三个删除全部音符

代码如下：

<el-button type="info" circle><i class="el-icon-caret-right" style="font-size:30px" @click="playSong"></i></el-button>

<el-button type="warning" circle><i class="el-icon-back" style="font-size:30px" @click="playSong"></i></el-button>

<el-button type="success" circle><i class="el-icon-close" style="font-size:30px" @click="playSong"></i></el-button>

拓展部分：

①作弊模式：

需要三端联调

硬件端代码如下（只有作弊的代码，不全）：

from machine import Pin
import time
import socket
import json

p0 = Pin(0, Pin.IN) # create input pin on GPIO0
print(p0.value()) # get value, 0 or 1

musickeydict = {
"status":"1",
"note":"C3"
}
#client 发送端
client_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
server_address = ("9.7.0.65", 9302) # 接收方服务器的ip地址和端口号

def sendtone(note,status):
musickeydict["note"] = note
musickeydict["status"] = status
client_socket.sendto(bytes(json.dumps(musickeydict).encode('utf-8')), server_address) #将msg内容发送给指定接收方

key_time = 0
while True :
time.sleep(0.01)
if (p0.value()==0):
key_time +=1
if key_time ==3:
print("cheat")
sendtone('X1','1')
else:
key_time = 0

服务器：

运用两块esp32，

假设 a块和b块，

a的esp32的boot键摁下是发送'X1','1' ，

b的esp32键摁下发送'X2','1' 。

创建全局变量（下）

# 0：正常模式；1：Cheat模式
cheatMode = 0
# 开启Cheat模式时，对应到乐谱的第几个音
cheatIndex = 0

创建乐曲对象 & 导入乐谱（下）

# 创建乐曲对象，以note数组的形式导入
song = ["C4","B3","C4","G4","A4","A4","G4","D4","D4","F4","E4","C4","B3","C4","E4","F4","F4","G4","D4","C4","C4","C4","B3","C4","G4","A4","A4","G4","D4","D4","F4","E4","D4","E4","C4","B3","C4","E4","F4","F4","G4","D4","C4","C4"]

开启/关闭Cheat模式

当接收到X1或X2时，开启/关闭Cheat模式

if str(noteinfo['note']) == 'X1':cheatMode = 1cheatIndex = 0print("开启cheat模式")
elif str(noteinfo['note']) == 'X2':cheatMode = 0cheatIndex = 0print("关闭cheat模式")

当检测到cheat开启：

if cheatMode == 1 and str(noteinfo["status"])=='1' and str(noteinfo["note"])!='X1' and str(noteinfo["note"])!='X2':noteinfo["note"] = currentGroup[cheatIndex]print(currentGroup[cheatIndex])cheatIndex = cheatIndex + 1if len(currentGroup) == cheatIndex:cheatIndex = 0

②画面段简谱显示：

<div class="stave">
    <div v-for="(item,index) in songs" :key="index" class="note">
        <template>
            <div class="key">
                <div v-if="item.lh>0" class="dot"></div>
                <div v-if="item.lh>1" class="dot"></div>
            </div>
            <div class="note-val">
                {{item.notenum}}
                <span v-if="parseFloat(item.notetype)>1">-</span>
                <span v-if="parseFloat(item.notetype)>2">-</span>
                <div class="half-key" v-if="item.note && item.note.indexOf('s')==1">#</div>
            </div>
            <div class="note-type-half" v-if="parseFloat(item.notetype)<=1"></div>
            <div class="note-type-half" v-if="parseFloat(item.notetype)<1"></div>
            <div class="key">
                <div v-if="item.lh<0" class="dot"></div>
                <div v-if="item.lh<-1" class="dot"></div>
            </div>
        </template>
    </div>
</div>
------------------

css：

简谱显示CSS

.voice {
        margin-top: 30px;
        border: 1px solid #eee;
        box-shadow: 5px 5px 5px #666;
        width: 70vw;
        height: 520px;
        overflow-y: auto;
        padding: 20px;
        background-color: wheat;
    }

.voice .stave {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

.voice .note {
        margin-right: 10px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        height: 80px;
        font-size: 40px;
        min-width: 40px;
    }

.voice .note-val {
position: relative;
}

.voice .half-key {
        position: absolute;
        font-size: 16px;
        top: 5px;
        left: 25px
    }

.note-type-half {
        width: 15px;
        height: 1px;
        background-color: #333;
        margin-bottom: 2px;
        margin-left: 2px;
    }

.voice .key {
height: 12px;

}

.voice .dot {
        width: 5px;
        height: 5px;
        margin: 2px 0;
        border-radius: 50%;
        background-color: #333;
        margin-left: 7px;
    }

.op-area {
        z-index: 99;
        position: absolute;
        right: 20vw;
        top: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

③切换乐器：

硬件和服务器的联调：

服务器：

def udp_conn():
global instruments
global instrumentIndex

udp_socket = socket.socket(socket.AF_INET , socket.SOCK_DGRAM)
address=('9.7.5.3',9301)
udp_socket.bind(address)
print('UDP监听开启')
try:
while True:
revc_data = udp_socket.recvfrom(1024)
print(str(revc_data[0], encoding = "utf-8"))
noteinfo = json.loads(str(revc_data[0], encoding = "utf-8"))
if str(noteinfo["note"]) == "S1":
instrumentIndex = instrumentIndex + 1
if instrumentIndex == 4:
instrumentIndex = 1
print(instruments[instrumentIndex])
player.set_instrument(instruments[instrumentIndex])

elif str(noteinfo["note"]) == "S2":
instrumentIndex = instrumentIndex - 1
if instrumentIndex == -1:
instrumentIndex = 3
print(instruments[instrumentIndex])
player.set_instrument(instruments[instrumentIndex])
else:
play(noteinfo)
if wsSev:
wsSev.send(json.dumps(noteinfo))

except:
wsTarget.close()

硬件：

因为每块esp32上只有一个boot键

假设有a和b

a是发送S1的也就是上一个乐器 b是发送S2的也就是上一个乐器

# 先要连上wifi wifi连接代码此处省略……………………
import socket
import time
import WiFi
import json

WiFi.wifi_connect()

from machine import TouchPad, Pin,PWM
from time import sleep

print("系统充电")
time.sleep(1)

LED = Pin(2,Pin.OUT)#面包板
# LED = Pin(22,Pin.OUT)#PCB
p0 = Pin(0, Pin.IN, Pin.PULL_UP) # create input pin on GPIO0
pwm0 = PWM(Pin(23))
freq_val=5
duty_val=0
pwm0.freq(freq_val)
pwm0.duty(duty_val)
# PINn = (32,33,27,13,12,15,14,4)#PCB元组
PINn = (12,13,14,27,33,32,15,4)#面包板元组

TPx = [TouchPad(Pin(i)) for i in PINn]#TPx 所有的触摸管脚定义

musickeydict = {
"status":"1",
"note":"G3"
}
# musickeydict["note"] = 'G6'
# musickeydict["status"] = '0'

# print(musickeydict)
def sendtone(note,status):
musickeydict["note"] = note
musickeydict["status"] = status
client_socket.sendto(bytes(json.dumps(musickeydict).encode('utf-8')), server_address) #将msg内容发送给指定接收方

msg = ('D3',#需要发送的信息
'C3',
'E3',
'F3',
'G3',
'A3',
'B3',
'C4',
)

# do_connect()# wifi连接
LED.on()# LED点亮说明WIFI连接正常
time.sleep(1)

#client 发送端
client_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
# server_address = ("192.168.43.234", 8008) # 接收方服务器的ip地址和端口号
server_address = ("9.7.5.3", 9301) # 接收方服务器的ip地址和端口号

key_time = 0 #按键时间
key_time1 = 0 #按键时间
keychar = ''
def dzq():
'电子琴触摸按键子程序'
global key_time,keychar,key_time1

for ton,tp in zip(msg,TPx):
'遍历所有的触摸按钮'
tp_val = 10000
try:
tp_val = tp.read()
except:
print("触摸读取错误")
break
if tp_val<200:#有触摸按键按下
key_time += 1#按键时间+1
if key_time == 3:
try:
sendtone(ton,'1')
# musickeydict["note"] = ton
# musickeydict["status"] = '1'
# client_socket.sendto(bytes(json.dumps(musickeydict).encode('utf-8')), server_address) #将msg内容发送给指定接收方
except:
print("发送失败")
keychar = ton
LED.on()
break
else:
'如果运行完所有的循环，没有break，就执行这个else'
if key_time != 0:
sendtone(keychar,'0')
# musickeydict["note"] = keychar
# musickeydict["status"] = '0'
# client_socket.sendto(bytes(json.dumps(musickeydict).encode('utf-8')), server_address) #将msg内容发送给指定接收方
key_time = 0#按键时间清零
LED.off()
if (p0.value()==0):
key_time1 +=1
if key_time1 ==3:
print("切换下一个乐器")
sendtone("S1",1)

另外一块只用将S1变为S2即可

前端和后端的联调。前端：

html:

<el-button type="danger" circle @click="playSong('top')">

<i class="el-icon-d-arrow-left" style="font-size:45px"

></i>

</el-button>

<el-button type="primary" circle @click="playSong('next')">

<i class="el-icon-d-arrow-right" style="font-size:45px"

></i>

</el-button>

定义一个方法如下:

playSong(info) {

console.log(info)

if (info == 'top') {

let a ={

note:"S1"

}

this.ws.send(JSON.stringify(a))

}

else {

let b ={

note:"S2"

}

this.ws.send(JSON.stringify(b))

}

后端的代码基本上和udp连接代码一样（此处省略....）

增加退格、清空按钮

<el-button type="primary" :disabled="songs.length <=0" circle @click="songs.pop()"><i class="el-icon-back" style="font-size:30px"></i>
</el-button><el-button type="danger" circle @click="songs=[]"><i class="el-icon-delete" style="font-size:30px"></i>
</el-button>

通过ElementUI，新增歌单选择功能

创建歌曲文件，如 mysong1.js、mysong2.js

export function getSong() {// 歌曲内容let song = [{notenum: 5,lh: 0,half: false,notetype: 0,}]return song
}

在index.vue中引用歌曲文件（注意，需在script标签的一开始就引用）
引用mysong1中的getSong方法，取别名为getSong1，后面可以通过getSong1()获取歌曲内容

    import {getSong as getSong1} from './mysong1'import {getSong as getSong2} from './mysong2'

创建全局变量，在画面初始化时，初始化歌单

//当前歌单index
songListIndex: 0,
//歌单
songList: [],

创建歌单对象列表，对象中包含3个属性，分别是
speed:n 播放速度（以0.5一拍，n倍速）
song: 歌曲内容
name: 歌曲名称

mounted() {this.songList = [{speed: 1,song: getSong1(name: 'Way Back Home'}, {speed: 2,song: getSong2(name: '青石巷'}, {speed: 2,song: getSong3(name: '菊次郎的夏天'}, {speed: 1,song: getSong4(name: '起风了'}, {speed: 1.5,song: getSong5(name: '白月光与朱砂痣'}]

DOM端
v-model 绑定一个变量，为当前选中的数组的value
@change 变更时调用的事件
el-option 选项
:name 显示的值
:value 绑定给v-model的值

<el-select v-model="songListIndex" @change="changeSong" style="margin-right:20px"><el-option v-for="(item,index) in songList" :key="index" :label="item.name" :value="index"></el-option>
</el-select>

变更事件

changeSong() {// 指向当前对应的歌曲this.songs = this.songList[this.songListIndex].song
}

播放时的速度调整

let duration = this.durationList[key.notetype]
if (element.speed) {duration = duration * element.speed
}

硬件部分：

①esp32在面包板上的连接：

②画pcb电路图：

我用的是立创eda

三维设计

3d模型

代码优化：

客户端最终显示：

<el-image style="width:30px; height:30px;margin-bottom:10px" :src="require('./music.png')">

</el-image>

<div class="volumes-num">{{instrumentVolumes[index].value}}</div>

<el-slider v-model="instrumentVolumes[index].value" :max=127 vertical height="45vh"

@change="input_words()">

</el-slider>

</div>

<el-select v-model="selectedIndex" @change="changeSong" style="margin-right:20px;">

<el-option v-for="(item,index) in optionList" :key="index" :value="index" :label="item.name">

</el-option>

</el-select>

<el-button type="info" @click="playSongs" style="margin-left:-20px;border-radius:0">

</el-button>

</div>

<el-button :disabled="songs.length <=0" @click="songs.pop()" circle><i class="el-icon-back"

style="font-size:20px"></i>

</el-button>

<el-button @click="songs=[]" circle><i class="el-icon-delete" style="font-size:20px"></i>

</el-button>

</div>

export default {

components: {},

data() {

return {

options_I: [{

value: '1',

}, {

value: '2',

}, {

value: '3',

}, {

value: '4',

}, {

value: '5',

}],

value_I: [],

options_v: [{

value: {

1: '0'

}, {

value: {

2: '0'

}, {

value: {

3: '0'

}, {

value: {

4: '0'

}, {

value: {

5: '0'

}],

value_I: [],

value1: 0,

instrumentVolumes: [{

value: 85,

isMute: false,

}, {

value: 96,

isMute: false,

}, {

value: 118,

isMute: false,

}, {

value: 102,

isMute: false,

}, {

value: 74,

isMute: false,

}, {

value: 66,

isMute: false,

}],

// 输入的文本内容

input1: "85",

input2: "96",

input3: "118",

input4: "102",

input5: "74",

methods: {

formatTooltip(val) {

let dict = {

volume: this.input

}

this.ws.send(JSON.stringify(dict))

return val / 99;

input_words() {

let dict = {

intr1: this.instrumentVolumes[0].value,

intr2: this.instrumentVolumes[1].value,

intr3: this.instrumentVolumes[2].value,

intr4: this.instrumentVolumes[3].value,

intr5: this.instrumentVolumes[4].value,

intr5: this.instrumentVolumes[5].value,

send: '1'

// volume: this.input

}

console.log(dict)

this.ws.send(JSON.stringify(dict))

简谱显示需要import 比如说song1 song2......

服务器：

import pygame.midi #弹奏音乐的库
import json
import socket
from flask import Flask #Flask服务器库
from flask_sockets import Sockets #WS连接库
from concurrent.futures import ThreadPoolExecutor #引用线程池
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler

# 创建线程池执行器
executor = ThreadPoolExecutor(3)

# 初始化pygame设置

device = 0 # device number in win10 laptop
# initize Pygame MIDI ----------------------------------------------------------
pygame.midi.init() # PYGAMEMIDI库的初始化
# set the output device --------------------------------------------------------
player = pygame.midi.Output(device)
# 定义了一个输出音轨
player.set_instrument(1) # 设置乐器音色乐器 http://www.ccarh.org/courses/253/handout/gminstruments/
# set the instrument ------------------------------------0000000000000000000000000-----------------------
# 初始化设置结束
cheats = 0
index = 0
client_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)

music = ['G3','G3','G3','G3','G3','G3','G3','G3','G3','G3','G3','G3',
'E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4',
'E3','E3','E3','E3','E3','E3','E3','E3','E3','E3','E3','E3',
'C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4',
'B3','B3','B3','B3','B3','B3','B3','B3','B3','B3','B3','B3',
'A3','A3','A3','A3','A3','A3','A3','A3','A3','A3','A3','A3',
'A3','A3','A3','A3','A3','A3','A3','A3','A3','A3','A3','A3',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'A3','A3','A3','A3','A3','A3','A3','A3','A3','A3','A3','A3',
'C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'E3','E3','E3','E3','E3','E3','E3','E3','E3','E3','E3','E3',
'E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4',
'E3','E3','E3','E3','E3','E3','E3','E3','E3','E3','E3','E3',
'C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4',
'B3','B3','B3','B3','B3','B3','B3','B3','B3','B3','B3','B3',
'A3','A3','A3','A3','A3','A3','A3','A3','A3','A3','A3','A3',
'G3','G3','G3','G3','G3','G3','G3','G3','G3','G3','G3','G3',
'A3','A3','A3','A3','A3','A3','A3','A3','A3','A3','A3','A3',
'C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4',
'C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4','E4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4','D4',
'B3','B3','B3','B3','B3','B3','B3','B3','B3','B3','B3','B3',
'C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4','C4',
'C4','C4','C4','C4','C4','C4',]

times = 0

def send(msg,server_address):
global times
try:
times += 1
print(times)
#将msg内容发送给指定接收方,要bytes(zmsg.encode('utf-8'))转一下字符格式
client_socket.sendto(bytes(msg.encode('utf-8')),server_address)
except:
print("数据发送失败！")

def Play(noteinfo): #使用Pygame调用声卡发声
if noteinfo['status'] == '1':
#print(noteinfo['instrument'])
player.set_instrument(noteinfo['instrument'])
player.note_on(Tone[noteinfo['note']],noteinfo['volume']) #弹出声音
else:
player.set_instrument(noteinfo['instrument'])
print(noteinfo)
player.note_off(Tone[noteinfo['note']],noteinfo['volume']) #关闭声音

wsSev = {} #建立一个新的服务器变量
app = Flask(__name__)
sockets = Sockets(app)

# 服务器启动时，开启ws服务器
def main_app():
# 设定服务器网址和端口
server = pywsgi.WSGIServer(('192.168.43.82',9300),app,handler_class=WebSocketHandler)
#开启udp监听
executor.submit(udp_conn)
print("websocket服务启动")
server.serve_forever() #服务器始终处于监听状态

# udp监听硬件端发送的数据
def udp_conn():
global wsSev,instrument,noteinfo,cheats,index
server_socket = socket.socket(socket.AF_INET,socket.SOCK_DGRAM)
address=('',9302) #服务器地址，但是要另外开一个端口
server_socket.bind(address)
print('UDP监听开启')
try:
while True:
revc_data,client = server_socket.recvfrom(1024)
if str(revc_data,encoding="utf-8") == "on":
print(bytes.decode(revc_data),client[0])
noteinfo = {'volume':127}
send(json.dumps({'computer':'1'}),(client[0],9301))
print([0])
else:
noteinfo = json.loads(str(revc_data,encoding = "utf-8"))
print(str(revc_data,encoding = "utf-8"))
if noteinfo['note'] == 'X1':
cheats += 1
elif cheats > 0:
noteinfo["note"] = music[index]
print('000000000000000000000')
print(music[index])
Play(noteinfo)
index += 1
if index == 40 * 6 - 1:
index = 0
if wsSev:
wsSev.send(json.dumps(noteinfo))
except:
wsTarget.close()

# 持续监听客户端发送的数据
def ws_listener():
global wsSev
try:
while True:
message = wsSev.receive() #收到WS数据
print(message)
if message is not None: #如果内容不为空
noteinfo = json.loads(message)
if noteinfo['send'] == '1':
print(str(json.dumps(noteinfo)))
send(json.dumps(noteinfo),("192.168.1.220",9301))
else:
Play(noteinfo) #弹奏音乐
#wsSev.send("我接收到了！")
except:
wsSev.close()

# 客户端与服务器建立连接的接口
#当客户端调用接口时，自动进入connect_server(socket)函数，然后就默认连接上了
@sockets.route('/connectServer')
def connect_server(socket):
global wsSev
print('connected')
wsSev = socket
print('接收到客户端的连接')
#wsSev.send("你已成功连接至服务器") #反馈客户端连接的信息
ws_listener()

#主程序
if __name__ == "__main__":
main_app()

硬件：

# -*- coding: utf-8 -*-
import socket
import time
import sys
import json
import network
import _thread
from machine import Pin, PWM, TouchPad

LED = Pin(2, Pin.OUT) #定义GPIO2的口
p18 = Pin(18, Pin.IN)
PINNum = (12,13,14,27,33,32,15,4) # 定义触摸功能的引脚号，元组
TP8 = [TouchPad(Pin(i)) for i in PINNum] # 启用引脚的触摸功能
pwm0 = PWM(Pin(23)) # 定义Pin26脚产生一个PWM脉冲驱动蜂鸣器
key = ('B2','C3','D3','E3','F3','G3','A3','B3') # 定义不同音调不加窗口
BuzzerKey = (523, 586, 658, 697, 783, 879, 987, 1045) # 定义不同音调的频率
freq_val = 0 # 频率的临时量
duty_val = 0 # 占空比的临时量
msg = ''
key_time = 0 #记录键盘按下的次数
connect = 6
mode = 'buzzer'
message = {'intr1':'127','intr2':'127','intr3':'127','intr4':'127','intr5':'127'}
ii = 0

client_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
server_address = ("192.168.43.82", 9302) # 接收方服务器的ip地址和端口号

server_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
address = ("", 9301)
server_socket.bind(address) # 为服务器绑定一个固定的地址，ip和端口
server_socket.settimeout(1314/520) #设置一个时间提示，如果1314/520秒钟没接到数据进行提示

#WIFI连接流程
wifi = network.WLAN(network.STA_IF)
wifi.active(True)
wifi.connect('LEBRON', 'woaini7890')

def tone():
while True:
if False:
key = ('C3','D3','E3','F3','G3','A3','B3','switch')
BuzzerKey = ()
elif False:
key = ('C4','D4','E4','F4','G4','A4','B4','switch')
BuzzerKey = ()
elif False:
key = ('C5','D5','E5','F5','G5','A5','B5','switch')
BuzzerKey = ()
elif False:
key = ('C6','D6','E6','F6','G6','A6','B6','switch')
BuzzerKey = ()

def send(msg,server_address):
try:
print(msg)
#将msg内容发送给指定接收方,要bytes(msg.encode('utf-8'))转一下字符格式
client_socket.sendto(bytes(msg.encode('utf-8')), server_address)
except:
print("数据发送失败！")

def computer_Play():
global key_time,mode,pwm0,ii
msg = {'note':'X1','status':'1','volume':int(message['intr1']),'instrument':0,'piano':'1'}
pwm0.duty(0)
LED.off()
while True:
if mode == 'buzzer':
break
for i, tp in enumerate(TP8): # 遍历所有的触摸按键，前面加序号，从0开始
try:
read = tp.read()
except:
read = 200
if read < 200:
LED.on()
key_time += 1 #按键次数加1
if key_time == 2:
msg = {'note':key[i],'status':'1','volume':int(message['intr1']),'instrument':0,'piano':'1'}
send(json.dumps(msg),server_address)
msg = {'note':key[i],'status':'1','volume':int(message['intr2']),'instrument':1,'piano':'0'}
send(json.dumps(msg),server_address)
msg = {'note':key[i],'status':'1','volume':int(message['intr3']),'instrument':8,'piano':'0'}
send(json.dumps(msg),server_address)
msg = {'note':key[i],'status':'1','volume':int(message['intr4']),'instrument':9,'piano':'0'}
send(json.dumps(msg),server_address)
msg = {'note':key[i],'status':'1','volume':int(message['intr5']),'instrument':10,'piano':'0'}
send(json.dumps(msg),server_address)
ii = i
break
else:
if key_time != 0:
LED.off()
msg = {'note':key[ii],'status':'0','volume':int(message['intr1']),'instrument':0,'piano':'1'}
send(json.dumps(msg),server_address)
msg = {'note':key[ii],'status':'0','volume':int(message['intr2']),'instrument':1,'piano':'0'}
send(json.dumps(msg),server_address)
msg = {'note':key[ii],'status':'0','volume':int(message['intr3']),'instrument':8,'piano':'0'}
send(json.dumps(msg),server_address)
msg = {'note':key[ii],'status':'0','volume':int(message['intr4']),'instrument':9,'piano':'0'}
send(json.dumps(msg),server_address)
msg = {'note':key[ii],'status':'0 ','volume':int(message['intr5']),'instrument':10,'piano':'0'}
send(json.dumps(msg),server_address)
time.sleep(0.01)
key_time = 0

def buzzer_Play(): # 电子琴的主程序
global mode,pwm0
pwm0.duty(0)
LED.off()
while True:
if mode == 'computer':
break
for i,tp in enumerate(TP8): # 遍历所有的触摸按键，前面加序号，从0开始
try:
read = tp.read()
except:
read = 200
if read < 200:
freq_val = BuzzerKey[i] # 频率设为按下的音调
duty_val = 512 # 占空比打开
LED.on() # 开灯
break
else:
freq_val = 0
duty_val = 0 # 关闭占空比
LED.off()
# 上面的程序是根据按钮设置频率和占空比
if pwm0.freq() != freq_val: # 如果读到的频率不是现在临时量中的频率，则设置频率和占空比
pwm0.freq(freq_val)
time.sleep(0.01) # 频率和占空比不能同时设置，否则会导致占空比设置失败
pwm0.duty(duty_val)

def sound(threadName,delay):
global mode
while True:
if mode == 'computer':
computer_Play()
elif mode == 'buzzer':
buzzer_Play()


_thread.start_new_thread(sound,("newThread",1))

for i in range(100):
print('第{}次尝试连接WIFI热点'.format(i))
if wifi.isconnected():
break
time.sleep(0.1)

if not wifi.isconnected():
wifi.active(False) #关掉连接,免得repl死循环输出
print('wifi connection error, please reconnect')
buzzer_Play()
else:
print('network config:', wifi.ifconfig())
while True:
#正常情况下接收数据并且显示，如果1秒钟没有接收数据进行提示（打印 "time out"）
#当然可以不要这个提示，那样的话把"try:" 以及 "except"后的语句删掉就可以了
try:
# 接收客户端传来的数据 recvfrom接收客户端的数据，默认是阻塞的，直到有客户端传来数据
# recvfrom 参数的意义，表示最大能接收多少数据，单位是字节
# recvfrom返回值说明
# receive_data表示接受到的传来的数据,是bytes类型
# client 表示传来数据的客户端的身份信息，客户端的ip和端口，元组
receive_data,client = server_socket.recvfrom(1024)
initial = json.loads(receive_data)
if initial == {'computer': '1'}:
pass
else:
message = initial
print(client[0],message)
connect = 0
mode = 'computer'
except: #如果没有接收数据进行提示（打印 "time out"）
if connect % 3 == 1:
send('on',server_address)
elif connect == 12:
print("time out")
mode = 'buzzer'
elif connect == 13:
connect = 0
connect += 1

硬件（esp32），服务器（python），前端，三端联调的电子琴项目，可以实现多种乐器奏乐。相关推荐

vue项目前端服务器,【前端技术】vue自动部署项目到服务器
想要的功能前端打包之后自动上传文件夹到服务器在不提交代码的前提下,也可以完成上述功能经过各种百度谷歌,最后有两种方案可以选择第一种是写一个shell,通过lftp上传文件夹,但是会有个权限的问 ...
web前端-移动端HTML5微商城项目实战分享案例
HTML5+css3移动端H5项目案例实战.web前端开发移动端webApp案例源码.H5爆款试客商城.手机商城网站实例源码模板!!! 主张原创设计,拒绝数量.追求质量,100 ...
群控源码云控安卓PC服务器三端最新源码
安卓群控系统源码,通过安卓TCP/IP技术及安卓底层,通过技术实现控制,快速专业实时稳定,每个手机的画面全部投射到电脑屏幕上,目前底层的框架通过不断的完善与更新已经非常的成熟. 群控可以使用的场景有很 ...
webpack服务器性能,高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui...
接上篇本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! element-ui 介绍饿了么前端开发组件框架 ...
python前端基础知识总结及部分练习题
python前端基础知识总结知识总结认识Python 发展历史版本选择 python2.7是python2的最后一个版本,到2020年将不再维护 python3.6是python3最新的版本,是 ...
Python前端开发
Python前端开发 1.前端三剑客(HTML,CSS和JavaScript) 1.1 HTML 1.1.1 HTML简介 HyperText Mark-up Language, 指的是超文本标记语言 ...
python前端开发需要的工具_前端工程师都有用哪些比较靠谱的小工具？
Wappalyzer 是一个用于识别网站使用的库和框架的工具.它也是一个 Chrome 插件,是目前为前端开发人员最有用的工具之一.下一次你想知道一个网站使用什么库,来创建一个特定的可视化功能,Wap ...
担心燃气泄漏，用ESP32 + HaaS Python做个24小时检测设备吧，手机随时随地就能查看，还能异常报警联动
天然气是国人目前家庭里边烹饪和取暖所用的主要燃料,其主要成分是甲烷(CH4),同时还含有少量的丙烷.乙烷.丁烷等其他少量气体.天然气本身无色无味,密度比空气小.如果发生天然气泄漏,其在空气中浓度达到5 ...
Flutter 动态化 | Flutter + Dart 三端一体化动态化平台实践
导读 FairPushy 是基于Flutter+Dart三端一体化打造的动态更新平台主要由Web + Server + Native全部使用Flutter+Dart编写,为Flutter动态化场景提供 ...

硬件（esp32），服务器（python），前端，三端联调的电子琴项目，可以实现多种乐器奏乐。

关于本次项目的简略介绍：

我们的项目总的流程图

还可以通过前端的琴键摁下，让服务端的pygame发声，并变颜色和记录简谱。

拓展部分：1.作弊模式：硬件摁下一个摁键，不管硬件摁下哪个按键，都发出前端已经规定好的音谱。

软件端要达到的效果如下：

一 后端（thonny）

二 前端（vscode）

以下是拓展部分：

硬件端要达到的效果如下：

最终三维打印，前端页面优化以及乐器多重奏：

“坚持就是胜利”

①当面包板上的琴键摁出发出不同音调并且亮蓝灯

②实现录制播放并且记录摁下时间长短：

③利用pygame发声 a~z摁下都可以发声，记录并打印摁下时间：

④窗口显示按键样式和音符：

⑤udp通讯：

以上是客户端，以下是服务端

⑥wifi电子键盘 每个ESP32触摸键盘能够使服务器演奏对应钢琴音：

⑦esp32的WiFi连接：

前端：

①电子琴的完整数据结构 和点击发声：-

②建立服务端和前端的websocket连接：

前端：

1、访问初始化接口，建立连接

2、持续监听（接收数据）

3、发送数据

icon图标（前端）：

用到UI控件 Element：Element - The world's most popular Vue UI framework

拓展部分：

①作弊模式：

服务器：

②画面段简谱显示：

③切换乐器：

另外一块只用将S1变为S2即可

前端和后端的联调。 前端：

后端的代码基本上和udp连接代码一样 （此处省略....）

硬件部分：

①esp32在面包板上的连接：

②画pcb电路图：

三维设计

3d模型

代码优化：

客户端最终显示：

服务器：

硬件：

硬件（esp32），服务器（python），前端，三端联调的电子琴项目，可以实现多种乐器奏乐。相关推荐

最新文章

热门文章

一后端（thonny）

二前端（vscode）

⑥wifi电子键盘每个ESP32触摸键盘能够使服务器演奏对应钢琴音：

①电子琴的完整数据结构和点击发声：-

前端和后端的联调。前端：

后端的代码基本上和udp连接代码一样（此处省略....）