微信小程序之----语音录制功能

最新推荐文章于 2023-12-06 17:46:29 发布
最新推荐文章于 2023-12-06 17:46:29 发布
阅读量2k 收藏 9
点赞数 4
分类专栏： 微信小程序-知识总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45527865/article/details/109531800
版权

完整代码，请读者耐心看完

注意

  1. 首先创建录音对象
const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()
  1. 录音功能，授权与拒绝授权的逻辑处理
 wx.authorize({
      scope: 'scope.record',
      success() {
        that.stratRecordAudio()
      },
      fail() {
        wx.showModal({
          title: '提示',
          content: '您未授权录音，功能将无法使用',
          showCancel: true,
          confirmText: "授权",
          confirmColor: "#2D59DF",
          success: function (res) {
            if (res.confirm) {
              //确认则打开设置页面（重点）
              wx.openSetting({
                success: (res) => {
                  if (!res.authSetting['scope.record']) {
                    //未设置录音授权
                    wx.showModal({
                      title: '提示',
                      content: '您未授权录音，功能将无法使用',
                      showCancel: false,
                      success: function (res) {},
                    })
                  } else {
                    that.stratRecordAudio()
                  }
                },
                fail: function () {
                  console.log("授权设置录音失败");
                }
              })
            } else if (res.cancel) {
              console.log("cancel");
            }
          },
          fail: function () {
            console.log("openfail");
          }
        })
      }
    })
  1. 临时录音文件，要转存我们自己项目的资源站
// 传到资源保存站
wx.uploadFile({
      url: uploadAudio.uploadAudio,
      filePath: that.data.filePath,
      name: 'file',
      success(res) {
        filePath = JSON.parse(res.data).data[0]
        var params = {
          userId: that.data.userId,
          url: filePath,
          duration: that.data.duration,
          type: 2
        }
        //真正传到数据库
        postRecording(params).then(res => {
          wx.hideLoading()
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000
          })
          wx.navigateTo({
            url: '/pages/card/package-1st/pages/card-change/cardChange?userId=' + that.data.userId,
          })
        })
      }
    })

wxss

