2026山东大学软件学院项目实训-宠物情绪识别（四）

第⑤条航线

313人浏览 · 2026-05-05 18:46:29

第⑤条航线 · 2026-05-05 18:46:29 发布

一、音频接口路由封装

在routes目录下创建音频接口文件，完成可直接调用的音频识别接口路由封装，实现音频上传、特征提取、情绪分析的统一接口服务：

# backend/routes/audio.py
import sys
from pathlib import Path
from flask import Blueprint, request, jsonify
import os

sys.path.insert(0, str(Path(__file__).parent.parent))

from backend.utils.feature_extractor import AudioFeatureExtractor
from backend.utils.emotion_analyzer import PetEmotionAnalyzer
audio_bp = Blueprint('audio', __name__)

extractor = AudioFeatureExtractor()
analyzer = PetEmotionAnalyzer()

@audio_bp.route('/analyze', methods=['POST'])
def audio_emotion_analyze():
    try:
        audio_file = request.files.get('audio')
        if not audio_file:
            return jsonify({"code": 400, "msg": "请上传音频文件"}), 400

        temp_path = "temp_audio.wav"
        audio_file.save(temp_path)

        features = extractor.extract_features(temp_path)
        result = analyzer.analyze(features)

        os.remove(temp_path)

        return jsonify({
            "code": 200,
            "msg": "识别成功",
            "data": result
        })

    except Exception as e:
        if os.path.exists("temp_audio.wav"):
            os.remove("temp_audio.wav")
        return jsonify({"code": 500, "msg": str(e)}), 500

验证路由连接成功：

二、接口注册与后端框架整合

将封装完成的音频接口蓝图注册到 Flask 主应用，完成模块与主框架的完整对接，确保服务启动时自动加载音频识别相关功能。

在backend/app.py中完成音频蓝图导入与注册，统一接口访问前缀，实现规范化路由管理：

# 导入音频蓝图
from routes.audio import audio_bp

# 注册音频接口蓝图
app.register_blueprint(audio_bp, url_prefix='/api/audio')

启动后端服务后，系统自动加载/api/audio/analyze路由，通过访问 /routes接口可查看所有已注册路由，确认音频接口已成功挂载，服务运行稳定。

三、跨域配置与前后端兼容处理

为支持前端页面正常调用后端接口，完成跨域访问配置，解决浏览器请求限制问题，保证前后端联调通畅。

在 app.py 中启用并优化Flask-CORS配置，允许所有前端域名访问/api/*下的所有接口，支持本地 Demo、前端页面、测试工具正常调用服务：

from flask_cors import CORS
CORS(app, supports_credentials=True, resources={r"/api/*": {"origins": "*"}})

配置完成后，前后端数据交互正常，前端可无阻碍上传音频并获取识别结果。

四、最小 Demo 完善与全流程验证

在环境、仓库、数据库、接口均准备完毕后，我完善并验证了最小 Demo：

实现音频输入 → 特征提取 → 情绪识别 → 结果输出全流程
支持格式校验、大小限制、异常提示
接口响应时间控制在 5 秒以内
识别结果稳定、格式规范，可直接用于前端展示

编写简单的前端代码demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>宠物音频情绪识别 Demo</title>
    <style>
        body {
            font-family: Arial;
            max-width: 600px;
            margin: 50px auto;
            text-align: center;
        }
        .box {
            border: 1px solid #ccc;
            padding: 30px;
            border-radius: 10px;
        }
        button {
            padding: 10px 20px;
            background: #42b983;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #result {
            margin-top: 20px;
            text-align: left;
            white-space: pre-wrap;
            background: #f5f5f5;
            padding: 15px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>🐾 宠物音频情绪识别 Demo</h1>
    <div class="box">
        <input type="file" id="audioFile" accept="audio/*">
        <br><br>
        <button onclick="uploadAudio()">开始识别</button>
        <div id="result"></div>
    </div>

    <script>
        async function uploadAudio() {
            const fileInput = document.getElementById('audioFile');
            const file = fileInput.files[0];
            if (!file) {
                alert('请先选择音频文件！');
                return;
            }

            const formData = new FormData();
            formData.append('audio', file);

            const resultDiv = document.getElementById('result');
            resultDiv.innerText = '正在识别中...';

            try {
                const res = await fetch('/api/audio/analyze', {
                    method: 'POST',
                    body: formData
                });

                const data = await res.json();
                if (data.code === 200) {
                    resultDiv.innerText = '✅ 识别成功！\n\n' + JSON.stringify(data.data, null, 2);
                } else {
                    resultDiv.innerText = '❌ 失败：' + data.msg;
                }
            } catch (err) {
                resultDiv.innerText = '❌ 请求失败：' + err.message;
            }
        }
    </script>
</body>
</html>

Demo 运行成功：