小程序录音及其动画

最新推荐文章于 2023-12-06 17:46:29 发布
最新推荐文章于 2023-12-06 17:46:29 发布
阅读量3.6k 收藏 3
点赞数 1
分类专栏： H5/Mini-Program 文章标签： 小程序 录音 圆环进度条
转载请邮件联系我(hello@yeshen.org)，以取得授权，谢谢！https://yeshen.org
本文链接：https://blog.csdn.net/yeshennet/article/details/80035257
版权

功能比较独立&&简单，大概是这样的交互

这里写图片描述

先说录音吧，看 文档

基础功能可以这样写，挺简单的～

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

Page({
  data: {
    intervalId：0，
    recording:false,
    recordtime：0,
    filePath:"",
    proc:0
  },
  onLoad: function (options) {
    recorderManager.onStart(() => {
      this.setData({ recording: true })
    })
    recorderManager.onStop((res) => {
      this.cancelRecord()
      this.setData({ 
        recording: false ,
        filePath: res.tempFilePath,
      })
    })
    recorderManager.onFrameRecorded((res) => {
      const { frameBuffer } = res
      console.log('frameBuffer.byteLength', frameBuffer.byteLength)
    })
    this.fetch();
  },
  startRecord: function () {
    recorderManager.start(this.data.options)
    this.setData({ 
      recordtime: 0 ,
      filePath: ""
    })
    this.data.intervalId = setInterval(()=>{
      var recordtime = this.data.recordtime + 50
      this.setData({ 
        recordtime: recordtime ,
        proc: recordtime / this.data.options.duration
      })
    }, 50);
    console.log(this.data.intervalId)
  },
  cancelRecord: function () {
    recorderManager.stop()
    if (this.data.intervalId > 0){
      clearInterval(this.data.intervalId)
      this.data.intervalId = 0
    }
  },
  playVoice:function(){
    innerAudioContext.src = this.data.url.length > 0 ? this.data.url : this.data.filePath
    innerAudioContext.play()
  }
})

比较难画的是圆形进度条，这里也分享下思路：

  • 先画一个半圆环A（eg:黄色）
  • 再画一个半圆环B（eg:背景色）
  • 按进度旋转第二个半圆环B
  • 进度过一半的时候，反转第二个半圆环B的颜色（eg:背景色->黄色）

细节是这样的：

把圆环一半设置为透明

