关于小程序上传录音,播放录音功能。

前言

因项目开发需求,在创建名片的时候可选择上传语音,播放语音。所以写这博客是我之前也没有写过录音的部分。记录笔记

关于文档

录音全局变量
const recorderManager = wx.getRecorderManager()//创建录音 返回值 recorderManager
const innerAudioContext = wx.createInnerAudioContext()//播放录音 返回值 innerAudioContext

小程序创建录音
在这里插入图片描述
那么接下来上菜
index.html

      <view class='infomationdesc'>
        <text>上传录音</text>
        <view class='audio-view'>
          <image class='headurl' src='{{headurl?headurl:"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1548148347&di=a062deda420f73c7d81e009fd4278f6d&src=http://b-ssl.duitang.com/uploads/item/201701/20/20170120012252_XtKwM.jpeg"}}'></image>

          <text wx:if="{{tempFilePath==''}}">  暂未录音  </text>
          <view wx:else bindtap='play' class='audio'></view>
        </view>
        <button bindlongtap="longTap"  bindtouchstart="touchStart" bindtouchend="touchEnd">长按录音</button>
      </view>

css就省略了,不是重点

重点来了

wx.getRecorderManager()//创建录音 返回值recorderManager 有很多方法,详情看文档
在这里插入图片描述

const innerAudioContext = wx.createInnerAudioContext()//播放录音 返回值 innerAudioContext**
在这里插入图片描述

index.js


//录音声明
const recorderManager = wx.getRecorderManager()//创建录音
const innerAudioContext = wx.createInnerAudioContext()//播放录音
Page({

  /**
   * 页面的初始数据
   */
  data: { 
  },

// 录音
  //开始录音的时候
  start: function() {
    const options = {
      duration: 10000, //指定录音的时长,单位 ms
      sampleRate: 16000, //采样率
      numberOfChannels: 1, //录音通道数
      encodeBitRate: 96000, //编码码率
      format: 'mp3', //音频格式,有效值 aac/mp3
      frameSize: 50, //指定帧大小,单位 KB
    }
    //开始录音
    recorderManager.start(options);
    recorderManager.onStart(() => {
      console.log('recorder start')
    });
    //错误回调
    recorderManager.onError((res) => {
      console.log(res, "aaas");
    })
  },

  //停止录音
  stop: function() {
    recorderManager.stop();
    recorderManager.onStop((res) => { 
      this.tempFilePath = res.tempFilePath;
      // 上传 录音文件   
      wx.uploadFile({
        header: app.globalData.header,
        url: app.host + '/returnFileInfo',
        filePath: res.tempFilePath,
        name: 'file',
        success: (res) => {     
          this.setData({
            tempFilePath: JSON.parse(res.data).path,//为播放提供路径
            audiosrc: {//这一步是我项目后台需求组装后台需要的格式
              src: JSON.parse(res.data).path,
              relateType: 3,
            },
          })
          console.log('停止录音', this.data.tempFilePath)
        }
      })
    })
  },

  //播放声音
  play: function() {
    console.log(this.data.tempFilePath,"播放录音地址")
    innerAudioContext.autoplay = true//是否自动播放
    innerAudioContext.src = this.tempFilePath, //音频资源的地址,用于直接播放
      innerAudioContext.onPlay(() => {
        console.log('开始播放')
      })
    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  },
  longTap: function() {
    console.log('longTap....')
  },

  touchStart: function() {
    console.log('touchStart....')
    this.start();
  },
  touchEnd: function() {
    console.log('touchEnd....')
    this.stop()
  },
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值