page{
  background-color:#F3F3F7;
}
.editWrapBox {
  background-color: #ffffff;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
}
.headerContentWrap{
  margin:0 auto;
  padding: 30px 0;
  box-sizing: border-box;

}
.headerInWrapItem{
  width:100vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.luyinWrap,.luyinWrap2,.luyinWrap3{
  width: 90px !important;
  height: 90px !important;
  line-height:75px  !important;
  border-radius: 50% !important;
  text-align: center !important;
  margin: 0;
}
.luyinWrap{
  background-color:#F1F3F8 !important;
}
.luyinWrap2{
  background-color:#2D59DF !important;
}
.luyinWrap3{
  background-color:#2D59DF;
  position: absolute;
  top: 25px;
}
.icon-maikefenghuatongyuyin{
  font-size: 35px;
  color: #2D59DF;
}
.icon{
  font-size: 35px;
  color: #ffffff;
}
.icon-bofanganniu,.icon-iconstop{
  font-size: 25px;
  color: #ffffff;
}
.actionName{
  margin-top: 14px;
  font-size: 14px;
  color: #333333;
}
.numberSize,.delText{
  color: #E50000;
}
.delText{
  font-size: 14px;
  width: 55px;
  height: 55px;
  text-align: center;
  line-height: 55px;
  margin-top: 27px;
  border: 1px solid #E50000;
  border-radius: 50%;
}
.progressWrap {
  width: 100vw;
  height: 40px;
  line-height: 40px;
  margin:0px auto;
  background-color: #BCCDFF;
  font-size: 14px;
  text-align: center;
  color: #333333;
}
.luyinOutWrap.active{
  background-color: #BCCDFF;
  opacity: 1;
  animation: scale 2.5s infinite ease alternate;
}
.luyinOutWrap{
  width:120px;
  height:120px;
  text-align: center;
  margin: 10px auto;
  border-radius: 50%;
}
@keyframes scale {
  0% {
    opacity:1
  }
  25% {
    opacity:0.75
  }
  45% {
    opacity:0.5
  }
  50% {
    opacity:0.25
  }
  75% {
    opacity:0.5
  }
  85% {
    opacity:0.75
  }
  100% {
    opacity:1
  }
  
}
.saveinfo {
  font-size: 16px !important;
  color: #ffff !important;
  text-align: center !important;
  background-color: #2D59DF !important;
  border-radius: 20px !important;
  width:95% !important;
  position: fixed !important;
  bottom: 10px !important;
  left: 10px !important;
}

wxml

<view class="editWrapBox">
  <!-- 未录音 -->
  <view class="headerContentWrap" wx:if="{{noRecordShow}}">
    <view class="headerInWrapItem">
      <button class="luyinWrap" bindtap="authorize"><i class="iconfont icon-maikefenghuatongyuyin"></i></button>
      <view class="actionName">点击录音</view>
    </view>
  </view>
  <!-- 录制语音中 -->
  <view wx:if="{{recordLuzhiShow}}">
    <view class="progressWrap">
      录音中（已录制<text class="numberSize">{{countNume}}s</text>），再次点击按钮即可停止录制
    </view>
    <view class="headerContentWrap">
      <view class="headerInWrapItem">
        <view class="luyinOutWrap active"></view>
        <button class="luyinWrap3" bindtap="stopRecordAudio"><i
            class="iconfont icon-maikefenghuatongyuyin icon"></i></button>
      </view>
    </view>
  </view>
  <!-- 播放语音中 -->
  <view wx:if="{{playAudioShow}}">
    <view class="progressWrap">
      播放中...
    </view>
    <view class="headerContentWrap">
      <view class="headerInWrapItem">
        <view class="luyinOutWrap active"></view>
        <button class="luyinWrap3"><i class="iconfont icon-iconstop"></i></button>
      </view>
    </view>
  </view>
  <!-- 录音完成 -->
  <view class="headerContentWrap" wx:if="{{finishRecordShow}}">
    <view class="headerInWrapItem">
      <view bindtap="playRecordAudio" data-type="1"> <button class="luyinWrap2"><i class="iconfont icon-bofanganniu"></i></button>
        <view class="actionName">点击播放录音1</view>
      </view>
      <view class="delText" bindtap="recycleRecordAudio">重录</view>
    </view>
  </view>
  <!--已经存在语音 -->
  <view class="headerContentWrap" wx:if="{{extistRecordShow}}">
    <view class="headerInWrapItem">
      <view bindtap="playRecordAudio" data-type="2"><button class="luyinWrap2"><i class="iconfont icon-bofanganniu"></i></button>
        <view class="actionName">点击播放录音2</view>
      </view>
      <view class="delText" bindtap="deleteRecord">删除</view>
    </view>
  </view>
  <!-- 保存按钮 -->
  <button class="saveinfo" wx:if="{{finishRecordShow}}" bindtap="saveRocordAudio">保存</button>
</view>

js

const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()
var init
==语音删除、保存接口== 
import {
  postRecording,
  deleteRecording
} from '../../../../../config/api/cardUrl'    
import {
  uploadAudio
} from '../../../../../config/basicConfig' //语音保存地址

Page({
  data: {
    noRecordShow: true, //初始显示
    recordLuzhiShow: false, //控制录制
    finishRecordShow: false, //完成录音
    extistRecordShow: false, //已存在录音
    playAudioShow: false, //播放按钮
    exisiFilePath: '', //已经存在的录音
    countNume: 0, // 倒计时
    filePath: '', // 临时语音录制文件
    duration: 0, // 录制时间
    userId: 0, //用户id
    id: 0, //语音id
  },
  onLoad: function (options) {
    this.setData({
      userId: parseInt(options.userId),
      id: parseInt(options.id)
    })
    if (options.filePath == "undefined") {
      this.setData({
        extistRecordShow: false,
        noRecordShow: true,
      })
    } else {
      this.setData({
        exisiFilePath: options.filePath,
        extistRecordShow: true,
        noRecordShow: false,
      })
    }
  },
  // 语音授权
  authorize() {
    var that = this
    wx.authorize({
      scope: 'scope.record',
      success() {
        that.stratRecordAudio()
      },
      fail() {
        wx.showModal({
          title: '提示',
          content: '您未授权录音，功能将无法使用',
          showCancel: true,
          confirmText: "授权",
          confirmColor: "#2D59DF",
          success: function (res) {
            if (res.confirm) {
              //确认则打开设置页面（重点）
              wx.openSetting({
                success: (res) => {
                  if (!res.authSetting['scope.record']) {
                    //未设置录音授权
                    wx.showModal({
                      title: '提示',
                      content: '您未授权录音，功能将无法使用',
                      showCancel: false,
                      success: function (res) {},
                    })
                  } else {
                    that.stratRecordAudio()
                  }
                },
                fail: function () {
                  console.log("授权设置录音失败");
                }
              })
            } else if (res.cancel) {
              console.log("cancel");
            }
          },
          fail: function () {
            console.log("openfail");
          }
        })
      }
    })
  },
  //录音计时器
  recordingTimer: function (time) {
    var that = this
    if (time == undefined) {
      //将计时器赋值给init
      init = setInterval(function () {
        var time = that.data.countNume + 1;
        that.setData({
          countNume: time
        })
      }, 1000);
    } else {
      clearInterval(init)
    }
  },
  // 开始录音
  stratRecordAudio() {
    clearInterval(init) //清除定时器
    // 监听音频开始事件
    this.setData({
      noRecordShow: false,
      recordLuzhiShow: true
    })
    recorderManager.onStart((res) => {})
    recorderManager.onStop((res) => {
      this.setData({
        recordLuzhiShow: false,
        finishRecordShow: true,
        filePath: res.tempFilePath,
        duration: res.duration
      })
      this.recordingTimer(this.data.countNume)
    })
    const options = {
      duration: this.data.duration, //指定录音的时长，单位 ms
      sampleRate: 16000, //采样率
      numberOfChannels: 1, //录音通道数
      encodeBitRate: 96000, //编码码率
      format: 'mp3', //音频格式，有效值 aac/mp3
      frameSize: 50, //指定帧大小，单位 KB
    }
    this.recordingTimer()
    recorderManager.start(options)
  },
  // 停止录音
  stopRecordAudio() {
    this.setData({
      recordLuzhiShow: false,
      finishRecordShow: true,
    })
    recorderManager.onStop((res) => {
      this.setData({
        filePath: res.tempFilePath,
        duration: res.duration
      })
    })
    this.recordingTimer(this.data.countNume)
    recorderManager.stop()
  },
  // 播放录音
  playRecordAudio(e) {
    //在ios下静音时播放没有声音，默认为true，改为false就好了。
    innerAudioContext.obeyMuteSwitch = false
    var filPathType = e.currentTarget.dataset.type
    if (filPathType == 1) {
      this.setData({
        playAudioShow: true,
        finishRecordShow: false
      })
      innerAudioContext.src = this.data.filePath
      innerAudioContext.play()
      innerAudioContext.onEnded(() => {
        this.setData({
          playAudioShow: false,
          finishRecordShow: true
        })
      })
    } else {
      this.setData({
        playAudioShow: true,
        extistRecordShow: false
      })
      innerAudioContext.src = this.data.exisiFilePath
      innerAudioContext.play()
      innerAudioContext.onEnded(() => {
        this.setData({
          playAudioShow: false,
          extistRecordShow: true
        })
      })
    }
   
  },

  // 重新录音
  recycleRecordAudio() {
    var that = this
    wx.showModal({
      title: "重新录音",
      content: "是否重新录制?",
      success(res) {
        if (res.confirm) {
          that.setData({
            noRecordShow: true, //初始显示
            recordLuzhiShow: false, //控制录制
            finishRecordShow: false, //完成录音
            extistRecordShow: false, //已存在录音
            playAudioShow: false, //播放按钮
            filePath: '',
            countNume: 0,
            duration: 0
          })
          innerAudioContext.stop()
        }
      }
    })
  },
  // 保存录音
  saveRocordAudio() {
    wx.showLoading({
      title: '保存中...',
    })
    var filePath = "",
      that = this
    wx.uploadFile({
      url: uploadAudio.uploadAudio,
      filePath: that.data.filePath,
      name: 'file',
      success(res) {
        filePath = JSON.parse(res.data).data[0]
        var params = {
          userId: that.data.userId,
          url: filePath,
          duration: that.data.duration,
          type: 2
        }
        postRecording(params).then(res => {
          wx.hideLoading()
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000
          })
          wx.navigateTo({
            url: '/pages/card/package-1st/pages/card-change/cardChange?userId=' + that.data.userId,
          })
        })
      }
    })

  },
  // 删除语音
  deleteRecord() {
    var that = this
    wx.showModal({
      title: '提示',
      content: '确定要删除语音吗?',
      success(res) {
        if (res.confirm) {
          deleteRecording(that.data.id).then(res => {
            wx.showToast({
              title: '删除成功',
              icon: 'success',
              duration: 2000
            })
            wx.navigateTo({
              url: '/pages/card/package-1st/pages/card-change/cardChange?userId=' + that.data.userId,
            })
          })
        }
      }
    })
  },
})
你管我管你疯啊
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发中的音频录制和录音功能
2401_85258012的博客
06-03 342
通过wx.startRecord()方法可以实现音频的录制，使用RecorderManager可以实现音频的录音，而使用wx.createInnerAudioContext方法可以创建音频上下文实例实现音频的播放。可以将该路径保存起来，以便后续使用。在完成音频录制或录音后，我们可以通过wx.createInnerAudioContext方法创建音频上下文实例，实现音频的播放。音频录制和录音功能是微信小程序开发中常用的功能之一，本文将通过代码案例的方式详细介绍如何实现音频的录制和录音功能。
微信小程序实现录制、试听、上传音频功能（带波形图）
10-15
主要介绍了微信小程序实现录制、试听、上传音频功能（带波形图）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序录音接口使用整理-RecorderManager
天马3798
05-09 4977
一、微信小程序的录音接口 新版api中已经放弃wx.startRecord(),wx.stopRecord() 接口的，改为了RecorderManager对象。 RecorderManager 全局唯一的录音管理器 官网Api定义：RecorderManager | 微信开放文档 通过wx.getRecorderManage() 方法获得 wx.getRecorderManager() 每次录音最长，支持10分钟，具体时间可以再start参数中指定。 二、开始录音、停止录音 初始化
微信小程序 录制声音
qq_32134891的博客
06-27 1427
上述例子中，当点击"开始录音"按钮时，将触发startRecord函数，在success回调中，可以获取到录音文件的临时路径，你可以将其保存起来；当点击"停止录音"按钮时，将触发stopRecord函数，停止录音。请注意，为了录制声音，你的小程序需要获取用户的录音授权，可以在小程序的app.json文件中配置"requiredRecordPermission"字段来获取授权。在微信小程序中录制声音，你可以使用微信小程序提供的API：wx.startRecord() 和 wx.stopRecord()。
微信小程序开发中的麦克风录音和音频上传
吃不胖.
09-29 1596
然后在startRecord事件中，通过wx.getRecorderManager()方法获取录音管理器，再调用recorderManager.onStart()和recorderManager.onError()方法，分别表示录音开始和录音出错的回调函数。然后使用wx.uploadFile()方法上传音频文件，其中url属性表示上传服务器的地址，filePath属性表示要上传的文件路径，name属性表示上传的文件名，success和fail属性分别表示上传成功和上传失败的回调函数。
小程序调取录音权限授权等（各权限）页面的接口顺序，
热门推荐
Sol的博客
12-21 1万+
以录音接口为例 var that = this; const recorderManager = wx.getRecorderManager() const options = { duration: 6000, sampleRate: 44100, numberOfChannels: 1, encodeBitRate: 192000, format
微信小程序实现语音识别功能
q6q6q的专栏
10-27 8631
原标题：微信小程序实现语音识别功能使用小程序实现语音识别功能，由于语音识别可以直接使用各厂家的API接口，并且小程序为腾讯所有，因此考虑到可能的低延时，采用了腾讯提供的免费API接口，准确讲是腾讯语音的“一句话识别”接口。网络整体框架是：小程序用户使用手机客户端录入语音，采集之后反馈到自己搭建的服务器，由服务器转发到腾讯语音识别后台，拿到识别文本后反馈到小程序前台，如下图： 本次推送用来阐述微信客...
微信小程序之录音与播放
weixin_41251573的博客
05-25 4957
录音参考官方网址： https://developers.weixin.qq.com/miniprogram/dev/api/RecorderManager.html 播放参考官方网址： https://developers.weixin.qq.com/miniprogram/dev/api/InnerAudioContext.html 1、 .wxml文件 其中 isSpeakin...
微信小程序开发-语音跟读案例源码.zip
08-15
9. **微信授权**：在使用微信小程序时，通常需要用户授权，例如获取用户的基本信息或访问麦克风权限，以便进行语音识别和录制。 10. **性能优化**：对于包含语音功能的小程序，优化用户体验至关重要。这可能涉及到...
微信小程序--语音的记录和分享BiliBala-master.zip
09-25
微信小程序提供了录音管理器（wx.startRecord、wx.stopRecord等API）来实现语音录制。BiliBala-master可能使用这些API来让用户录制语音片段。开发者可以通过设定参数控制录音的时长、格式等，确保用户可以方便地...
语音变声器微信小程序源码-支持多种音效.rar
03-03
它是一个基于微信小程序的语音变声应用的源代码，具备变换声音效果的功能。"支持多种音效"表明这个小程序能够提供多种不同的声音样式供用户选择和使用，比如卡通声音、机器人声音、老人声音等，增加了趣味性和可玩性...
微信小程序-语音跟读-程序源码.zip
05-31
"微信小程序-语音跟读-程序源码.zip"这个压缩包文件显然包含了用于创建一个语音跟读功能的微信小程序的完整源代码。 语音跟读功能通常涉及到以下几个技术点： 1. **语音识别（ASR，Automatic Speech Recognition）...
微信小程序 录音+播放组件封装(源码）
weixin_44383533的博客
05-16 1826
长按录音 松开结束录音 点击播放 再次点击暂停 再次点击继续播放 ios静音格式下 播放器播放没有声音 我们需要在 app.ts全局设置 obeyMuteSwitch:false
微信小程序：录音功能（授权、统计时长、上传）
爱拼才会赢～的博客
03-18 5657
最近呢，用小程序做了个录音的功能，接下来呢，与大家一起分享一下我的开发心得，希望能帮到大家。那我们就继续向下????看吧~ 需求呢，差不多是这样的： 单击开始录制（不是摁住不放哦） 点击完成上传录音 录音计时功能 当到达360s，自动进行上传 好了那来看看效果图吧，如下图所示： 接下来，进入主题，奥利给 一开始呢，打算用wx.startRecord()，后来看了下文档，发现从基础库 1.6.0 开始，本接口停止维护，被 wx.getRecorderManager 代替了，下面的我会说一下录音的几个重
微信小程序录音与播放录音和上传功能
网络Online
04-22 1912
content: '您已经拒绝访问麦克风，无法使用录音功能，如需使用，请删除此小程序，并重新搜索打开',record_tmpfile: '', // 最近一次录音的临时文件路径;// 停止录音之后，把录取到的音频放在res.tempFilePath。format: 'mp3' // 如果录制acc类型音频则改成aac。uploaded_url: '', // 已上传文件的路径;record_ms: '', // 录音的毫秒数。title: '无法录音',// 录音失败的回调处理。// 播放音频失败的回调。
微信小程序实现语音录音以及播放,以及播放时动态效果
最新发布
m0_58575070的博客
12-06 2516
效果展示。
微信小程序实战：打造仿微信漂流瓶功能
微信小程序提供了录音接口，可以方便地进行语音录制和播放。在编辑漂流瓶内容时，可以设置一个按钮用于切换文字和语音模式，并在录音完成后立即发送。 3. 捡拾漂流瓶 捡拾漂流瓶时，我们需要从服务器（在这个例子中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值