background-image: linear-gradient(to left, transparent 50%, #F4F4F4 0);

旋转 && 50%变色

transform:rotate({{proc<0.5?proc:(proc+0.5)}}turn);
background-color: {{proc<0.5?'#F4F4F4;':'#FCDF6A'}}

20190409更新

下面是之前的代码

voice.js

var api = require('../../../utils/api/index.js');
var cache = require('../../../utils/api/lib/cache');
var constants = require('../../../utils/api/lib/constants.js');
const app = getApp()

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

Page({
  data: {
    status: 0,//1:没有录音 2:录音完成/已有录音
    maxTime: 10,
    recording: false,
    proc:0.0,
    uploading: false,
    filePath:"",
    url:"",
    recordtime:0,
    intervalId:0,
    options: {
      duration: 15000,
      sampleRate: 44100,
      numberOfChannels: 1,
      encodeBitRate: 192000,
      format: 'aac',
      frameSize: 50
    }
  },
  onLoad: function (options) {
    recorderManager.onStart(() => {
      this.setData({ recording: true })
    })
    recorderManager.onStop((res) => {
      this.cancelRecord()
      this.setData({ 
        recording: false ,
        filePath: res.tempFilePath,
        status:2
      })
    })
    recorderManager.onFrameRecorded((res) => {
      const { frameBuffer } = res
      console.log('frameBuffer.byteLength', frameBuffer.byteLength)
    })
    this.fetch();
  },
  onPullDownRefresh: function () {
    wx.stopPullDownRefresh();
  },
  onShareAppMessage: () => { return app.getShare() },
  fetch: function () {
    wx.showNavigationBarLoading();
    api.user.fetch({
      success: data => {
        wx.hideNavigationBarLoading()
        var user = data.user_info
        if (user != null 
          && user.u_base_info
          && user.u_base_info.voice_desc) {
          
          var voice = user.u_base_info.voice_desc;
          if (voice.url.length > 0){
            this.setData({
              url: voice.url,
              recordtime: voice.seconds*1000,
              status: 2
            })
          }else{
            this.setData({ status: 1 })
          }
        } else {
          this.setData({ status: 1 })
        }
      },
      fail: resp => {
        this.setData({ status: 1 })
        var msg = '错误：';
        if (error.code) msg += error.code;
        if (error.message) msg += error.message;
        wx.showToast({ title: msg, duration: 2000 })
      }
    })
  },
  startRecord: function () {
    recorderManager.start(this.data.options)
    this.setData({ 
      recordtime: 0 ,
      url: ""
    })
    this.data.intervalId = setInterval(()=>{
      var recordtime = this.data.recordtime + 50
      this.setData({ 
        recordtime: recordtime ,
        proc: recordtime / this.data.options.duration
      })
    }, 50);
  },
  cancelRecord: function () {
    recorderManager.stop()
    if (this.data.intervalId > 0){
      clearInterval(this.data.intervalId)
      this.data.intervalId = 0
    }
  },
  playVoice:function(){
    innerAudioContext.src = this.data.url.length > 0 ? this.data.url : this.data.filePath
    innerAudioContext.play()
  },
  tapDelete:function(){
    wx.showNavigationBarLoading()
    api.user.modify({
      data: {
        u_base_info: JSON.stringify({
          voice_desc: { url: "", seconds: 0 }
        })
      },
      success: resp => {
        wx.hideNavigationBarLoading()
        this.setData({
          status: 1,
          url: ""
        })
      }
    })
  },
  tapUpload:function(){
    var filePath = this.data.filePath;
    var fileName = filePath.match(/(wxfile:\/\/)(.+)/)
    if (!fileName) {
      fileName = filePath.match(/(http:\/\/tmp\/)(.+)/)
    }
    fileName = fileName[2]
    api.upload.uploadFn({
      data: { 
        filePath: filePath, 
        object_name: fileName, 
        file_type: constants.FILE_TYPE.VOICE 
      },
      success: data => {
        // update user info
        this.setData({ url: data.cdn_access_url})
        api.user.modify({
          data: {
            u_base_info: JSON.stringify({
              voice_desc: {
                url: data.cdn_access_url,
                seconds: parseInt(this.data.recordtime/1000)
              }
            })
          },
          success: resp => {
            wx.hideNavigationBarLoading()
            wx.showToast({ title: '保存成功', duration: 1500 })
            setTimeout(function () { wx.navigateBack(); }, 1500)
            app.event.emit("onSettingModify", {
              full: false,
              u_base_info:{
                voice_desc: {
                  url: data.cdn_access_url,
                  seconds: parseInt(this.data.recordtime / 1000)
                }
              } 
            })
          }
        })
      },
      fail: err => {
        wx.hideNavigationBarLoading()
        wx.showToast({ title: '上传失败', duration:1500 })
      },
      onProgress: info => {},
      onStartUpload: info => {
        wx.showNavigationBarLoading()
      }
    })
  }
})

voice.wxml

<view class="voice">
  <view wx:if="{{status==1}}" class="recording">
    <view wx:if="{{recording}}" class="title">录音中</view>
    <view wx:else class="title">你还没有语音</view>
    <view class="foot">  
      <view 
        class="{{recording?'btn-ing':'btn'}}" 
        bindtouchend='cancelRecord'
        bindtouchstart='startRecord'>
        <view 
          class="process"
          style="transform:rotate({{proc<0.5?proc:(proc+0.5)}}turn);background-color: {{proc<0.5?'#F4F4F4;':'#FCDF6A'}}">
        </view>
        <view class="cont">
          <image src="{{recording?'/image/v3/icon_speaking.png':'/image/v3/icon_speak.png'}}"></image>
        </view>
      </view>
      <view>{{recording?'松开结束':'按住录音'}}</view>
    </view>
  </view>
  <view wx:if="{{status==2}}" class="record-done">
    <view class="title">录音完成</view>
    <view class="play" bindtap="playVoice">
      <span>{{recordtime/1000}}”</span>
      <image src="/image/v3/voice.png"></image>
    </view>
    <view class="foot">
      <view bindtap="tapDelete" class="del">
        <image src="/image/v3/icon_speak_close.png"></image>
      </view>
      <view bindtap="tapUpload" class="done">
        <image src="/image/v3/icon_speak_done.png"></image>
      </view>
    </view>
  </view>
</view>

voice.wxss

.voice{
  text-align: center;
  color: #787878;
}
.voice .title{
  font-size: 34rpx;
  padding-top: 238rpx;
}
.voice .recording .foot{
  font-size: 30rpx;
  position: absolute;
  bottom: 224rpx;
  left: 0;
  right: 0;
}
.voice .recording .foot image{
  width: 74rpx;
  height: 104rpx;
}
.voice .recording .foot .btn{
  width: 192rpx;
  height: 192rpx;
  border-radius: 192rpx;
  box-sizing: border-box;
  background: -webkit-linear-gradient(left, #CB6BCF, #EF6790, #FC5045);
  margin: 0 auto 44rpx auto;
  padding: 6rpx;
}
.voice .recording .foot .btn .cont{
  width: 180rpx;
  height: 180rpx;
  background-color: #f4f4f4;
  border-radius: 180rpx;
  padding-top: 40rpx;
  box-sizing:border-box;
}
.voice .recording .foot .btn-ing{
  position: relative;
  width: 216rpx;
  height: 216rpx;
  border-radius: 216rpx;
  box-sizing: border-box;
  background: #FCDF6A;
  margin: 0 auto 32rpx auto;
  background-image: linear-gradient(to left, transparent 50%, #F4F4F4 0); 
}
.voice .recording .foot .btn-ing .cont{
  position: absolute;
  right: 12rpx;
  top: 12rpx;
  bottom: 12rpx;
  left: 12rpx;
  z-index: 2;
  width: 192rpx;
  height: 192rpx;
  background: -webkit-linear-gradient(left, #CB6BCF, #EF6790, #FC5045);
  border-radius: 192rpx;
  padding-top: 44rpx;
  box-sizing:border-box;
}
.voice .recording .foot .btn-ing .process{
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 108rpx;
  border-radius: 0 100% 100% 0 / 50%;
  transform-origin:0rpx 108rpx;
}
.voice .record-done .play{
  position: relative;
  width: 248rpx;
  height: 72rpx;
  border-radius: 72rpx;
  background: -webkit-linear-gradient(left, #CB6BCF, #EF6790, #FC5045);
  color: white;
  font-size: 28rpx;
  line-height: 72rpx;
  text-align: left;
  padding-left: 60rpx;
  box-sizing: border-box;
  margin: 194rpx auto 0 auto;
}
.voice .record-done .play image{
  position: absolute;
  right: 36rpx;
  top: 10rpx;
  width: 52rpx;
  height: 52rpx;
}
.voice .record-done .foot{
  position: absolute;
  bottom: 210rpx;
  left: 0;
  right: 0;
}
.voice .record-done .foot>view{
  width: 106rpx;
  height: 106rpx;
  border-radius:106rpx;
  display:inline-block;
  box-shadow: 0rpx 5rpx 10rpx 3rpx #c2c2c2;
}
.voice .record-done .foot .del{
  background-color: #C2C2C2;
}
.voice .record-done .foot .done{
  margin-left: 136rpx;
  background: -webkit-linear-gradient(left, #CB6BCF, #EF6790, #FC5045);
}
.voice .record-done .foot .del image{
  width: 39rpx;
  height: 39rpx;
  margin-top: 34rpx;
}
.voice .record-done .foot .done image{
  width: 55rpx;
  height: 33rpx;
  margin-top: 34rpx;
}

玩～

雨声不在
关注
专栏目录
微信小程序开发之录音机 音频播放 动画 (真机可用)
大灰狼的小绵羊哥哥的博客
12-12 4161
趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一
怎样实现微信语音聊天的动态语音图标？点击播放的时候，语音图标就要动态变化，再次点击可以切换动态和静态|animate css动画效果|语音播放动画
最新发布
南北极之间
07-30 490
可以复制代码到编辑器或者在线编辑器，然后粘贴预览。
小程序录音动画
12-08
小程序录音动画，有需要的可以直接下载或者加QQ944521945，发给你
微信小程序 录音机 播放器 动画
11-27
微信小程序 录音机 播放器 动画
小程序录音播放动画.zip
07-20
微信小程序录音动画、麦克风动画、按住按钮显示麦克风动画
微信小程序开发之录音机 音频播放 动画 (真机可用)(源代码+截图)
06-19
微信小程序开发之录音机 音频播放 动画 (真机可用)(源代码+截图)微信小程序开发之录音机 音频播放 动画 (真机可用)(源代码+截图)微信小程序开发之录音机 音频播放 动画 (真机可用)(源代码+截图)微信小程序开发之录音...
微信小程序的输入组件可以发送文字语音图片
10-24
本文将详细讲解微信小程序中的输入组件及其功能，以及如何实现文字、语音和图片的发送。 1. 文本输入组件（input） - 输入框组件在微信小程序中是`<input>`标签，用于接收用户输入的文字信息。开发者可以通过设置`...
微信小程序面试题
qq_56630531的博客
01-03 3485
1. 简述微信小程序的运行机制 热启动 ：假如⽤户已经打开了某个⼩程序，在⼀定时间内再次打开⼩程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的⼩程序切换到前台来使⽤。冷启动：⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况，此时⼩程序需要重新加载启动。 2. 分析一下小程序的优劣势 优势 无需下载，通过搜索和扫一扫就可以打开 良好的用户体验：打开速度快 开发成本比App要低 安卓上可以添加到桌面，与原生App差不多 为用户提供良好的安全保障。 劣势： 限制较多。 样式
小程序即时通讯聊天控件（一）
热门推荐
专注扫地人士的博客
11-06 8万+
小程序即时通讯——文本、语音输入控件（一）集成近期一直在做微信小程序，业务上要求在小程序里实现即时通讯的功能。这部分功能需要用到文本和语音输入及一些语音相关的手势操作。所以我写了一个控件来处理这些操作。控件样式我们先来看下效果目前的功能就是动态图中展示的，我们可以使用这个控件来切换输入方式（文本或语音）、获取到输入的信息、取消语音输入、语音消息录制过短过长的判断（该接口暂时还未开放），支持发送图片和
录音小程序完整demo（后台php）
07-06
录音小程序完整demo，实现微信登录，微信语音录制并上传以及下载播放等功能，可以直接使用
微信小程序Demo：录音、群分享、loading样式、城市组件等
05-27
微信小程序Demo：录音、群分享、loading样式、城市组件等
微信小程序 录语音 波浪效果
02-01
微信小程序录制语音波浪效果 为测试使用，带了些其他元素
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
09-01
主要介绍了微信小程序开发之录音机 音频播放 动画实例 (真机可用)，这里整理了详细的代码,有需要的小伙伴可以参考下。
微信小程序-音频组件
11-28
直接下载解压到你的组件库当中便可以使用，注意引用路径。该组件只需传入一个音频的资源地址便可以使用了，非常轻简的一个音频组件。
微信小程序 # 录音动画
skysys的研究小屋
06-04 919
背景 开发一个翻译小程序时，提供有语音翻译功能。在点击麦克风按钮的时候，需要在当前页面前置顶显示麦克风动画，表示正在录音。 实现 在我的项目中采用了CSS动画，如果要看其他方案大家请看文末参考 接入方式： <view class="pic myRecode" wx:if="{{recordState == true}}"> <view class="recode"> <!-- 这个是中间的那个麦克风icon--> <text class="i
uniapp 微信小程序：RecorderManager 录音DEMO
灵台方寸山斜月三星洞
08-25 3224
使用 实现录音。及相关的基本操作。单文件demo，创建个空项目贴复制粘贴即可。 参考资料 uni.getRecorderManager() 获取全局唯一的录音管理器 uni.createInnerAudioContext() 创建并返回内部 audio 上下文 innerAudioContext 对象 uni.uploadFile(OBJECT) 将本地资源上传到开发者服务器wx.getFileSystemManager() 获取 全局唯一的文件管理器。 基础库 1.9.9 开始支持。 FileS
微信小程序实现语音录音以及播放,以及播放时动态效果
m0_58575070的博客
12-06 2716
效果展示。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值