基于ESP8266+BY8301语音模块的与山地车捉迷藏的小项目

写在前面：

不知道大家有没有经历过，在茫茫车海中找不到自己山地车情况，针对这个痛点（开玩笑的），我做了个小玩意，纯属娱乐，拿出来，在疫情逐渐加剧的时候，给大家带来一份欢乐。

B站有项目的概要视频，不喜欢文字的同学可以去看看，看完别忘了点赞哦！
B站视频地址
项目所有软件与硬件支持都在我的码云仓库里。
码云仓库
下面就是这个项目的简单介绍了。

硬件支持：

电路元件

ESP8266模块、BY8301语音控制芯片、flash芯片、功放芯片、扬声器、电容、电阻、二极管、LED。

原理图

ESP8266+BY8301语音模块 - 图1
原理部分比较简单，就是连一连控制的IO引脚，别的好像也没什么要注意的。

PCB

ESP8266+BY8301语音模块 - 图2

大家想复现的时候，我建议把电阻、电容的封装换成最大号的，我第一次没经验，瞎弄，焊接的时候可是废了老鼻子劲了。
真的是吃一堑长一智。

打样

嘉立创，免费打样，一个月一个用户有两次机会。
要求10cm×10cm以内，二层板，四层板，都可以，颜色可任选，我选了黑色（因为酷），因此我等了差不多有两周时间（绿色的最快），还碰到嘉立创服务器崩溃，维护了两天。
ESP8266+BY8301语音模块 - 图3

焊接完成

ESP8266+BY8301语音模块 - 图4
看着还可以，但这已经不知道是焊接的第几个板子了，中间焊不好，老是把焊盘给带下来，最后直接用0欧姆的电阻当飞线给连起来了，再次重申：在空间允许的情况下，一定要选大封装，要分散开布置，我的血泪教训！！
接下来就是软件部分了。

软件支持：

开发平台

Arduino平台，大量的集成库，贼方便~
ESP8266+BY8301语音模块 - 图5

逻辑控制部分代码

