Flutter音频录制插件flutter_plugin_record

使用Flutter实现仿微信录音的插件

插件支持Android 和iOS。

插件提供的功能

录制

录制语音，
播放录音，
录制声音大小的监听
提供录制时长的监听
提供类似微信的录制组件
提供播放音频结束的监听
提供根据传递的路径进行语音录制
提供录制wav, mp3格式具体可参考example

播放

提供播放指定路径的音频文件
提供播放指定URL地址的wav, MP3格式文件
提供播放完成的回调监听
提供暂停和继续播放的功能
提供停止播放的功能

1. 引入

在pubspec.yaml文件上引入如下配置：

# 引入方式1(引入最新的版本)
dependencies:
  flutter_plugin_record:
    git:
      url: https://github.com/yxwandroid/flutter_plugin_record.git

# 引入方式2 (引入指定某次commit)
dependencies:
  flutter_plugin_record:
    git:
      url: https://github.com/yxwandroid/flutter_plugin_record.git
      ref: 29c02b15835907879451ad9f8f88c357149c6085
      
# 引入方式3 (引入Flutter仓库的library)
dependencies:
  flutter_plugin_record: ^1.0.1

2. 使用

初始化录制

2.1 初始化录制(wav)

可以在页面初始化的时候进行初始化比如: 在initState方法中进行初始化

// 实例化对象 
FlutterPluginRecord recordPlugin = new FlutterPluginRecord();
// 初始化
recordPlugin.init();

2.2 初始化录制(mp3)

可以在页面初始化的时候进行初始化比如: 在initState方法中进行初始化

// 实例化对象 
FlutterPluginRecord recordPlugin = new FlutterPluginRecord();
// 初始化
recordPlugin.initRecordMp3();

开始录制

recordPlugin.start();

停止录制

recordPlugin.stop();

播放

1. 播放

recordPlugin.play();

2. 暂停和继续播放

recordPlugin.pausePlay();

3. 停止播放

recordPlugin.stopPlay();

根据传递的路径进行语音录制

recordPlugin.startByWavPath(wavPath);

根据传递的路径或则Url进行语音播放

///
/// 参数 path  播放音频的地址
///
/// path 为 url类型对应的在线播放地址   https://linjuli-app-audio.oss-cn-hangzhou.aliyuncs.com/audio/50c39c768b534ce1ba25d837ed153824.wav
/// path 对应本地文件路径对应的是本地文件播放肚子   /sdcard/flutterdemo/wiw.wav
/// 参数  type
/// 当path 为url   type为 url
/// 当path 为本地地址 type为 file
///
Future playByPath(String path, String type) async {
  return await _invokeMethod('playByPath', <String, String>{
    "play": "play",
    "path": path,
    "type": type,
  });
}

释放资源

可以在页面退出的时候进行资源释放比如在 dispose 方法中调用如下代码

recordPlugin.dispose();

回调监听

1. 初始化回调监听

/// 初始化方法的监听
recordPlugin.responseFromInit.listen((data) {
  if (data) {
    print("初始化成功");
  } else {
    print("初始化失败");
  }
});

2. 开始录制停止录制监听

/// 开始录制或结束录制的监听
recordPlugin.response.listen((data) {
  if (data.msg == "onStop") {
    /// 结束录制时会返回录制文件的地址方便上传服务器
    print("onStop  " + data.path);
  } else if (data.msg == "onStart") {
    print("onStart --");
  }
});

3. 录制声音大小回调监听

/// 录制过程监听录制的声音的大小 方便做语音动画显示图片的样式
recordPlugin.responseFromAmplitude.listen((data) {
  var voiceData = double.parse(data.msg);
  var tempVoice = "";
  if (voiceData > 0 && voiceData < 0.1) {
    tempVoice = "images/voice_volume_2.png";
  } else if (voiceData > 0.2 && voiceData < 0.3) {
    tempVoice = "images/voice_volume_3.png";
  } else if (voiceData > 0.3 && voiceData < 0.4) {
    tempVoice = "images/voice_volume_4.png";
  } else if (voiceData > 0.4 && voiceData < 0.5) {
    tempVoice = "images/voice_volume_5.png";
  } else if (voiceData > 0.5 && voiceData < 0.6) {
    tempVoice = "images/voice_volume_6.png";
  } else if (voiceData > 0.6 && voiceData < 0.7) {
    tempVoice = "images/voice_volume_7.png";
  } else if (voiceData > 0.7 && voiceData < 1) {
    tempVoice = "images/voice_volume_7.png";
  }
  setState(() {
    voiceIco = tempVoice;
    if(overlayEntry!=null){
      overlayEntry.markNeedsBuild();
    }
  });

  print("振幅大小   " + voiceData.toString() + "  " + voiceIco);
});

