微信小程序实现录音与音频播放功能

目录
  • 1、录音
    • 1.1 案例
  • 2、音频播放控制
    • 2.1 案例

小程序继承了微信强大的语音处理功能,提供了录音、音频播放控制和背景音乐等功能,它们的功能不同,但有相似性。

1、录音

小程序提供了wx.startRecord(Object object)开始录音、wx.stopRecord()停止录音和RecorderManager录音管理器等接口对录音功能进行控制。因为RecorderManager录音管理器包含前两个接口的功能,所以这里只介绍RecorderManager。

接口 功能和用途
RecorderManager.resume() 继续录音
RecorderManager.stop() 停止录音
RecorderManager.onStart(function callback) 监听录音开始事件
RecorderManager.onResume(function callback) 监听录音继续事件
RecorderManager.onPause(function callback) 监听录音暂停事件
RecorderManager.onStop(function callback) 监听录音结束事件
RecorderManager.onFrameRecorded(function callback) 监听已录制完指定帧大小的文件事件。如果设置了 frameSize,则会回调此事件。
RecorderManager.onError(function callback) 监听录音错误事件

在使用录音接口时,需要先授权开放录音功能。

1.1 案例

本例使用RecorderManager录音管理器实现录音、暂停、继续录音、停止录音和播放录音等功能。

redorderManager.wxml

<button bindtap="start" class='btn'>开始录音</button>
<button bindtap="pause" class='btn'>暂停录音</button>
<button bindtap="resume" class='btn'>继续录音</button>
<button bindtap="stop" class='btn'>停止录音</button>
<button bindtap="play" class='btn'>播放录音</button>

redorderManager.js

const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()

Page({
  data: {
  },
  onLoad: function () {

  },
  //开始录音的时候
  start: function () {
    var that=this
    const options = {
      duration: 10000,//指定录音的时长,单位 ms
      sampleRate: 16000,//采样率
      numberOfChannels: 1,//录音通道数
      encodeBitRate: 96000,//编码码率
      format: 'mp3',//音频格式,有效值 aac/mp3
      frameSize: 50,//指定帧大小,单位 KB
    }
    //开始录音
    wx.authorize({
      scope: 'scope.record',
      success() {
        console.log("录音授权成功");
        //第一次成功授权后 状态切换为2
        that.setData({
          status: 2,
        })
        recorderManager.start(options);
        recorderManager.onStart(() => {
          console.log('recorder start')
        });
        //错误回调
        recorderManager.onError((res) => {
          console.log(res);
        })
      },
      fail() {
        console.log("第一次录音授权失败");
        wx.showModal({
          title: '提示',
          content: '您未授权录音,功能将无法使用',
          showCancel: true,
          confirmText: "授权",
          confirmColor: "#52a2d8",
          success: function (res) {
            if (res.confirm) {
              //确认则打开设置页面(重点)
              wx.openSetting({
                success: (res) => {
                  console.log(res.authSetting);
                  if (!res.authSetting['scope.record']) {
                    //未设置录音授权
                    console.log("未设置录音授权");
                    wx.showModal({
                      title: '提示',
                      content: '您未授权录音,功能将无法使用',
                      showCancel: false,
                      success: function (res) {

                      },
                    })
                  } else {
                    //第二次才成功授权
                    console.log("设置录音授权成功");
                    that.setData({
                      status: 2,
                    })

                    recorderManager.start(options);
                    recorderManager.onStart(() => {
                      console.log('recorder start')
                    });
                    //错误回调
                    recorderManager.onError((res) => {
                      console.log(res);
                    })
                  }
                },
                fail: function () {
                  console.log("授权设置录音失败");
                }
              })
            } else if (res.cancel) {
              console.log("cancel");
            }
          },
          fail: function () {
            console.log("openfail");
          }
        })
      }
    })

  },
  //暂停录音
  pause: function () {
    recorderManager.pause();
    recorderManager.onPause((res) => {

      console.log('暂停录音')

    })
  },
  //继续录音
  resume: function () {
    recorderManager.resume();
    recorderManager.onStart(() => {
      console.log('重新开始录音')
    });
    //错误回调
    recorderManager.onError((res) => {
      console.log(res);
    })
  },
  //停止录音
  stop: function () {
    recorderManager.stop();
    recorderManager.onStop((res) => {
      this.tempFilePath = res.tempFilePath;
      console.log('停止录音', res.tempFilePath)
      const { tempFilePath } = res
    })
  },
  //播放声音
  play: function () {
    innerAudioContext.autoplay = true
    innerAudioContext.src = this.tempFilePath,
      innerAudioContext.onPlay(() => {
        console.log('开始播放')
      })
    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  },

})