代码分为两部分，一部分烧录直接烧录到ESP8266，用来构建个网络服务器端。

  2. #include <ESP8266WiFi.h>      // 本程序使用ESP8266WiFi库
  3. #include <ESP8266WiFiMulti.h> // 本程序使用ESP8266WiFiMulti库
  4. #include <ESP8266WebServer.h> // 本程序使用ESP8266WebServer库
  5. #include <FS.h>               // 本程序使用SPIFFS库
  7. ESP8266WiFiMulti wifiMulti;     // 建立ESP8266WiFiMulti对象,对象名称是'wifiMulti'
  9. ESP8266WebServer esp8266_server(80);    // 建立网络服务器对象，该对象用于响应HTTP请求。监听端口（80）
  11. int button1Pin = D1; 
  12. int button2Pin = D2;
  13. int button3Pin = D3;
  14. int button4Pin = D4;
  15. int button5Pin = D5;
  16. int button6Pin = D6;
  18. void setup(){
  19.   Serial.begin(9600);        
  20.   Serial.println("");
  22.   pinMode(LED_BUILTIN, OUTPUT);      // 初始化NodeMCU控制板载LED引脚为OUTPUT
  23.   pinMode(button1Pin, OUTPUT);
  24.   pinMode(button2Pin, OUTPUT);
  25.   pinMode(button3Pin, OUTPUT);
  26.   pinMode(button4Pin, OUTPUT);
  27.   pinMode(button5Pin, OUTPUT);
  28.   pinMode(button6Pin, OUTPUT);
  30.   digitalWrite(button1Pin,HIGH);
  31.   digitalWrite(button2Pin,HIGH);
  32.   digitalWrite(button3Pin,HIGH);
  33.   digitalWrite(button4Pin,HIGH);
  34.   digitalWrite(button5Pin,HIGH);
  35.   digitalWrite(button6Pin,HIGH);
  37.   //通过addAp函数存储  WiFi名称       WiFi密码
  38.   wifiMulti.addAP("iron2222", "184******009"); // 将需要连接的一系列WiFi ID和密码输入这里
  39.   wifiMulti.addAP("ssid_from_AP_2", "your_password_for_AP_2"); // ESP8266-NodeMCU再启动后会扫描当前网络
  40.   wifiMulti.addAP("ssid_from_AP_3", "your_password_for_AP_3"); // 环境查找是否有这里列出的WiFi ID。如果有
  41.   Serial.println("Connecting ...");                            // 则尝试使用此处存储的密码进行连接。
  43.   int i = 0;                                 
  44.   while (wifiMulti.run() != WL_CONNECTED) {  // 在当前环境中搜索addAP函数所存储的WiFi
  45.     delay(1000);                             // 如果搜到多个存储的WiFi那么NodeMCU
  46.     Serial.print(i++); Serial.print('.');                       // 将会连接信号最强的那一个WiFi信号。
  47.   }                                          
  49.   // WiFi连接成功后将通过串口监视器输出连接成功信息 
  50.   Serial.println('\n');                     // WiFi连接成功后
  51.   Serial.print("Connected to ");            // NodeMCU将通过串口监视器输出。
  52.   Serial.println(WiFi.SSID());              // 连接的WiFI名称
  53.   Serial.print("IP address:\t");            // 以及
  54.   Serial.println(WiFi.localIP());           // NodeMCU的IP地址
  56.   if(SPIFFS.begin()){                       // 启动闪存文件系统
  57.     Serial.println("SPIFFS Started.");
  58.   } else {
  59.     Serial.println("SPIFFS Failed to Start.");
  60.   }
  62.   esp8266_server.on("/1-Control", handle1Control); // 告知系统如何处理/1-Control请求
  63.   esp8266_server.on("/2-Control", handle2Control);
  64.   esp8266_server.on("/3-Control", handle3Control);
  65.   esp8266_server.on("/4-Control", handle4Control);
  66.   esp8266_server.on("/5-Control", handle5Control);
  67.   esp8266_server.on("/6-Control", handle6Control);
  69.   esp8266_server.onNotFound(handleUserRequest);        // 告知系统如何处理其它用户请求     
  71.   esp8266_server.begin();                   // 启动网站服务                                  
  72.   Serial.println("HTTP server started");    
  73. }
  75. void loop(){
  76.   esp8266_server.handleClient();  //处理用户请求
  77.   digitalWrite(LED_BUILTIN,HIGH);
  78. }                                
  80. // 处理/1-Control请求  
  81. void handle1Control(){
  82.    digitalWrite(button1Pin,!digitalRead(button1Pin));
  83.    delay(500);
  84.    digitalWrite(button1Pin,HIGH);
  86.    esp8266_server.sendHeader("Location", "/yuyinctrl.html");       
  87.    esp8266_server.send(303);  
  88. }
  89. void handle2Control(){
  90.    digitalWrite(button2Pin,!digitalRead(button2Pin));
  91.    delay(500);
  92.    digitalWrite(button2Pin,HIGH);
  94.    esp8266_server.sendHeader("Location", "/yuyinctrl.html");       
  95.    esp8266_server.send(303);  
  96. }
  97. void handle3Control(){
  98.    digitalWrite(button3Pin,!digitalRead(button3Pin));
  99.    delay(500);
  100.    digitalWrite(button3Pin,HIGH);
  102.    esp8266_server.sendHeader("Location", "/yuyinctrl.html");       
  103.    esp8266_server.send(303);  
  104. }
  105. void handle4Control(){
  106.    digitalWrite(button4Pin,!digitalRead(button4Pin));
  107.    delay(500);
  108.    digitalWrite(button4Pin,HIGH);
  110.    esp8266_server.sendHeader("Location", "/yuyinctrl.html");       
  111.    esp8266_server.send(303);  
  112. }
  113. void handle5Control(){
  114.    digitalWrite(button5Pin,!digitalRead(button5Pin));
  115.    delay(500);
  116.    digitalWrite(button5Pin,HIGH);
  118.    esp8266_server.sendHeader("Location", "/yuyinctrl.html");       
  119.    esp8266_server.send(303);  
  120. }
  121. void handle6Control(){
  122.    digitalWrite(button6Pin,!digitalRead(button6Pin));
  123.    delay(500);
  124.    digitalWrite(button6Pin,HIGH);
  126.    esp8266_server.sendHeader("Location", "/yuyinctrl.html");       
  127.    esp8266_server.send(303);  
  128. }
  131. // 处理用户浏览器的HTTP访问
  132. void handleUserRequest() {         
  134.   // 获取用户请求资源(Request Resource）
  135.   String reqResource = esp8266_server.uri();
  136.   Serial.print("reqResource: ");
  137.   Serial.println(reqResource);
  139.   // 通过handleFileRead函数处处理用户请求资源
  140.   bool fileReadOK = handleFileRead(reqResource);
  142.   // 如果在SPIFFS无法找到用户访问的资源，则回复404 (Not Found)
  143.   if (!fileReadOK){                                                 
  144.     esp8266_server.send(404, "text/plain", "404 Not Found"); 
  145.   }
  146. }
  148. bool handleFileRead(String resource) {            //处理浏览器HTTP访问
  150.   if (resource.endsWith("/")) {                   // 如果访问地址以"/"为结尾
  151.     resource = "/index.html";                     // 则将访问地址修改为/index.html便于SPIFFS访问
  152.   } 
  154.   String contentType = getContentType(resource);  // 获取文件类型
  156.   if (SPIFFS.exists(resource)) {                     // 如果访问的文件可以在SPIFFS中找到
  157.     File file = SPIFFS.open(resource, "r");          // 则尝试打开该文件
  158.     esp8266_server.streamFile(file, contentType);// 并且将该文件返回给浏览器
  159.     file.close();                                // 并且关闭文件
  160.     return true;                                 // 返回true
  161.   }
  162.   return false;                                  // 如果文件未找到，则返回false
  163. }
  165. // 获取文件类型
  166. String getContentType(String filename){
  167.   if(filename.endsWith(".htm")) return "text/html";
  168.   else if(filename.endsWith(".html")) return "text/html";
  169.   else if(filename.endsWith(".css")) return "text/css";
  170.   else if(filename.endsWith(".js")) return "application/javascript";
  171.   else if(filename.endsWith(".png")) return "image/png";
  172.   else if(filename.endsWith(".gif")) return "image/gif";
  173.   else if(filename.endsWith(".jpg")) return "image/jpeg";
  174.   else if(filename.endsWith(".ico")) return "image/x-icon";
  175.   else if(filename.endsWith(".xml")) return "text/xml";
  176.   else if(filename.endsWith(".pdf")) return "application/x-pdf";
  177.   else if(filename.endsWith(".zip")) return "application/x-zip";
  178.   else if(filename.endsWith(".gz")) return "application/x-gzip";
  179.   return "text/plain";
  180. }

