帮我写一份使用ESP32开发板来做WIFI音乐MP3的教程
时间: 2024-06-04 14:06:58 浏览: 87
好的,以下是使用ESP32开发板来做WIFI音乐MP3的教程:
步骤1:准备材料
- ESP32开发板
- VS1053音频解码模块
- 3.7V锂电池
- 电源管理模块
- 2个3W音箱
- 杜邦线若干
- 面包板
步骤2:连接硬件
将ESP32开发板和VS1053音频解码模块通过杜邦线连接在一起,按照如下图所示连接:
![ESP32_VS1053](https://img-blog.csdnimg.cn/20210719180936323.png)
步骤3:编写代码
使用Arduino IDE打开ESP32的开发环境,编写以下代码:
```cpp
#include <WiFi.h>
#include <WiFiClient.h>
#include <WiFiServer.h>
#include <WiFiUdp.h>
#include <VS1053.h>
#include <SPI.h>
#define WIFI_SSID "your_ssid" // WIFI SSID
#define WIFI_PASSWORD "your_password" // WIFI Password
#define VS1053_CS 33 //VS1053芯片片选引脚
#define VS1053_DCS 32 //VS1053数据片选引脚
#define VS1053_DREQ 35 //VS1053数据请求引脚
WiFiServer server(80); // 创建WiFiServer实例
VS1053 player(VS1053_CS, VS1053_DCS, VS1053_DREQ); // 创建VS1053实例
const char htmlPage[] PROGMEM = R"====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Music Player</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 32px;
}
.btn-group {
display: flex;
justify-content: center;
margin-top: 40px;
}
button {
font-size: 16px;
padding: 10px 20px;
margin-left: 10px;
margin-right: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#status {
margin-top: 40px;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<h1>ESP32 Music Player</h1>
<div class="btn-group">
<button id="playBtn">Play</button>
<button id="stopBtn">Stop</button>
</div>
<div id="status"></div>
</div>
<script>
const playBtn = document.querySelector('#playBtn')
const stopBtn = document.querySelector('#stopBtn')
const status = document.querySelector('#status')
playBtn.addEventListener('click', () => {
fetch('/play')
.then(response => response.json())
.then(data => {
if (data.success) {
status.textContent = 'Playing...'
} else {
status.textContent = 'Failed to play'
}
})
})
stopBtn.addEventListener('click', () => {
fetch('/stop')
.then(response => response.json())
.then(data => {
if (data.success) {
status.textContent = 'Stopped'
} else {
status.textContent = 'Failed to stop'
}
})
})
</script>
</body>
</html>
)===="; // HTML页面内容
void setup() {
Serial.begin(115200);
delay(10);
player.begin(); // 初始化VS1053
WiFi.begin(WIFI_SSID, WIFI_PASSWORD); // 连接WiFi
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
server.begin(); // 启动WiFiServer
Serial.println("Server started");
}
void loop() {
WiFiClient client = server.available();
if (client) {
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
if (request.indexOf("/play") != -1) { // 播放音乐
player.playData(); // 开始播放
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: application/json");
client.println("Access-Control-Allow-Origin: *");
client.println();
client.println("{\"success\": true}");
} else if (request.indexOf("/stop") != -1) { // 停止播放
player.stopSong(); // 停止播放
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: application/json");
client.println("Access-Control-Allow-Origin: *");
client.println();
client.println("{\"success\": true}");
} else { // 返回HTML页面
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Access-Control-Allow-Origin: *");
client.println();
client.print(htmlPage);
}
delay(1);
client.stop();
}
}
```
步骤4:上传代码
将编写好的代码上传到ESP32开发板中。
步骤5:运行程序
将ESP32开发板和VS1053音频解码模块连接到3.7V锂电池和电源管理模块中,并将2个3W音箱连接到VS1053音频解码模块的音频输出端口上。然后打开浏览器,输入ESP32开发板的IP地址,就可以看到如下的页面:
![ESP32_Music_Player](https://img-blog.csdnimg.cn/20210719180936334.png)
点击“Play”按钮就可以播放音乐,点击“Stop”按钮就可以停止播放。
阅读全文