通过recorderManager.wxml中的5个按钮来调用RecorderManager录音管理器的录音、暂停、继续录音、停止录音和播放录音功能。在录制好音频之后也可以上传到服务器,本例只是把录制好的音频存放在手机临时目录,然后用来播放。

这个功能不好再文章中展示,暂时不加视频了,直到原理就行。

2、音频播放控制

wx.createAudioContext()接口和wx.createInnerAudioContext接口包含了大多数音频控制功能。这里主要介绍wx.createAudioContext()接口。wx.createAudioContext()是以组件<audio>为基础的操作。

AudioContext实例对象可通过wx.createAudioContext接口获取,它通过id跟一个<audio>组件绑定,操作对应的<audio>组件。AudioContext对象常用的函数如下所示。

接口 功能和用途
AudioContext.setSrc(string src) 设置音频地址
AudioContext.play() 播放音频。
AudioContext.pause() 暂停音频。
AudioContext.seek(number position) 跳转到指定位置(单位,s)。

2.1 案例

本例通过wx.createAudioContext()接口湖区AudioContext实例,然后调用播放和暂停功能,最后用slider组件来定位播放位置。

AudioContext.wxml:

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
<slider bindchange='change' min="0" max="160" value="{{time}}" color="blue" selected-color="red" show-value="true"></slider>
<button class='b1' type="primary" size="mini" bindtap="audioPlay">播放</button>
<button class='b1' type="primary" size="mini"  bindtap="audioPause">暂停</button>

AudioContext.js:

Page({
  onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  data: {
    time:0,
    poster: 'https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000',
    name: '稻香',
    author: '周杰伦',
    src: 'https://dl.stream.qqmusic.qq.com/RS020643ANK71H36gh.mp3?guid=5172738896&vkey=0B819C7570AAF78CC43A7C651E2C8C33FC76A07422EA718B9F8CAFD013F1BCF9E2DAF271064E05939716E400CE460A04669DFAC314460BB9&uin=1144722582&fromtag=66',
  },
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio14: function () {
    this.audioCtx.seek(0)
  },

  change: function (e) {
    console.log(e)
    this.audioCtx.seek(e.detail.value)
  }
})

点击播放之后,就有一首免费的稻香了。

以上就是微信小程序实现录音与音频播放功能的详细内容,更多关于小程序录音音频播放的资料请关注我们其它相关文章!

(0)

