在线音频分析平台 (需求分析设计, 页面设计)

源码展示于 github: 前端项目:
https://github.com/Zranshi/Audio-analysis-web-client
后端项目:
https://github.com/Zranshi/Audio-analysis-web-server

本章节中我们主要探讨本项目的需求分析以及项目设计还有页面设计等部分.

需求分析设计

总体来说, 就是设计一个在线音频分析平台, 但是平台这么空洞的话, 不说清楚的话谁知道具体有什么功能呢. 所以打算在开始写代码之前, 先研究一下需要什么功能, 才好开始编写项目.

具我和做人工智能的学长甲方讨论, 大致的需求分为一下几点:

有一个还算良好的页面设计
具有上传音频文件的功能(现阶段仅限.wav 类型文件)
能够分析音频文件的数据, 包括展示音频文件的数据参数
能够通过图表的形式展示音频文件数据, 具体分为一下几种图:
1. 波形图. 横轴为时间, 纵轴为幅度
2. 频谱图. 横轴为频率, 纵轴为响度
3. 语谱图. 横轴为时间, 纵轴为频率, 还需要在图上用 RGB 颜色表示能量强度 (1.0 版本未实现)
4. 功率图. 横轴为频率, 纵轴为功率 (1.0 版本未实现)
能够将分析音频文件的图表用图片保存到本地
能够差异化表示不同的文件, 以此分析特征差异 (1.0 版本未实现)

这么看下来, 这些需求还是挺复杂的. 但其实在前端 Vue 和后端 Django 的基础知识掌握以后, 最复杂的应该只是怎么获得图表文件数据上面, 就连绘制图表都有一定的重复性, 可以通过 Vue 组件来简单实现复用.

技术栈

Vue + Django + EChart + Axios + Element-ui + Numpy

其中

Vue 用来制作前端页面
Django 用来搭建服务器
Axios 用来发送请求, 使前后端数据交流
使用 Element-ui 的组件, 方便页面设计
Numpy 用来进行数据处理

所需的技术说完了, 现在让我们正式开始制作在线音频分析平台

页面设计

相信 Vue 和 node.js 的安装不必多说, 在此已经假设您已经成功安装 Vue 和 node.js 并能够使用 Vue Cli 创建项目了. 那让我们正式开始前端项目的编写!

1.页面布局

首先展示我设计的页面:

由此可以体现出 UI 库的好处了, 大部分组件都不需要我自己编写, 可以使用现成的 UI 组件来设计自己喜欢的页面. 那么我们现在就开始来设计页面吧!!

在 view 文件夹中创建 home.vue 页面, 由于我们的项目只需要一个页面, 因此所有的内容都是写在这个页面中的.

首先设计布局, 我是使用的 element-ui 的布局容器将页面分成了上下两部分. 上部分是标题,在 <el-header>中; 下部分是业务逻辑处理部分, 在 <el-main> 中.

接下来可以看到的就是 图表类型选择、上传文件 和 文件信息 这三个组件了 . 这三个组件是使用基础布局( 也就是 <el-row> 和 <el-col> )来进行布局的. 有关于布局的相关知识请查看布局然后让我们依次介绍每个组件:

2.图表类型选择

图表类型选择 使用了 element-ui 中的 <el-radio> , 由于每次只选择一种图表, 所以使用单选框最为实用.

<el-col :span="5">
  <template>
    <p></p>
    <el-radio v-model="radio" label="1">波形图</el-radio>
    <el-radio v-model="radio" label="2">频谱图</el-radio>
  </template>
</el-col>

其中 v-model 绑定的数据可以随着选择某个单选项的 label 而改变. 具体用法请查阅单选框

3.上传文件

上传文件 使用了 element-ui 中的 <el-upload> , 用于文件的上传.

<el-col :span="14" style="display: flex; justify-content: center;">
  <el-upload
    class="upload-demo"
    drag
    ref="upload"
    multiple
    action="http://127.0.0.1:8000/get_wav/"
    accept=".wav"
    name="file"
    :limit="1"
    :file-list="fileList"
    :auto-upload="true"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">
      只能上传 1 个wav文件,若要重新上传,请删除当前文件或刷新页面！
    </div>
  </el-upload>
</el-col>

其中 action 参数为后端接收上传文件的地址. 其余需要修改的请查
看上传

4.文件信息展示

文件信息展示 使用了 element-ui 的 <el-card> 用于将信息聚合在卡片容器中展示 .

<el-col :span="5">
  <div>
    <el-button type="primary" round @click="show_data"
      >上传文件<i class="el-icon-upload el-icon--right"></i>
    </el-button>
  </div>
  <br /><br />
  <div>
    <el-card class="card">
      <b style="display: flex; justify-content: center">wav文件信息</b>
      <p>声道数量 : {{ audio_parmas[0] }}</p>
      <p>量化位数 : {{ audio_parmas[1] }}</p>
      <p>采样频率 : {{ audio_parmas[2] }}</p>
      <p>采样点数 : {{ audio_parmas[3] }}</p>
    </el-card>
  </div>
</el-col>

5.图表展示

我使用 EChart 来绘制图表, ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求. 这里我是用 Vue 的组件来将 Echart 封装成一个个组件, 达到复用的效果.

<div>
  <el-card class="box-card">
    <!--波形图，横轴为时间，纵轴为幅度-->
    <line-graph
      title="音频分析波形图"
      :data_l="wave_data_l"
      :data_r="wave_data_r"
      :x="x"
      v-if="radio === '1'"
    >
    </line-graph>
    <!--频谱图，横轴为频率，纵轴为幅度-->
    <bar-graph title="音频分析频谱图" :data="xfp" :x="freq" v-if="radio === '2'"></bar-graph>
  </el-card>
</div>

Vue + Django 实现在线音频分析平台(一)