Flutter开发笔记 —— 语音消息功能实现

这篇具有很好参考价值的文章主要介绍了Flutter开发笔记 —— 语音消息功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

最近在开发一款即时通讯(IM)的聊天App,在实现语音消息功能模块后,写下该文章以做记录。

注:本文不提供相关图片资源以及IM聊天中具体实现代码,单论语音功能实现思路

需求分析
flutter_sound,Flutter,flutter,笔记

比起上来直接贴代码,我们先来逐步分析一下一个正常语音消息的需求是如何的?

  • 长按语音按钮录制用户语音内容

  • 松开按钮后发送语音消息至目标

从上可得,我们需要针对于用户的语音 录制 & 播放 方面下手!

Flutter_sound

目标地址:https://pub.dev/packages/flutter_sound

简介:Flutter_sound 是一款可以处理用户声音库

通过该插件的GitHub示例中可以了解到实现录制语音和播放的相关API为

  • FlutterSoundPlayer下的startRecorder方法 (录制)

  • FlutterSoundPlayer下的startPlayer方法 (播放)

实现思路

初始化Flutter_Sound配置

定义相关变量

  • FlutterSoundPlayer flutterSoundPlayer = FlutterSoundPlayer(); //声音播放器

  • FlutterSoundRecorder recordSound = FlutterSoundRecorder(); //声音录制器

  • Timer? recordTimer // 计时器,用来控制录音时长;

  • String timeString = “” // 用来做回显时长

  • List voicePlayList =[]; //用来控制语音播放列表

  • String voicePath = “”; //临时储存语音文件路径

初始化声音配置方法


  /*
   * @author Marinda
   * @date 2023/6/26 15:25
   * @description 初始化声音设置
   */
  initSoundSetting() async{
    await flutterSoundPlayer.openPlayer();
    await recordSound.openRecorder();
  }

录制用户语音


  /*
   * @author Marinda
   * @date 2023/6/26 15:31
   * @description 录音
   */
   recordSound() async{
    PermissionStatus status = await Permission.microphone.request();
    int time = 0;
    //权限校验
    if (status != PermissionStatus.granted) throw RecordingPermissionException("麦克风权限未授权!");
    var dir = await getExternalStorageDirectory();
    Uuid uuid = Uuid();
    String filePath = p.join(dir?.path ?? "",uuid.v4()+".mp4");
    File file = File(filePath);
    file.openWrite();
    state.voicePath.value = filePath;
    Log.i("录音保存的位置:${filePath}");
    await state.recordSound.startRecorder(
        //目标文件位置
        toFile: filePath,
        //这里可以认为是那种源
        codec: Codec.aacMP4,
        //采样率
        bitRate: 8000,
        //为1即可
        numChannels: 1
    );
  
    recordTimer = Timer.periodic(Duration(seconds: 1), (_) {
      time++;
      timeString = time.toString();
    });
  }

播放实现


  /*
   * @author Marinda
   * @date 2023/10/7 14:28
   * @description 播放语音信息 目前先做本地语音缓存处理
   */
  playVoice(String voiceUrl) async{
    Uint8List uint8list = Uint8List(0);
    //视为网络http
    if(voiceUrl.startsWith("http")){
      uint8list = ...获取MP4文件二进;
    }else{
      File voiceFile = File(voiceUrl);
      //如果不存在
      if(!voiceFile.existsSync()){
        BotToast.showText(text: "语音播放失败");
        return;
      }
      uint8list  = await voiceFile.readAsBytes();
    }

    //如果存在则进行移除播放
    if(voicePlayList.contains(tag)){
      voicePlayList.remove(tag);
      await flutterSoundPlayer.stopPlayer();
      return;
    }
    //加入语音信息队列
    voicePlayList.add(tag);
 
    await flutterSoundPlayer.startPlayer(
      fromURI: data.expandAddress,
      fromDataBuffer: uint8list,
      codec: Codec.aacMP4,
      sampleRate: 8000,
        numChannels: 1,
      whenFinished: (){
      //  播放完毕
        state.voicePlayList.remove(tag);
      }
    );
  }

结束录制


  /*
   * @author Marinda
   * @date 2023/6/26 15:33
   * @description
   */
  stopRecordSound() async{
    await recordSound.stopRecorder();
    if(recordTimer!.isActive){
      recordTimer!.cancel();
      recordTimer = null;
    }
    // 这里实现你的语音消息发送逻辑
    Log.i("停止录制!");
    timeString.value = "";
    voicePath.value = "";
  }

结束语

难度不大,主要是围绕着录音文件进行处理

值得注意的点是在播放录音文件时
记得获取目标的二进制流一并携带至startPlayer方法fromDataBuffer字段中
否则可能会出现无法播放或程序未响应等危险情况!

