Flutter音频聊天插件audio

Flutter音频聊天插件audio_chat的使用

audio_chat 是一个为 Flutter 应用程序提供实时语音通信功能的包，类似于 WhatsApp。使用 audio_chat，您可以轻松地将实时语音通信集成到您的 Flutter 应用程序中，从而实现无缝且互动的用户体验。

功能

实时语音通信：在用户之间启用高质量、低延迟的语音聊天。
跨平台支持：在 iOS 和 Android 设备上无缝运行。
可定制的UI：调整和样式化用户界面组件以适应您的应用设计。
按住说话：可以选择实现按住说话的功能，以进行受控通信。
噪声抑制：内置噪声抑制功能，确保清晰的音频。
自动增益控制：自动调整音频水平，以获得平衡的声音。

安装

在 pubspec.yaml 文件中添加 audio_chat 包：

dependencies:
  audio_chat: ^1.0.0

权限需求：为了使用振动功能，请在 AndroidManifest.xml 文件中添加以下行：

<uses-permission android:name="android.permission.VIBRATE" />

示例代码

以下是 audio_chat 的使用示例代码：

import 'package:flutter/material.dart';
import 'package:audio_chat/audio_chat.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<String> audios = []; // 存储录制的音频路径

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("音频聊天"), // 设置应用标题
        ),
        body: Column(
          children: [
            Expanded(
              child: ListView.builder(
                padding: const EdgeInsets.all(8), // 设置列表内边距
                itemCount: audios.length, // 列表项数量
                itemBuilder: (context, index) {
                  return AudioBubble(filepath: audios[index]); // 显示音频气泡
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0), // 设置输入框外边距
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      decoration: const ShapeDecoration(
                        shape: StadiumBorder(
                            side: BorderSide(color: Colors.grey, width: 0.8)),
                        color: Colors.white,
                      ),
                      child: const TextField(
                        decoration: InputDecoration(
                            prefixIcon: Icon(Icons.emoji_emotions),
                            border: InputBorder.none,
                            hintText: '消息'), // 设置文本提示
                      ),
                    ),
                  ),
                  const SizedBox(width: 8), // 设置按钮之间的间距
                  RecordButton(
                    onAudioRecorded: (path) { // 录制音频回调
                      if (path != null) {
                        audios.add(path); // 添加新录制的音频路径
                        setState(() {}); // 更新状态
                      }
                    },
                    showLockSlider: true, // 显示锁定滑块
                    showCancelSlider: true, // 显示取消滑块
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

itying888 1楼•2 个月前

更多关于Flutter音频聊天插件audio_chat的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

audio_chat 是一个用于 Flutter 的音频聊天插件，允许开发者在应用中实现实时音频聊天功能。以下是如何使用 audio_chat 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 audio_chat 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  audio_chat: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 初始化插件

在你的 Dart 文件中导入 audio_chat 插件并初始化它：

import 'package:audio_chat/audio_chat.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AudioChatScreen(),
    );
  }
}

class AudioChatScreen extends StatefulWidget {
  @override
  _AudioChatScreenState createState() => _AudioChatScreenState();
}

class _AudioChatScreenState extends State<AudioChatScreen> {
  AudioChat _audioChat;

  @override
  void initState() {
    super.initState();
    _audioChat = AudioChat();
    _initializeAudioChat();
  }

  Future<void> _initializeAudioChat() async {
    await _audioChat.initialize();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Chat'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _startChat,
              child: Text('Start Chat'),
            ),
            ElevatedButton(
              onPressed: _stopChat,
              child: Text('Stop Chat'),
            ),
          ],
        ),
      ),
    );
  }

  void _startChat() async {
    await _audioChat.startChat();
  }

  void _stopChat() async {
    await _audioChat.stopChat();
  }

  @override
  void dispose() {
    _audioChat.dispose();
    super.dispose();
  }
}

3. 配置权限

为了使用音频功能，你需要在 AndroidManifest.xml 和 Info.plist 中添加相应的权限。

Android: 在 android/app/src/main/AndroidManifest.xml 中添加以下权限：

<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.INTERNET"/>

iOS: 在 ios/Runner/Info.plist 中添加以下权限：

<key>NSMicrophoneUsageDescription</key>
<string>We need access to your microphone for audio chat.</string>