Flutter音频录制插件flutter_plugin_record的使用

Flutter音频录制插件flutter_plugin_record的使用

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

插件支持Android和iOS。

插件提供的功能

录制

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

播放

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

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

使用

1, 初始化录制

1.1, 初始化录制(wav)

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

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

1.2, 初始化录制(Mp3)

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

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

2, 开始录制

recordPlugin.start();

3, 停止录制

recordPlugin.stop();

4, 播放

1, 播放

recordPlugin.play();

2, 暂停和继续播放

recordPlugin.pausePlay();

3, 停止播放

recordPlugin.stopPlay();

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

recordPlugin.startByWavPath(wavPath);

6, 根据传递的路径或则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,
  });
}

7, 释放资源

可以在页面退出的时候进行资源释放 比如在 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效果

Android效果

iOS效果

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 打包失败配置注意事项

iOS打包失败

Android配置注意事项

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

tools:replace="android:label"

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

1 回复

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


当然，下面是一个关于如何使用 flutter_sound 插件（请注意，flutter_plugin_record 并不是官方或广泛使用的 Flutter 音频录制插件，这里我假设你指的是一个类似功能的插件，如 flutter_sound，这是一个流行的 Flutter 音频录制和播放插件）的示例代码。这个示例将展示如何在 Flutter 应用中录制音频。

首先，确保你的 pubspec.yaml 文件中已经添加了 flutter_sound 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_sound: ^9.1.4 # 请检查最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，创建一个 Flutter 应用，并在其中使用 flutter_sound 插件进行音频录制。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:flutter_sound/flutter_sound.dart';
import 'dart:typed_data';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Audio Recorder',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AudioRecorderPage(),
    );
  }
}

class AudioRecorderPage extends StatefulWidget {
  @override
  _AudioRecorderPageState createState() => _AudioRecorderPageState();
}

class _AudioRecorderPageState extends State<AudioRecorderPage> {
  late FlutterSound flutterSound;
  bool isRecording = false;

  @override
  void initState() {
    super.initState();
    flutterSound = FlutterSound();
    flutterSound.openRecorder().then((_) {
      print("Recorder Opened");
    }).catchError((e) {
      print("Error opening recorder: $e");
    });
  }

  @override
  void dispose() {
    flutterSound.close().then((_) {
      print("Recorder Closed");
    });
    super.dispose();
  }

  Future<void> startRecording() async {
    setState(() {
      isRecording = true;
    });

    String path = "${(await getApplicationDocumentsDirectory()).path}/audio_${DateTime.now().millisecondsSinceEpoch}.wav";
    File audioFile = File(path);

    flutterSound.startRecorder(
      toFile: path,
      codec: Codec.pcm16,
      channels: 1,
      sampleRate: 44100,
      bitRate: 16384,
    ).then((rec) {
      print("Recorder started");
    }).catchError((e) {
      print("Error starting recorder: $e");
    });

    // Simulate recording for demonstration purposes
    Future.delayed(Duration(seconds: 5), () async {
      await stopRecording();
    });
  }

  Future<void> stopRecording() async {
    await flutterSound.stopRecorder().then((_) {
      print("Recorder stopped");
      setState(() {
        isRecording = false;
      });
    }).catchError((e) {
      print("Error stopping recorder: $e");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Audio Recorder'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: isRecording ? null : startRecording,
          child: Text(isRecording ? 'Stop Recording' : 'Start Recording'),
        ),
      ),
    );
  }
}

代码解释

  1. 依赖添加：在 pubspec.yaml 中添加 flutter_sound 依赖。
  2. 初始化 FlutterSound：在 initState 方法中打开录音器。
  3. 开始录音：startRecording 方法中，指定录音文件的保存路径和音频参数（如采样率、比特率等），然后开始录音。
  4. 停止录音：stopRecording 方法停止录音。
  5. UI 交互：使用 ElevatedButton 来控制录音的开始和停止，根据 isRecording 状态来禁用或启用按钮。

注意事项

  • 确保在 Android 和 iOS 上配置了必要的权限（如麦克风权限）。
  • 对于实际生产环境，需要更健壮的错误处理和用户反馈机制。
  • 录音文件的保存路径应根据实际需求进行调整。

希望这个示例能帮助你开始使用 Flutter 进行音频录制！

回到顶部