感谢你的观看!文章来源地址https://www.toymoban.com/news/detail-739374.html

到了这里,关于Flutter开发笔记 —— 语音消息功能实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter开发实战-Camera自定义相机拍照功能实现

    flutter开发实战-Camera自定义相机拍照功能实现 在项目中使用image_picker插件时候,在android设备上使用无法默认设置前置摄像头(暂时不清楚什么原因),由于项目默认需要使用前置摄像头,所以最终采用自定义相机实现拍照功能。 在工程的iOS的info.plist文件中添加相机、麦克风

    2024年02月21日
    浏览(52)
  • flutter开发实战-flutter二维码条形码扫一扫功能实现

    flutter开发实战-flutter二维码条形码扫一扫功能实现 flutter开发实战-flutter二维码扫一扫功能实现,要使用到摄像头的原生的功能,使用的是插件:scan 效果图如下 1.1 iOS权限设置 1.2 android权限设置 1.3 使用ScanView的widget 扫一扫Widget使用ScanController来做响应的控制 暂停/恢复camera 识

    2024年02月16日
    浏览(42)
  • uniapp 开发H5页面,实现语音识别功能--前端,不包含后端转换

    一、背景 微信小程序开发,内嵌h5页面,不能调用微信内部的插件 二、实现方式 通过安装  js-audio-recorder  插件实现既定需求 三、具体步骤 1、安装插件 npm i js-audio-recorder 2、引入 在需要使用的页面中引入:import Recorder from \\\'js-audio-recorder\\\'; 3、具体配置

    2024年04月13日
    浏览(41)
  • 前端开发中基于Web Speech API(speechSynthesis接口)实现文字转语音功能

    一、Web Speech 的概念及用法 在开发业务系统时,有时候可能需要使用语音播报一段文字。 目前文字转语音即语音合成技术现在已经很成熟了,像百度、讯飞等都提供了相关的服务,支持将文字转换成各种形式的语音,通常这些服务都需要付费使用,如果对语音要求不高,并且

    2024年01月24日
    浏览(55)
  • flutter开发实战-hero实现图片预览功能extend_image

    flutter开发实战-hero实现图片预览功能extend_image 在开发中,经常遇到需要图片预览,当feed中点击一个图片,开启预览,多个图片可以左右切换swiper,双击图片及手势进行缩放功能。 这个主要实现使用extend_image插件。在点击图片时候使用hero动画进行展示。 Hero简单使用,可以查

    2024年02月08日
    浏览(45)
  • 【Flutter】Flutter 使用 fluttertoast 实现显示 Toast 消息

    【Flutter】Flutter 使用 fluttertoast 实现显示 Toast 消息 在这篇文章中,我将与你分享如何在 Flutter 项目中使用 fluttertoast 包来显示 Toast 消息。 Toast 是一个简短的、非模态的消息提示框,它可以在应用的前端显示,不会打断用户的操作。 fluttertoast 是一个非常受欢迎的 Flutter 包,用

    2024年02月06日
    浏览(38)
  • 微信小程序的订阅消息是一个允许开发者向用户发送重要通知的功能。这里为您展示如何实现小程序订阅消息的基本步骤和代码示例

    步骤 1: 获取模板 ID 首先,您需要登录微信公众平台,进入「小程序管理」后台,找到“设置” “开发设置” “订阅消息”,然后选择并配置所需的模板,记录模板 ID。 步骤 2: 小程序前端请求订阅 在小程序的某个页面或组件中,当用户执行某个操作(例如点击按钮)时,可

    2024年02月04日
    浏览(89)
  • h5开发语音播报功能

    一、使用window自带的api,但是手机浏览器多数不支持,兼容性差(不推荐) 1.使用到了window的speechSynthesis属性,如下如1.1                                                                         图1.1  2.主要用到了播报方法speak()和取消播报

    2024年02月14日
    浏览(48)
  • 阿里云AliGenie开发天猫语音功能-入门篇

    登录应用开发平台 创建语音技能 云开发部署后端技能服务 语音技能测试 下线不必要的应用 选中 语音技能 中的 自定义技能 填写技能创建信息: 技能名称和调用词 技能名称:展示在技能市场的技能名称,在发布时将进行唯一性检测。 技能属性:可选择 公有技能 / 私有技能

    2024年01月17日
    浏览(28)
  • HarmonyOS学习路之开发篇—AI功能开发(语音播报)

    语音播报(Text to Speech,下文简称TTS),基于华为智慧引擎(HUAWEI HiAI Engine)中的语音播报引擎,向开发者提供人工智能应用层API。该技术提供将文本转换为语音并进行播报的能力。 支持超长文本播报,最大文本长度为100000个字符。 语音播报不支持多线程调用。 实时语音交

    2024年02月11日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包