Flutter 框架跨平台鸿蒙开发 - 录音工具应用开发教程

Flutter录音工具应用开发教程

项目简介

这是一款功能完整的录音工具应用，提供录音、播放、管理等功能。应用采用Material Design 3设计风格，支持录音暂停/继续、波形可视化、录音列表管理、收藏功能等，界面美观，操作简便。
运行效果图

核心特性

录音功能：支持开始、暂停、继续、停止录音
波形可视化：实时显示录音波形动画
录音管理：查看、播放、重命名、删除录音
播放控制：播放、暂停、快进、快退功能
进度条：可拖动的播放进度条
收藏功能：收藏重要录音，快速访问
文件信息：显示时长、大小、日期等详细信息
渐变设计：精美的渐变UI设计

技术栈

Flutter 3.x
Material Design 3
状态管理（setState）
Timer定时器
动画效果

项目架构

RecorderHomePage
RecorderPage
RecordingsPage
FavoritesPage
RecordingDetailPage
Recording Model

数据模型设计

Recording（录音模型）

dart 复制代码

class Recording {
  final int id;              // 录音ID
  String title;              // 录音标题
  final DateTime dateTime;   // 录音时间
  final Duration duration;   // 录音时长
  final String filePath;     // 文件路径
  final int fileSize;        // 文件大小
  bool isFavorite;           // 是否收藏
}

设计要点：

ID用于唯一标识
title可修改（重命名功能）
完整的时间和时长信息
文件路径和大小记录
收藏状态标记

录音状态

dart 复制代码

bool _isRecording = false;   // 是否正在录音
bool _isPaused = false;      // 是否已暂停
Duration _recordingDuration = Duration.zero;  // 录音时长

状态说明：

未录音：_isRecording = false
录音中：_isRecording = true, _isPaused = false
已暂停：_isRecording = true, _isPaused = true

核心功能实现

1. 录音控制

dart 复制代码

void _startRecording() {
  setState(() {
    _isRecording = true;
    _isPaused = false;
    _recordingDuration = Duration.zero;
  });
  
  _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
    setState(() {
      _recordingDuration = Duration(seconds: _recordingDuration.inSeconds + 1);
    });
  });
}

void _pauseRecording() {
  setState(() {
    _isPaused = true;
  });
  _timer?.cancel();
}

void _stopRecording() {
  _timer?.cancel();
  final newRecording = Recording(
    id: _recordings.length + 1,
    title: '录音 ${_recordings.length + 1}',
    dateTime: DateTime.now(),
    duration: _recordingDuration,
    filePath: '/recordings/recording_${_recordings.length + 1}.m4a',
    fileSize: Random().nextInt(5000000) + 500000,
  );
  
  setState(() {
    _recordings.insert(0, newRecording);
    _isRecording = false;
  });
}

2. 波形可视化

dart 复制代码

Widget _buildWaveform() {
  return SizedBox(
    height: 100,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(30, (index) {
        final height = _isRecording && !_isPaused
            ? (Random().nextDouble() * 0.7 + 0.3) * 100
            : 20.0;
        return Container(
          width: 4,
          height: height,
          margin: EdgeInsets.symmetric(horizontal: 2),
          decoration: BoxDecoration(
            color: Colors.white.withValues(alpha: 0.8),
            borderRadius: BorderRadius.circular(2),
          ),
        );
      }),
    ),
  );
}

3. 播放控制

dart 复制代码

void _togglePlayPause() {
  if (_isPlaying) {
    _pause();
  } else {
    _play();
  }
}

void _play() {
  setState(() {
    _isPlaying = true;
  });
  
  _playTimer = Timer.periodic(const Duration(milliseconds: 100), (timer) {
    setState(() {
      _currentPosition = Duration(milliseconds: _currentPosition.inMilliseconds + 100);
      if (_currentPosition >= widget.recording.duration) {
        _stop();
      }
    });
  });
}

功能扩展建议

1. 真实录音功能

使用record包实现真实录音

2. 音频播放

使用audioplayers包播放录音

3. 文件管理

使用path_provider保存录音文件

4. 分享功能

使用share_plus分享录音

5. 云端备份

上传录音到云存储

6. 语音转文字

集成语音识别API

7. 音频编辑

裁剪、合并录音

8. 音质设置

调整采样率、比特率

项目总结

技术亮点

录音控制：开始、暂停、继续、停止完整流程
波形动画：实时波形可视化
播放功能：完整的播放控制
进度条：可拖动的进度条
文件管理：重命名、删除功能
渐变设计：精美的UI设计
Material Design 3：最新设计规范

学习收获

Timer定时器使用
动画效果实现
音频应用开发
文件管理
状态管理
UI设计技巧

本项目提供了完整的录音工具功能，代码结构清晰，易于扩展。你可以在此基础上添加真实的录音和播放功能，打造一款功能丰富的录音应用。

重要提示 ：本应用使用模拟数据演示功能，实际使用需要集成真实的录音和播放库。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net