微信小程序实现录音

本文实例为大家分享了微信小程序实现录音的具体代码,供大家参考,具体内容如下

为录音

录音中

wxml:

<!-- 开始录音 -->
<image src="/img/add_voice.png" class="add-voice" wx:if="{{record == 0 }}" bindtap="startRecord"></image>
 
<!-- 录音中 -->
<block wx:if="{{record == 1}}">
<view class='audio'>
  <view class='laudio_btn' bindtap='remove'>
    <image src='/img/btn_close2.png' style='width:26rpx;height:25rpx;'></image>
  </view>
  <text class='laudio_text1'>|</text>
  <text class='laudio_text2'>{{formatedRecordTime}}</text>
  <view class='laudio_pro'>
    <image src='/img/btn_play2.png' style='width:100%;height:100%' catchtap='keep' wx:if="{{keep}}"></image>
    <image src='/img/btn_play3.png' style='width:100%;height:100%' catchtap='pause' wx:else></image>
  </view>
  <text class='audio_text' catchtap='stopRecord'>完成</text>
</view>
</block>

wxss:

.add-voice {
  width: 158rpx;
  height: 158rpx;
}
 
.audio {
  display: flex;
  position: relative;
  height: 140rpx;
  line-height: 140rpx;
  background: #f7f7f7;
  width: 96%;
}
 
/* 传语音 */
.audio{
  display: flex;
  position: relative;
  height:140rpx;
  line-height: 140rpx;
  background: #f7f7f7;
  width: 96%;
}
/* 录语音 */
.laudio_btn{
  /* width:26rpx;
  height:26rpx; */
  margin-left:42rpx
}
.audio_img{
  position: absolute;
  /* top:-15rpx; */
  /* right:-15rpx; */
  right: 0;
  width:30rpx;
  height:30rpx;
}
.audio_btn{
  width:88rpx;
  height:88rpx;
  margin-top:28rpx;
   margin-left:16rpx
}
.audio_pro{
  margin-top:36rpx;
  margin-left:20rpx;
  width:300rpx;
}
.audio_text{
  font-weight: bold;
  margin-left:50rpx;
  color:#90BED5;
  font-size: 10pt
}
.laudio_text1{
  font-size: 26rpx;
  margin-left:20rpx;
  color: #90BED5
}
.laudio_text2{
  font-weight: bold;
  font-size: 26rpx;
  margin-left:20rpx;
  color: #F8624E;
  width: 381rpx;
}
.laudio_pro{
  width:88rpx;
  height:88rpx;
  margin-top:28rpx;
}

js:

var util = require('../../utils/count.js') //计算时分秒函数
let radio = wx.getRecorderManager(); //创建录音
const app = getApp()
 
var recordTimeInterval; //录音 时分秒 '00:00'
 
Page({
  data: {
    record : 0, //未录音
    formatedRecordTime: '00:00',
    keep: true,
    recordTime: 0
  },
  //开始录音
  startRecord: function () {
    var that = this
    this.setData({ record: 1 })
    recordTimeInterval = setInterval(function () { //计算时分秒
      var recordTime = that.data.recordTime += 1
      that.setData({
        formatedRecordTime: util.formatTime(that.data.recordTime),
        recordTime: recordTime
      })
    }, 1000)
    const options = {
      duration: 30000, //录音
      sampleRate: 44100,
      numberOfChannels: 1,
      encodeBitRate: 192000,
      format: 'mp3'
    }
    radio.start(options); //开始录音
    radio.onStart((res => {
      console.log('监听录音', res)
    }));//监听录音事件
  },
  //暂停录音
  keep() {
    radio.resume();
    this.setData({ keep: false })
    clearInterval(recordTimeInterval);
  },
  //继续录音
  pause() {
    var that = this
    this.setData({ keep: true, })
    recordTimeInterval = setInterval(function () { //计算时分秒
      var recordTime = that.data.recordTime += 1
      that.setData({
        formatedRecordTime: util.formatTime(that.data.recordTime),
        recordTime: recordTime
      })
    }, 1000)
  },
  //结束录音
  stopRecord: function () {
    console.log('录音结束了')
    var that = this;
    clearInterval(recordTimeInterval);
    radio.stop(); //录音结束
    radio.onStop((res) => { //录音结束
      // that.stopRecord
      console.log('录音结束', res);
      this.setData({
        record: res.tempFilePath,
        musicUrl: res.tempFilePath, //录音音频
        duration: res.duration, //音频时长时间戳
        record: true,
      })
    })
  },
  //取消录音
  remove() {
    radio.stop(); //结束录音
    this.setData({ record: 0, recordTime: 0, play: false })
    clearInterval(recordTimeInterval);
  },
})

utils/count.js

function formatTime(time) {
  if (typeof time !== 'number' || time < 0) {
    return time
  }
 
  var hour = parseInt(time / 3600)
  time = time % 3600
  var minute = parseInt(time / 60)
  time = time % 60
  var second = time
 
  return ([hour, minute, second]).map(function (n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  }).join(':')
}
 
function formatLocation(longitude, latitude) {
  if (typeof longitude === 'string' && typeof latitude === 'string') {
    longitude = parseFloat(longitude)
    latitude = parseFloat(latitude)
  }
 
  longitude = longitude.toFixed(2)
  latitude = latitude.toFixed(2)
 
  return {
    longitude: longitude.toString().split('.'),
    latitude: latitude.toString().split('.')
  }
}
 
module.exports = {
  formatTime: formatTime,
  formatLocation: formatLocation
}

播放音频:微信小程序实现播放音频

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

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

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

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

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

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

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

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

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

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

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

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

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

  • 微信小程序用户后台定位及录音授权及请求示例

    目录 官方文档 小程序授权 获取用户授权设置 提前发起授权请求 scope 列表 授权有效期 注意事项 后台定位 案例:个人信息getUserInfo 录音等,可以写在onLaunch中 官方文档 <https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html> https://developers.weixin.qq.com/miniprogram/dev/api/open-api

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

    前言 这个简单的麦克风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,不能播放就去找网

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

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

随机推荐