4. 播放声音完成的监听监听

recordPlugin.responsePlayStateController.listen((data){
  print("播放路径   " + data.playPath );
  print("播放状态   " + data.playState );
});

2. 录制组件的使用

组件使用效果

Android效果

iOS效果

1. 在使用的页面进行导入package

import 'package:flutter_plugin_record/index.dart';

2. 在使用的地方引入VoiceWidget组件

VoiceWidget(),

VoiceWidget({startRecord: Function, stopRecord: Function}) {

startRecord 开始录制的回调

stopRecord 停止录制的回调返回的path是录制成功之后文件的保存地址

iOS配置注意事项

iOS集成的时候需要在info.plist添加

<key>NSMicrophoneUsageDescription</key>
<string>打开话筒</string>

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

iOS release 打包失败配置注意事项

Android配置注意事项

Android集成的时候需要在application标签下添加

tools:replace="android:label"

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

wuwangju 1楼

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

flutter_plugin_record_new 是一个用于在 Flutter 应用中录制音频的插件。它提供了简单的 API 来开始、停止和播放音频录制。以下是如何使用 flutter_plugin_record_new 插件的步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 flutter_plugin_record_new 依赖：

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

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

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:flutter_plugin_record_new/flutter_plugin_record.dart';

3. 初始化插件

在使用插件之前，需要先初始化它：

FlutterPluginRecord recordPlugin = FlutterPluginRecord();

4. 请求权限

在开始录制之前，确保你已经请求了录音权限。你可以使用 permission_handler 插件来请求权限：

import 'package:permission_handler/permission_handler.dart';

Future<void> requestPermission() async {
  if (await Permission.microphone.request().isGranted) {
    // 权限已授予
  } else {
    // 权限被拒绝
  }
}

5. 开始录制

使用 start() 方法开始录制音频：

void startRecording() async {
  await recordPlugin.start();
}

6. 停止录制

使用 stop() 方法停止录制音频：

void stopRecording() async {
  await recordPlugin.stop();
}

7. 播放录制的音频

使用 play() 方法播放录制的音频：

void playRecording() async {
  await recordPlugin.play();
}

8. 获取录制的文件路径

你可以通过 getFilePath() 方法获取录制的音频文件路径：

void getFilePath() async {
  String filePath = await recordPlugin.getFilePath();
  print("录制的文件路径: $filePath");
}

9. 释放资源

在不需要使用插件时，释放资源：

void dispose() {
  recordPlugin.dispose();
}

完整示例

以下是一个完整的示例，展示了如何使用 flutter_plugin_record_new 插件进行音频录制：

import 'package:flutter/material.dart';
import 'package:flutter_plugin_record_new/flutter_plugin_record.dart';
import 'package:permission_handler/permission_handler.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AudioRecorder(),
    );
  }
}

class AudioRecorder extends StatefulWidget {
  [@override](/user/override)
  _AudioRecorderState createState() => _AudioRecorderState();
}

class _AudioRecorderState extends State<AudioRecorder> {
  FlutterPluginRecord recordPlugin = FlutterPluginRecord();

  [@override](/user/override)
  void initState() {
    super.initState();
    requestPermission();
  }

  Future<void> requestPermission() async {
    if (await Permission.microphone.request().isGranted) {
      // 权限已授予
    } else {
      // 权限被拒绝
    }
  }

  void startRecording() async {
    await recordPlugin.start();
  }

  void stopRecording() async {
    await recordPlugin.stop();
  }

  void playRecording() async {
    await recordPlugin.play();
  }

  void getFilePath() async {
    String filePath = await recordPlugin.getFilePath();
    print("录制的文件路径: $filePath");
  }

  [@override](/user/override)
  void dispose() {
    recordPlugin.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('音频录制示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: startRecording,
              child: Text('开始录制'),
            ),
            ElevatedButton(
              onPressed: stopRecording,
              child: Text('停止录制'),
            ),
            ElevatedButton(
              onPressed: playRecording,
              child: Text('播放录制'),
            ),
            ElevatedButton(
              onPressed: getFilePath,
              child: Text('获取文件路径'),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter音频录制插件flutter_plugin_record_new的使用

使用Flutter实现 仿微信录音的插件