当前位置: 首页 > article >正文

微信小程序录音、停止录音、上传录音、播放录音

页面效果图:
在这里插入图片描述
未录音的数据,点击开始录音,点击停止录音上传录音
在这里插入图片描述

在这里插入图片描述

已录音状态可以播放录音、重新录制功能

代码:
创建内部 audio 上下文 InnerAudioContext 对象
获取全局唯一的录音管理器 RecorderManager

//  监听页面加载时,创建内部 audio 上下文 InnerAudioContext 对象
onLoad(options){
	const innerAudioContext = wx.createInnerAudioContext({
		useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动,默认关闭。对于短音频、播放频繁的音频建议开启此选项,开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长,因此对于长音频建议关闭此选项
    })
    // 获取全局唯一的录音管理器 RecorderManager
    const recorderManager = wx.getRecorderManager();
    this.setData({
        innerAudioContext:innerAudioContext,
        recorderManager,
    })
}

点击开始录音

handleStart(){
	// 开始录音
    this.data.recorderManager.start({
    	format: 'wav', // 录音格式
    });
    this.setData({
        isAudio:true,
    })
},

点击停止录音

handleStop(){
	// 监听录音结束事件
    this.data.recorderManager.onStop((res)=>{
        this.setData({
            isAudio:false,
            audioSrc:res.tempFilePath,  // 录音文件的临时路径
            duration:res.duration/1000  // duration 录音时长,单位ms,我需要的是s,做了处理
        });
        // 停止录音后,上传文件
        this.getUploadFile(res.tempFilePath)
    });
    // 停止录音
    this.data.recorderManager.stop()
},
// 停止录音后,上传文件
getUploadFile(file){
	wx.uploadFile({
		filePath: file,
        name: 'file',
        // 上传文件的接口地址
        url: `${app.globalData.baseUrl}/xxxx/uploadVoice`,
        formData: {
            'user': 'test',
            'file':'blob.ogg'
        },
        header: {
        	Authorization: `Bearer ${wx.getStorageSync('token')}`,
        },
        timeout: 0,
        success: (result) => {
            wx.showToast({
                title: '录音成功',
            })
            // 上传文件成功后,调用接口自动保存录音文件
            this.getUpload(result.data)
        },
        fail: (res) => {
            wx.showToast({
           		title: res.message,
            })
        },
        complete: (res) => {
            console.log(res,'《=====录音成功或失败都会调用');
        },
	})
},

监听录音结束事件返回的res在这里插入图片描述
点击播放录音

handlePlay(){
	// 录音文件地址
	this.data.innerAudioContext.src = this.data.item.audioUrl;
	// 播放录音
    this.data.innerAudioContext.play();
    this.setData({
        isPlay:true
    })
    // 监听音频自然播放至结束的事件,播放结束,停止播放
    this.data.innerAudioContext.onEnded(()=>{
        this.handleStopPlay()
    })
},
// 暂停播放
handleStopPlay(){
    this.setData({
        isPlay:false
    });
    this.data.innerAudioContext.stop();
},

http://www.kler.cn/a/413475.html

相关文章:

  • 【深入理解RabbitMQ】七大工作模式
  • 解锁 Vue 项目中 TSX 配置与应用简单攻略
  • YOLOv8 代码训练与中文字体配置教程(Linux、Windows通用)
  • MyBatis事务管理-附案例代码
  • Redis(概念、IO模型、多路选择算法、安装和启停)
  • 2024年wordpress、d-link等相关的多个cve漏洞poc
  • 【MySQL】表的操作(增删查改)
  • Oracle 中的表 ID(OBJECT_ID)段 ID(DATA_OBJECT_ID)
  • SAAS美容美发系统架构解析
  • 爬虫案例-亚马逊验证码突破
  • idea初始化设置
  • 《进程隔离机制:C++多进程编程安全的坚固堡垒》
  • 【含开题报告+文档+PPT+源码】基于SSM的电影数据挖掘与分析可视化系统设计与实现
  • 水库大坝安全监测之量水堰计应用
  • Android 13 Aosp Settings Android Studio版本
  • 树莓派搭建NextCloud:给数据一个安全的家
  • 如何为 XFS 文件系统的 /dev/centos/root 增加 800G 空间
  • vue实现滚动条滑动到底部分页调取后端接口加载数据
  • JS小模块练习
  • 【Python】 深入理解Python的单元测试:用unittest和pytest进行测试驱动开发