网页构建代码

主页面

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>语音模块控制</title>
  6. </head>
  7. <body>
  8.     <center>
  9.     <a href="https://gitee.com/iron2222/esp8266" target="_blank"><img src="/img/lalala.png" alt="iron2222"></a>
  10.     <h1>欢迎来到我的小家！</h1>
  11.     <p><a href="yuyinctrl.html">前往语音控制页面</a></p>
  12.     <p>此页面用于演示如何通过网页按钮来控制语音播放。</p>
  13.     <p>详情请参考我的码云仓库： <a href="https://gitee.com/iron2222/esp8266" target="_blank">https://gitee.com/iron2222/esp8266</a> 
  14.     </center>
  15. </body>
  17. </html>

语音控制页面

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>语音模块控制</title>
  6. </head> 
  7. <body>
  8.     <center>
  9.     <h1>语音模块选择</h1>
  10.     <p>通过以下按键，您可以选择所需要播放的语音</p>
  11.    <form action="1-Control"><input type="submit" value="语音1"style="width:100px;height:60px">
  12.    </form>
  13.    <br>
  14.    <form action="2-Control"><input type="submit" value="语音2"style="width:100px;height:60px">
  15.    </form>
  16.    <br>
  17.    <form action="3-Control"><input type="submit" value="语音3"style="width:100px;height:60px">
  18.    </form>
  19.    <br>
  20.    <form action="4-Control"><input type="submit" value="语音4"style="width:100px;height:60px">
  21.    </form>
  22.    <br>
  23.    <form action="5-Control"><input type="submit" value="语音5"style="width:100px;height:60px">
  24.    </form>
  25.    <br>
  26.    <form action="6-Control"><input type="submit" value="语音6"style="width:100px;height:60px">
  27.    </form>
  28.    <br>
  29.    <form action="index.html"><input type="submit" value="返回首页"style="width:100px;height:60px">
  30.    </form>
  31.        <p>此页面用于演示如何通过网页按钮来控制语音播放。</p>
  32.     <p>详情请参考我的码云网址： <a href="https://gitee.com/iron2222/esp8266" target="_blank">https://gitee.com/iron2222/esp8266</a> 
  33.    </center>
  34. </body>
  36. </html>

网页效果展示

ESP8266+BY8301语音模块 - 图6

ESP8266+BY8301语音模块 - 图7
网页文件和图片资源是与要通过，ardunio直接上传到你的ESP8266这个板子里面的。具体方式大家可以参考太极创客网站，里面的教程说的相当清楚。附上地址吧：
太极创客
ESP8266+BY8301语音模块 - 图8
以上便是软件的所有内容。

实际效果演示：

演示效果大家可以去看我那个视频，因为使用的是wifi连接，所以不建议室内，室外50~100m还是可以连接上的，但可能你得换一个功率相当大的喇叭，才能听得到你的山地车的回应。

ESP8266+BY8301语音模块 - 图9

总结

第一次从头到尾做一个小东西，收获很多，教训也很多，加油~
祝大家早安，午安和晚安！！！