欢迎加入开源鸿蒙跨平台社区:
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图




1.1 应用简介
声音风景分享是一款创新的社交应用,致力于让用户分享和发现世界各地的声音风景。从清晨的鸟鸣到海边的浪声,从城市的喧嚣到乡村的宁静,用户可以录制、分享、聆听来自世界各地的声音,让更多人"听"到这个世界的美好。应用以清新的绿色为主色调,象征自然与和谐,涵盖声音录制、声音地图、社交互动、个人中心四大模块。
用户可以录制身边的声音风景,添加地理位置和描述信息,分享到社区;也可以浏览世界各地的声音风景,通过声音地图探索不同地域的声音文化,建立基于声音的社交连接。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 声音录制 | 高质量音频录制 | 音频录制API |
| 声音分类 | 8种声音类型分类 | 枚举定义 |
| 地理定位 | 自动获取录制位置 | GPS定位服务 |
| 声音地图 | 全球声音分布展示 | 地图组件 |
| 社交互动 | 点赞、评论、收藏 | 社交功能 |
| 播放器 | 音频播放与可视化 | 音频播放器 |
1.3 声音类型定义
| 序号 | 类型名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 自然之声 | 🌿 | 鸟鸣、风声、雨声等自然音 |
| 2 | 海洋之声 | 🌊 | 海浪、潮汐、海风等 |
| 3 | 城市之声 | 🏙️ | 交通、人群、建筑等城市音 |
| 4 | 乡村之声 | 🌾 | 农田、牧场、乡村生活音 |
| 5 | 音乐之声 | 🎵 | 街头音乐、乐器演奏等 |
| 6 | 动物之声 | 🐦 | 各种动物的叫声 |
| 7 | 天气之声 | ⛈️ | 雷雨、暴风雪等天气音 |
| 8 | 人文之声 | 🎭 | 节日、庆典、日常生活等 |
1.4 声音质量等级
| 序号 | 质量等级 | Emoji | 时长范围 | 描述 |
|---|---|---|---|---|
| 1 | 短音频 | ⏱️ | 10-30秒 | 精彩瞬间捕捉 |
| 2 | 标准音频 | 🎧 | 30秒-2分钟 | 完整场景记录 |
| 3 | 长音频 | 📻 | 2-10分钟 | 深度沉浸体验 |
| 4 | 超长音频 | 🎙️ | 10分钟以上 | 完整环境记录 |
1.5 互动等级定义
| 序号 | 等级名称 | Emoji | 互动深度 |
|---|---|---|---|
| 1 | 浏览模式 | 👀 | 仅聆听,无互动 |
| 2 | 点赞模式 | ❤️ | 可点赞收藏 |
| 3 | 评论模式 | 💬 | 可评论互动 |
| 4 | 分享模式 | 🔄 | 可分享传播 |
1.6 声音情绪标签
| 序号 | 情绪名称 | Emoji | 色值 | 描述 |
|---|---|---|---|---|
| 1 | 平静 | 😌 | #4CAF50 | 宁静祥和 |
| 2 | 欢快 | 😊 | #FFC107 | 活泼愉悦 |
| 3 | 浪漫 | 💕 | #E91E63 | 温馨浪漫 |
| 4 | 神秘 | 🌙 | #9C27B0 | 神秘深邃 |
| 5 | 激昂 | 🔥 | #FF5722 | 热情澎湃 |
| 6 | 怀旧 | 🕰️ | #795548 | 怀旧感伤 |
1.7 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 音频录制 | record | >= 5.0.0 |
| 音频播放 | audioplayers | >= 4.0.0 |
| 地图服务 | 高德/百度地图 | - |
| 定位服务 | Geolocator | >= 9.0.0 |
| 设计规范 | Material Design 3 | - |
| 目标平台 | 鸿蒙OS / iOS / Android | API 21+ |
1.8 项目结构
lib/
└── main_sound_landscape_sharing.dart
├── SoundLandscapeSharingApp # 应用入口
├── SoundType # 声音类型枚举
├── SoundQuality # 声音质量枚举
├── InteractionLevel # 互动等级枚举
├── EmotionTag # 情绪标签枚举
├── SoundLandscape # 声音风景模型
├── UserSoundProfile # 用户声音档案模型
├── SoundLandscapeHomePage # 主页面(底部导航)
├── _buildDiscoverPage # 发现页面
├── _buildMapPage # 地图页面
├── _buildRecordPage # 录制页面
├── _buildProfilePage # 个人页面
├── SoundWavePainter # 声波绘制器
└── AudioPlayerWidget # 音频播放器组件
二、系统架构
2.1 整体架构图
Data Layer
Business Layer
Presentation Layer
主页面
SoundLandscapeHomePage
发现页
地图页
录制页
个人页
声音列表
分类筛选
热门推荐
声音地图
位置标记
区域探索
录制界面
编辑工具
发布分享
我的声音
收藏列表
数据统计
音频管理器
AudioManager
位置服务
LocationService
社交管理器
SocialManager
播放器引擎
PlayerEngine
SoundLandscape
声音风景
UserSoundProfile
用户档案
LocationData
位置数据
InteractionData
互动数据
2.2 类图设计
has
has
has
creates
SoundLandscapeSharingApp
+Widget build()
<<enumeration>>
SoundType
+String label
+String emoji
+String description
+nature()
+ocean()
+city()
+countryside()
+music()
+animal()
+weather()
+culture()
<<enumeration>>
SoundQuality
+String label
+String emoji
+DurationRange duration
+short()
+standard()
+long()
+extraLong()
<<enumeration>>
InteractionLevel
+String label
+String emoji
+int depth
+browse()
+like()
+comment()
+share()
<<enumeration>>
EmotionTag
+String label
+String emoji
+Color color
+calm()
+happy()
+romantic()
+mysterious()
+passionate()
+nostalgic()
SoundLandscape
+String id
+String title
+String description
+SoundType type
+SoundQuality quality
+EmotionTag emotion
+Location location
+String audioPath
+Duration duration
+int playCount
+int likeCount
+int commentCount
+DateTime createdAt
UserSoundProfile
+String userId
+String username
+String avatar
+List<String> mySounds
+List<String> favorites
+int totalPlays
+int totalLikes
+DateTime joinedAt
2.3 页面导航流程
发现
地图
录制
我的
点赞
评论
收藏
分享
应用启动
发现页
底部导航
声音列表
声音地图
录制界面
个人中心
点击声音
播放详情
用户操作
添加点赞
发表评论
添加收藏
分享声音
地图标记
查看该位置声音
开始录制
编辑声音
添加信息
发布分享
我的声音
收藏列表
数据统计
2.4 声音录制与分享流程
社交管理器 位置服务 音频管理器 录制页 用户 社交管理器 位置服务 音频管理器 录制页 用户 点击录制 开始录音 录音中... 停止录制 停止录音 返回音频文件 获取当前位置 返回GPS坐标 编辑信息 添加标题、描述、标签 点击发布 上传声音 发布成功
三、核心模块设计
3.1 数据模型设计
3.1.1 声音类型枚举 (SoundType)
dart
enum SoundType {
nature(
label: '自然之声',
emoji: '🌿',
description: '鸟鸣、风声、雨声等自然音',
color: Color(0xFF4CAF50),
),
ocean(
label: '海洋之声',
emoji: '🌊',
description: '海浪、潮汐、海风等',
color: Color(0xFF2196F3),
),
city(
label: '城市之声',
emoji: '🏙️',
description: '交通、人群、建筑等城市音',
color: Color(0xFFFF9800),
),
countryside(
label: '乡村之声',
emoji: '🌾',
description: '农田、牧场、乡村生活音',
color: Color(0xFF8BC34A),
);
final String label;
final String emoji;
final String description;
final Color color;
}
3.1.2 声音质量枚举 (SoundQuality)
dart
enum SoundQuality {
short(label: '短音频', emoji: '⏱️', minDuration: 10, maxDuration: 30),
standard(label: '标准音频', emoji: '🎧', minDuration: 30, maxDuration: 120),
long(label: '长音频', emoji: '📻', minDuration: 120, maxDuration: 600),
extraLong(label: '超长音频', emoji: '🎙️', minDuration: 600, maxDuration: 3600);
final String label;
final String emoji;
final int minDuration;
final int maxDuration;
}
3.1.3 声音风景模型 (SoundLandscape)
dart
class SoundLandscape {
final String id; // 声音ID
final String title; // 声音标题
final String description; // 声音描述
final SoundType type; // 声音类型
final SoundQuality quality; // 声音质量
final EmotionTag emotion; // 情绪标签
final Location location; // 地理位置
final String audioPath; // 音频路径
final Duration duration; // 音频时长
final String userId; // 发布者ID
final String username; // 发布者名称
final int playCount; // 播放次数
final int likeCount; // 点赞数
final int commentCount; // 评论数
final DateTime createdAt; // 创建时间
}
3.1.4 用户声音档案模型 (UserSoundProfile)
dart
class UserSoundProfile {
final String userId; // 用户ID
final String username; // 用户名
final String avatar; // 头像
final List<String> mySounds; // 我的声音列表
final List<String> favorites; // 收藏列表
final int totalPlays; // 总播放量
final int totalLikes; // 总点赞数
final int totalFollowers; // 粉丝数
final DateTime joinedAt; // 加入时间
}
3.1.5 声音类型分布
25% 18% 15% 12% 10% 8% 7% 5% 声音类型分布示例 自然之声 海洋之声 城市之声 乡村之声 音乐之声 动物之声 天气之声 人文之声
3.2 页面结构设计
3.2.1 主页面布局
SoundLandscapeHomePage
IndexedStack
发现页
地图页
录制页
个人页
NavigationBar
发现 Tab
地图 Tab
录制 Tab
我的 Tab
3.2.2 发现页结构
发现页
SliverAppBar
搜索栏
分类标签
声音列表
热门推荐
声音卡片
声波可视化
声音信息
互动按钮
波形动画
播放进度
标题描述
位置信息
用户信息
播放按钮
点赞按钮
收藏按钮
3.2.3 声音播放器结构
声音播放器
封面区域
声波可视化
控制面板
信息区域
声音类型图标
情绪标签
实时波形
频谱分析
进度条
播放/暂停
快进/快退
音量控制
循环播放
声音标题
位置信息
发布者信息
3.2.4 录制页结构
录制页
预览区域
录制控制
编辑工具
发布表单
实时波形
音量指示
时长显示
开始/停止
暂停/继续
裁剪工具
音量调节
降噪处理
标题输入
描述输入
类型选择
情绪标签
位置确认
3.3 声音录制逻辑
是
否
停止
暂停
点击录制按钮
请求录音权限
权限 granted?
开始录音
提示授权
实时显示波形
显示录音时长
用户操作
保存音频文件
暂停录音
继续录音
进入编辑页面
裁剪音频
调整音量
添加信息
发布分享
3.4 社交互动流程
喜欢
收藏
评论
分享
浏览声音
点击播放
聆听声音
用户感受
点击点赞
添加收藏
发表评论
分享声音
更新点赞数
添加到收藏夹
显示评论列表
选择分享平台
通知发布者
分享成功
四、UI设计规范
4.1 配色方案
应用以清新的绿色为主色调,象征自然与和谐:
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #4CAF50 (Green) | 导航、主题元素 |
| 辅助色 | #66BB6A | 发现页面 |
| 第三色 | #81C784 | 地图页面 |
| 强调色 | #A5D6A7 | 录制页面 |
| 背景色 | #FAFAFA | 页面背景 |
| 卡片背景 | #FFFFFF | 声音卡片 |
| 播放器背景 | #E8F5E9 | 播放器组件 |
4.2 声音类型主题色
| 类型 | 色值 | 视觉效果 |
|---|---|---|
| 自然之声 | #4CAF50 | 清新绿色 |
| 海洋之声 | #2196F3 | 深邃蓝色 |
| 城市之声 | #FF9800 | 温暖橙色 |
| 乡村之声 | #8BC34A | 田园绿色 |
| 音乐之声 | #9C27B0 | 艺术紫色 |
| 动物之声 | #FF5722 | 活力橙色 |
| 天气之声 | #607D8B | 灰色天空 |
| 人文之声 | #E91E63 | 热情粉色 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 声音标题 | 16px | Bold | #000000 |
| 位置标签 | 12px | Regular | 白色 |
| 描述文字 | 14px | Regular | #666666 |
| 统计数字 | 20px | Bold | 主色 |
4.4 组件规范
4.4.1 声音类型选择卡片
┌─────────────────────────────────────┐
│ 选择声音类型 │
│ │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ 🌿 │ │ 🌊 │ │ 🏙️ │ │
│ │自然 │ │海洋 │ │城市 │ │
│ │之声 │ │之声 │ │之声 │ │
│ └──────┘ └──────┘ └──────┘ │
└─────────────────────────────────────┘
4.4.2 声音卡片
┌─────────────────────────────────────┐
│ ┌─────────────────────────────┐ │
│ │ 🌿 [声波可视化动画] │ │
│ │ ━━━━━━━━━━━━━━━━━━━ │ │
│ └─────────────────────────────┘ │
│ 清晨的鸟鸣 │
│ 📍 北京·颐和园 │
│ 😌 平静 · 🎧 2:30 │
│ 👤 自然探索者 · ❤️ 128 · 💬 32 │
│ [▶️] [❤️] [⭐] [分享] │
└─────────────────────────────────────┘
4.4.3 播放器界面
┌─────────────────────────────────────┐
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ 🌿 │ │
│ │ [声波可视化区域] │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ 清晨的鸟鸣 │
│ 😌 平静 · 📍 北京·颐和园 │
│ ━━━━━━━━━●━━━━━━━━━ 1:23/2:30 │
│ [⏮️] [▶️] [⏭️] [🔊] [🔄] │
└─────────────────────────────────────┘
4.4.4 录制界面
┌─────────────────────────────────────┐
│ 录制声音风景 │
│ │
│ ┌─────────────────────────────┐ │
│ │ [实时波形显示区域] │ │
│ │ ▓▓▓▓▓░░░▓▓▓▓░░░▓▓▓▓ │ │
│ └─────────────────────────────┘ │
│ │
│ 🎙️ 录制中... 00:45 │
│ │
│ [⏸️ 暂停] [⏹️ 停止] [❌ 取消] │
│ │
│ 📍 当前位置:北京市海淀区 │
└─────────────────────────────────────┘
4.4.5 情绪标签选择
┌─────────────────────────────────────┐
│ 选择情绪标签 │
│ │
│ [😌 平静] [😊 欢快] [💕 浪漫] │
│ [🌙 神秘] [🔥 激昂] [🕰️ 怀旧] │
└─────────────────────────────────────┘
五、核心功能实现
5.1 声波可视化实现
dart
class SoundWavePainter extends CustomPainter {
final List<double> waveData;
final Color color;
final Animation<double> animation;
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = color
..strokeWidth = 2
..strokeCap = StrokeCap.round;
final barWidth = size.width / waveData.length;
final centerY = size.height / 2;
for (int i = 0; i < waveData.length; i++) {
final x = i * barWidth;
final amplitude = waveData[i] * animation.value;
final barHeight = amplitude * size.height * 0.8;
canvas.drawLine(
Offset(x, centerY - barHeight / 2),
Offset(x, centerY + barHeight / 2),
paint,
);
}
}
}
5.2 音频录制实现
dart
class AudioRecorder {
final Record _record = Record();
bool _isRecording = false;
Future<void> startRecording(String path) async {
if (await _record.hasPermission()) {
await _record.start(
path: path,
encoder: AudioEncoder.aacLc,
bitRate: 128000,
samplingRate: 44100,
);
_isRecording = true;
}
}
Future<String?> stopRecording() async {
if (_isRecording) {
final path = await _record.stop();
_isRecording = false;
return path;
}
return null;
}
Stream<RecordState> get onStateChanged => _record.onStateChanged();
}
5.3 音频播放实现
dart
class SoundPlayer {
final AudioPlayer _player = AudioPlayer();
Duration _duration = Duration.zero;
Duration _position = Duration.zero;
Future<void> play(String path) async {
await _player.setSource(DeviceFileSource(path));
await _player.resume();
}
Future<void> pause() async {
await _player.pause();
}
Future<void> stop() async {
await _player.stop();
}
Stream<Duration> get onPositionChanged => _player.onPositionChanged;
Stream<PlayerState> get onPlayerStateChanged => _player.onPlayerStateChanged;
}
5.4 位置服务实现
dart
class LocationService {
final GeolocatorPlatform _geolocator;
Future<Location> getCurrentLocation() async {
final position = await _geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high,
);
return Location(
latitude: position.latitude,
longitude: position.longitude,
timestamp: position.timestamp,
);
}
Future<String> getAddressFromCoordinates(
double latitude,
double longitude,
) async {
final placemarks = await _geolocator.placemarkFromCoordinates(
latitude,
longitude,
);
if (placemarks.isNotEmpty) {
final place = placemarks.first;
return '${place.locality}, ${place.country}';
}
return '未知位置';
}
}
5.5 社交互动实现
dart
class SocialManager {
final Database _database;
Future<void> likeSound(String soundId, String userId) async {
await _database.insert('likes', {
'sound_id': soundId,
'user_id': userId,
'created_at': DateTime.now().millisecondsSinceEpoch,
});
await _updateLikeCount(soundId, 1);
}
Future<void> commentOnSound(
String soundId,
String userId,
String content,
) async {
await _database.insert('comments', {
'id': DateTime.now().millisecondsSinceEpoch.toString(),
'sound_id': soundId,
'user_id': userId,
'content': content,
'created_at': DateTime.now().millisecondsSinceEpoch,
});
await _updateCommentCount(soundId, 1);
}
Future<void> favoriteSound(String soundId, String userId) async {
await _database.insert('favorites', {
'sound_id': soundId,
'user_id': userId,
'created_at': DateTime.now().millisecondsSinceEpoch,
});
}
}
六、交互设计
6.1 声音浏览流程
社交管理器 播放器 发现页 用户 社交管理器 播放器 发现页 用户 浏览声音列表 显示声音卡片 点击声音卡片 加载音频 准备就绪 开始播放 播放声音 点击点赞 记录点赞 点赞成功 点击收藏 添加收藏 收藏成功
6.2 声音录制流程
是
否
停止
暂停
打开录制页
请求权限
权限 granted?
显示录制界面
提示授权
点击录制按钮
开始录音
实时显示波形
用户操作
保存音频
暂停录音
继续录音
编辑音频
添加信息
选择类型
选择情绪
确认位置
发布分享
6.3 地图探索流程
选择区域
显示声音
点击声音
开始播放
点赞/评论
返回地图
地图浏览
区域筛选
声音列表
声音详情
播放声音
互动操作
七、扩展功能规划
7.1 后续版本规划
2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 2024-03-31 基础UI框架 音频录制功能 播放器实现 声音地图 社交功能 推荐算法 AI声音识别 声音合成 社区活动 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 声音风景分享应用开发计划
7.2 功能扩展建议
7.2.1 AI声音识别
AI功能:
- 自动识别声音类型
- 智能情绪分析
- 声音质量评估
- 相似声音推荐
7.2.2 声音合成
合成功能:
- 多声音混合
- 背景音乐添加
- 声音特效处理
- 环境音生成
7.2.3 社区活动
活动功能:
- 声音挑战赛
- 主题征集
- 达人认证
- 积分奖励
八、注意事项
8.1 开发注意事项
-
权限管理:录音、定位、存储权限需正确处理
-
音频质量:保证录音和播放的音质
-
存储优化:音频文件需合理压缩和存储
-
电量消耗:音频处理需优化功耗
-
网络传输:音频上传下载需考虑流量
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 录音权限被拒 | 用户拒绝授权 | 引导用户到设置开启 |
| 音频播放卡顿 | 文件过大或网络慢 | 压缩音频,预加载 |
| 定位不准确 | GPS信号弱 | 结合网络定位 |
| 波形显示异常 | 数据采样问题 | 优化采样算法 |
| 文件上传失败 | 网络不稳定 | 断点续传机制 |
8.3 使用技巧
🎙️ 声音风景录制技巧 🎙️
录制环境选择
- 自然之声:选择清晨或傍晚,避开人群
- 海洋之声:选择涨潮时段,风浪较大时
- 城市之声:选择繁华地段,交通高峰期
- 乡村之声:选择农忙时节,生活气息浓
录制技巧建议
- 保持设备稳定,避免震动噪音
- 距离声源适中,避免过近失真
- 环境安静时录制,减少背景干扰
- 多次录制,选择最佳版本
后期处理建议
- 适当降噪,保留真实感
- 调整音量,保持一致性
- 裁剪精华,突出主题
- 添加描述,便于理解
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 音频录制 | 支持AAC编码 |
| 定位服务 | GPS + 网络定位 |
| 鸿蒙OS | API 21+ |
| 存储空间 | 建议100MB以上 |
9.2 运行命令
bash
# 查看可用设备
flutter devices
# 运行到iOS设备
flutter run -t lib/main_sound_landscape_sharing.dart
# 运行到Android设备
flutter run -t lib/main_sound_landscape_sharing.dart
# 运行到Web服务器
flutter run -d web-server -t lib/main_sound_landscape_sharing.dart --web-port 8141
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_sound_landscape_sharing.dart
# 代码分析
flutter analyze lib/main_sound_landscape_sharing.dart
十、总结
声音风景分享应用通过发现、地图、录制、个人四大模块,为用户提供了一个独特的声音社交平台。应用支持8种声音类型、4种质量等级、6种情绪标签,让用户可以全方位地分享和发现声音风景。
核心功能涵盖声音录制、音频播放、社交互动、地图探索四大模块。声音类型从自然到城市,从海洋到乡村,涵盖丰富的生活场景;音频质量从短音频到超长音频,满足不同录制需求;情绪标签从平静到激昂,表达不同声音情感;社交互动包括点赞、评论、收藏、分享,建立声音社交连接。
应用采用 Material Design 3 设计规范,以清新的绿色为主色调,象征自然与和谐。通过本应用,希望能够让更多人"听"到这个世界的美好,建立基于声音的情感连接,创造独特的声音社交体验。
声音风景分享------让世界听见美好