Flutter音频录制插件microphone的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter音频录制插件microphone的使用

Flutter 的 microphone 插件允许开发者在Web端通过麦克风进行录音。以下是关于如何使用此插件的详细说明,包括初始化、开始和停止录音、监听状态变化以及播放录音。

使用方法

安装

要使用这个插件,请遵循 安装指南 进行操作。

录制麦克风音频

创建和初始化录音器

为了能够录制音频,您需要创建并初始化一个 MicrophoneRecorder 实例。请注意,单个录音器只能进行一次录音;如果想要再次录音,则需创建新的录音器实例。此外,支持同时进行多条录音。

import 'package:microphone/microphone.dart';

// 创建并初始化一个录音器。
final microphoneRecorder = MicrophoneRecorder()..init();

初始化是异步进行的,因此可能需要 await 关键字来等待 init 方法完成。

开始录音

接下来,可以开始录音了。

// 开始录音。
microphoneRecorder.start();

停止录音

当录音结束后,可以通过调用 stop() 方法来结束录音,并获取到 MicrophoneRecording 对象中的 url 属性,该属性指向录音文件的位置。

// 停止录音。
await microphoneRecorder.stop();
final recordingUrl = microphoneRecorder.value.recording.url;

录音文件可以通过 URL 播放,例如使用 just_audio 插件提供的“从 URL 读取”功能(这需要添加 just_audio_web 依赖项;请参阅示例应用)。

获取录音数据

此外,在录音停止且录音器未被销毁前,还可以通过以下方式获取录音的字节数据:

// 获取录音的字节数据。
final bytes = await microphoneRecorder.toBytes();

销毁录音器

切记 要销毁录音器以释放资源:

// 销毁录音器。
microphoneRecorder.dispose();

监听状态变化

MicrophoneRecorder 同时也是一个 ValueNotifier,这意味着它可以与 Flutter 的 ValueListenableBuilder 一起使用,或者通过 addListener() 方法附加监听器。每当 MicrophoneRecorder.value.startedMicrophoneRecorder.value.stopped 发生变化时,都会触发通知。有关具体用法,请参考示例应用

示例代码

下面是一个完整的示例应用程序,它展示了如何使用 microphone 插件和 MicrophoneRecorder 类来实现录音功能,并提供启动、停止录音及回放录音的功能。

import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
import 'package:microphone/microphone.dart';

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

/// 示例应用,展示如何使用 `microphone` 插件及其核心类 [MicrophoneRecorder]。
///
/// 此应用会监听录音过程中的实时更新,并根据这些更新提供相应的用户交互界面,如开始录音、停止录音和播放录音。
class MicrophoneExampleApp extends StatefulWidget {
  const MicrophoneExampleApp({Key key}) : super(key: key);

  @override
  _MicrophoneExampleAppState createState() => _MicrophoneExampleAppState();
}

class _MicrophoneExampleAppState extends State<MicrophoneExampleApp> {
  MicrophoneRecorder _recorder;
  AudioPlayer _audioPlayer;

  @override
  void initState() {
    super.initState();

    _initRecorder();
  }

  @override
  void dispose() {
    _recorder.dispose();
    _audioPlayer?.dispose();

    super.dispose();
  }

  void _initRecorder() {
    // 清理之前的录音器实例。
    _recorder?.dispose();

    _recorder = MicrophoneRecorder()
      ..init()
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    final value = _recorder.value;
    Widget result;

    if (value.started) {
      if (value.stopped) {
        result = Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            OutlinedButton(
              onPressed: () {
                setState(_initRecorder);
              },
              child: Text('Restart recorder'),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 16),
              child: OutlinedButton(
                onPressed: () async {
                  _audioPlayer?.dispose();

                  _audioPlayer = AudioPlayer();
                  await _audioPlayer.setUrl(value.recording.url);
                  await _audioPlayer.play();
                },
                child: Text('Play recording'),
              ),
            ),
          ],
        );
      } else {
        result = OutlinedButton(
          onPressed: () {
            _recorder.stop();
          },
          child: Text('Stop recording'),
        );
      }
    } else {
      result = OutlinedButton(
        onPressed: () {
          _recorder.start();
        },
        child: Text('Start recording'),
      );
    }

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: result,
        ),
      ),
    );
  }
}

以上就是 microphone 插件的基本使用教程。如果您想了解更多关于此插件的信息或贡献代码,可以阅读 GitHub 上的 主 README 文件


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

1 回复

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


当然,以下是一个使用Flutter音频录制插件microphone的示例代码。这个示例展示了如何初始化插件、请求权限、开始录制音频、停止录制音频以及保存音频文件。

首先,确保你已经在pubspec.yaml文件中添加了microphone插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  microphone: ^0.14.0  # 请确保版本号是最新的

然后,在lib目录下创建一个新的Dart文件,比如audio_recorder.dart,并添加以下代码:

import 'package:flutter/material.dart';
import 'package:microphone/microphone.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

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

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

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

class _AudioRecorderPageState extends State<AudioRecorderPage> {
  final Microphone _microphone = Microphone();
  bool _isRecording = false;
  String _recordedFilePath;

  @override
  void initState() {
    super.initState();
    _requestMicrophonePermission();
  }

  Future<void> _requestMicrophonePermission() async {
    var status = await Microphone.requestPermission();
    if (status == PermissionStatus.granted) {
      print("Microphone permission granted.");
    } else {
      print("Microphone permission denied.");
    }
  }

  Future<void> _startRecording() async {
    setState(() {
      _isRecording = true;
    });

    var directory = await getApplicationDocumentsDirectory();
    var path = "${directory.path}/audio_recording.wav";
    _recordedFilePath = path;

    await _microphone.start(path);
    print("Recording started at $path");
  }

  Future<void> _stopRecording() async {
    setState(() {
      _isRecording = false;
    });

    await _microphone.stop();
    print("Recording stopped.");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Recorder'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _isRecording ? 'Recording...' : 'Not Recording',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _isRecording ? _stopRecording : _startRecording,
              child: Text(_isRecording ? 'Stop' : 'Start'),
            ),
            if (_recordedFilePath != null)
              ElevatedButton(
                onPressed: () {
                  // You can add code here to play or share the recorded file
                  // For example, using a file picker or media player plugin
                  print("Recorded file saved at $_recordedFilePath");
                },
                child: Text('View Recording'),
              ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖添加

    • pubspec.yaml中添加microphonepath_provider依赖。
  2. 权限请求

    • 使用Microphone.requestPermission()来请求麦克风权限。
  3. 开始录制

    • 使用_microphone.start(path)开始录制音频,其中path是保存音频文件的路径。
  4. 停止录制

    • 使用_microphone.stop()停止录制音频。
  5. UI

    • 使用Flutter的Material组件构建了一个简单的UI,包括一个显示录制状态的文本和两个按钮(开始/停止录制和查看录制文件)。

注意事项

  • 确保在实际应用中处理权限被拒绝的情况,并提示用户手动授予权限。
  • 可以使用其他插件(如audio_players)来播放录制的音频文件,或者使用文件选择器插件分享文件。
  • 在Android和iOS上,你还需要在相应的配置文件(如AndroidManifest.xmlInfo.plist)中添加必要的权限声明。

希望这个示例对你有帮助!

回到顶部