相关推荐

  • 微信小程序实现录音功能

    本文实例为大家分享了微信小程序录音功能的具体代码,供大家参考,具体内容如下 release.wxml <!--pages/index/release/release.wxml--> <scroll-view> <view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;"> <block wx:for="{{v

  • 微信小程序开发之录音机 音频播放 动画实例 (真机可用)

    趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒. 3.我在录音完成后才加载列表. 下图就是从微信存储的文件里获取到的列表信息.有储存路径,

  • 微信小程序实现录音Record功能

    本文实例为大家分享了微信小程序实现录音Record功能的具体代码,供大家参考,具体内容如下 布局 <!--pages/record/record.wxml--> <view> <button class="tui-menu-list" bindtap="startRecordAac" type="primary">录音开始(aac)</button> <button class="t

  • 微信小程序录音与播放录音功能

    小程序中提供了两种录音的API 旧版录音功能 首先启动录音,然后停止录音即可拉到音频的临时地址 启动录音: var that = this; wx.startRecord({ success: function (res) { // 调用了停止录音接口就会触发这个函数,res.tempFilePath为录音文件临时路径 var tempFilePath = res.tempFilePath that.setData({ src: tempFilePath }) }, fail: function

  • 微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

    本文介绍了微信小程序的开发,主要包括图片.录音.音频播放.音乐播放.视频.文件,具体如下: 图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到. 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'],

  • 微信小程序录音实现功能并上传(使用node解析接收)

    背景 我在开发小程序的时候,有需求要实现录音功能,并能上传给服务器.小程序录音功能我是使用的微信的wx.getRecorderManager()实现的,通过该方法创建实例,实例录音得到的文件是本地临时文件,上传文件需要使用微信的wx.uploadFile(Object object)方法,这就是本次项目的背景. 小程序端 html页面主要是第一个按钮,两个事件,长按开始录音,松手停止录音.第二个按钮只是一个播放录音的功能,用于确定录音是否成功 <!--pages/record/record.wx

  • 微信小程序实现录音与音频播放功能

    目录 1.录音 1.1 案例 2.音频播放控制 2.1 案例 小程序继承了微信强大的语音处理功能,提供了录音.音频播放控制和背景音乐等功能,它们的功能不同,但有相似性. 1.录音 小程序提供了wx.startRecord(Object object)开始录音.wx.stopRecord()停止录音和RecorderManager录音管理器等接口对录音功能进行控制.因为RecorderManager录音管理器包含前两个接口的功能,所以这里只介绍RecorderManager. 接口 功能和用途 R

  • 微信小程序实现录音

    本文实例为大家分享了微信小程序实现录音的具体代码,供大家参考,具体内容如下 为录音 录音中 wxml: <!-- 开始录音 --> <image src="/img/add_voice.png" class="add-voice" wx:if="{{record == 0 }}" bindtap="startRecord"></image>   <!-- 录音中 --> <

  • IOS中微信小程序播放缓存的音频文件的方法

    很多时候我们都想把数据预先缓存到本地,节省带宽.但是最近在处理微信小程序播放缓存到本地的音频文件的时候,遇到一些小问题,然后对于安卓和IOS需要采用不同的播放策略. 首先,如果哪怕用audio标签来播放在线的音频文件,假如服务端没有实现断点续传,IOS是无法播放的,这个需要注意. 对于缓存在小程序的音频(wx.saveFile(OBJECT)保存的音频),IOS只能通过播放背景音乐的接口播放,其它播放方法都没有成功实践,而对于安卓,内部 audio 上下文 innerAudioContext 对

  • 微信小程序使用slider实现音频进度条

    众所周知哈,微信小程序里面的音频播放是没有进度条的,但最近有个项目呢,客户要求音频要有进度条控制,所以就想到了用slider来实现音频的进度条显示及控制 微信小程序的slider组件,效果如图: 长的跟进度条还是蛮相似的. 下面上代码 slider是进度条,bindchange是slider的拖动事件,playtime 已播放时间,alltime 总时间 <view class='slider'>     <slider bindchange='sliderChange' activeC

  • 微信小程序实现录音时的麦克风动画效果实例

    前言 这个简单的麦克风demo的创意是来源于"包你说"中的录音效果,实现的方式其实也并不难,但对于小程序中的简易动画的使用的确很实用. 效果 先来看个demo,gif帧数比较低,实际效果和真机测试的流畅性还是很OK的 思路 通过setTimeout配合this.sedData来改变image中的src路径来生成动画.动画的播放以及隐藏则通过wx:if绑定一个自定义的参数来控制.下面就直接上代码. 代码 html <view class='animation-talk'> &

  • 微信小程序录音文件格式silk遇到的问题及解决方法

    不好意思,误导大家了,这种将silk解密的方式只是在小程序测试的时候可以,上线以后这种方法是不行的,还是需要使用解密转码.参见:https://github.com/kn007/silk-v3-decoder 微信小程序的录音文件就是个坑... 录音文件为silk格式,说是silk其实是base64加密后的webm格式,只需将其转为webm格式即可. 我在解决问题的过程中,学到了,遇到问题一定要抓住本质,本来我以为silk是啥格式,这不懵逼了,赶紧找audio是否能播放silk,不能播放就去找网

随机推荐