精华内容
下载资源
问答
  • 微信小程序录音文件.silk上传服务器并且转换mp3格式。本教程将采用nodejs/silk_v3_decoder.exe/ffmpeg三个东西配合使用。本教程是在windows下通过。 本教程包括下面几个步骤: 1、nodejs安装等一些基本使用就不说了...
  • 录音文件为silk格式,说是silk其实是base64加密后的webm格式,只需将其转为webm格式即可...但是在处理过程中遇到各种坑,下面小编给大家带来了微信小程序录音文件格式silk遇到的问题及解决方法,感兴趣的朋友一起看看吧
  • 小程序录音输出波形图,需要用到silk-v3-decoder,wavesurfer。如有疑问欢迎私信。
  • 主要介绍了微信小程序录音与播放录音功能,小程序中提供了两种录音的API,旧版本录音功能和新版录音功能,需要的朋友可以参考下
  • 微信小程序 录音机 播放器 动画

    热门讨论 2016-11-27 00:22:10
    微信小程序 录音机 播放器 动画
  • 微信小程序录音silk文件格式转换为MP3及PCM格式的方法-附件资源
  • 小程序录音功能我是使用的微信的wx.getRecorderManager()实现的,通过该方法创建实例,实例录音得到的文件是本地临时文件,上传文件需要使用微信的wx.uploadFile(Object object)方法,这就是本次项目的背景...
  • 小程序中提供了两种录音的API 旧版录音功能 首先启动录音,然后停止录音即可拉到音频的临时地址 启动录音: var that = this; wx.startRecord({ success: function (res) { // 调用了停止录音接口就会触发这个...
  • 小程序录音动画

    2017-12-08 15:10:33
    小程序录音动画,有需要的可以直接下载或者加QQ944521945,发给你
  • 微信小程序 录音机源码 录音的音频默认是存在本地的临时路径下.第二次进入小程序无法正常使用,可以存持久,但是本地文件大小的限制是100M,最好还是上传后台. 2.录音的时间不能太短.否则会失败;也不能超过60秒.到了60...
  • 微信小程序录音并将录音文件上传到服务器源码,包含小程序端录音及播放功能,以及服务器端php上传处理代码。
  • 微信小程序录音动画、麦克风动画、按住按钮显示麦克风动画
  • 主要为大家详细介绍了微信小程序实现录音功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序录音

    2018-10-31 15:19:11
    微信小程序录音demo,从录音到播放,带动画。可以作为参考或整体使用。
  • 主要给大家介绍了关于微信小程序实现录音时的麦克风动画效果的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 微信小程序录音与播放录音功能实现,话不多说直接上代码实例: test.wxml <button bindtap='start'>开始录音</button> <button bindtap='play'>播放录音</button> <button bindtap=...

    微信小程序录音与播放录音功能实现,话不多说直接上代码实例:

    test.wxml

    <button bindtap='start'>开始录音</button>  
    <button bindtap='play'>播放录音</button>  
    <button bindtap='stop'>停止录音</button>
    

    test.js

    var voice = "";
    Page({
      play: function () {
        //播放声音文件  
        wx.playVoice({
          filePath: voice
        })
      },
      start: function () {
        //开始录音  
        wx.startRecord({
          success: function (e) {
            voice = e.tempFilePath
          }
        })
      },
      stop: function () {
        //结束录音  
        wx.stopRecord();
      }
    })
    

    微信小程序录音与播放录音功能前端界面:

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

    pick一下最终效果,然后一步一步来。先把界面效果做出来。

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

    1. 长按会随动画出现边上半透明的圈,松开会缩回去。
    2. 顶部progressBar长按时出现,然后随录音时长变短。

    这是界面功能,我们先搞一下。

    wxml

    <view class="head">
      <progress strokeWidth="4" percent="{{value}}" wx:if="{{showPg}}" ></progress>
      <view class="dot {{isTouchStart==true?'dot-blowup':''}} {{isTouchEnd==true?'dot-zoomout':''}}" style="display:{{isDot}}"></view>
      <view class="record" bindtouchstart="recordStart" bindtouchend="recordTerm">
        <image mode="widthFix" src="../../images/record.png"></image>
      </view>
    </view>

    wxss样式

    .head {
      width: 100%;
      height: 400rpx;
      position: relative;
      
    }
    .head ,page{
      background-color: #f7f7f7;
    }
    .record, .dot {
      height: 200rpx;
      width: 200rpx;
      border-radius: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation-iteration-count: 1;
    }
    
    .record {
      background: rgba(92, 212, 76);
      z-index: 10;
    }
    
    .dot {
      background: rgba(92, 212, 76, 0.7);
      z-index: 9;
    }
    
    .dot-blowup {
      animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      animation-fill-mode: forwards;
    }
    
    .dot-zoomout {
      animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      animation-fill-mode: forwards;
    }
    
    @keyframes sploosh2 {
      0% {
        box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
        background: rgba(92, 212, 76, 0.7);
      }
    
      100% {
        box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
        background: rgba(92, 212, 76, 0.3);
      }
    }
    
    @keyframes sploosh3 {
      0% {
         box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
        background: rgba(92, 212, 76, 0.3);
      }
    
      100%{
        box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
        background: rgba(92, 212, 76, 0.7);
      }
    }
    
    .record image {
      height: 90rpx;
      width: 90rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 10;
      background: transparent;
      transform: translate(-50%, -50%);
    }

    js赋值

    
    var app = getApp(),
      rm = wx.getRecorderManager();
      //录音停止时调用
    rm.onStop(function(e) {
        var a = this;
        wx.showLoading({
          title: "正在识别..."
        });
      
        //上传逻辑
        var n = {
          url: app.globalData.url + "upload",
          filePath: e.tempFilePath,
          name: "music",
          header: {
            "Content-Type": "application/json"
          },
          success: function (res) {
            
           }
          };
          wx.uploadFile(n);
      }),
      Page({
    
        /**
         * 页面的初始数据
         */
        data: {
          hasRecord: false,
          isDot: "block",
          isTouchStart: false,
          isTouchEnd: false,
          value: '100',
          touchStart:0,
          touchEnd:0,
          vd:''
        },
    
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function(options) {
          var a = this;
          wx.authorize({
            scope: "scope.record",
            success: function() {
              console.log("录音授权成功");
            },
            fail: function() {
              console.log("录音授权失败");
            }
          }), a.onShow()
    
        },
        // 点击录音按钮
        onRecordClick: function () {
          wx.getSetting({
            success: function (t) {
              console.log(t.authSetting), t.authSetting["scope.record"] ? console.log("已授权录音") : (console.log("未授权录音"),
                wx.openSetting({
                  success: function (t) {
                    console.log(t.authSetting);
                  }
                }));
            }
          });
        },
        /**
         * 长按录音开始
         */
        recordStart: function(e) {
          var n = this;
          rm.start({
            format: "mp3",
            sampleRate: 32e3,
            encodeBitRate: 192e3
          }), n.setData({
            touchStart: e.timeStamp,
            isTouchStart: true,
            isTouchEnd: false,
            showPg: true,
          })
          var a = 15, o = 10;
          this.timer = setInterval(function () {
            n.setData({
              value: n.data.value - 100 / 1500
            }), (o += 10) >= 1e3 && o % 1e3 == 0 && (a-- , console.log(a), a <= 0 && (rm.stop(),
              clearInterval(n.timer), n.animation2.scale(1, 1).step(), n.setData({
                animationData: n.animation2.export(),
              showPg: false,
              })));
          }, 10);
        },
        /**
         * 长按录音结束
         */
        recordTerm: function(e) {
          rm.stop(), this.setData({
            isTouchEnd: true,
            isTouchStart: false,
            touchEnd: e.timeStamp,
            showPg: false,
            value: 100
          }), clearInterval(this.timer);
        }
      })

    这里我的录音按钮点击扩散效果用的是纯css实现,而上方progress是使用animation实现的。

    参考自必学智库

    在开发微信小程序遇到资源类无法显示的问题:找了很多资料,特记录备用。

    1. 真机测试不能显示图片问题

    原因:微信小程序的图片资源必须是base64和网络图片格式。
    解决方案:js中,对本地图片进行转码,或者直接将url换为image根目录。

    参考资料:http//:wangzhan.jiaxiangz.com

     

     

    展开全文
  • 微信小程序录音权限

    千次阅读 2020-04-21 14:51:53
    #微信小程序录音权限设置 wx.showModal({ //====> 授权 title: '提示', content: '您未授权录音,功能将无法使用', showCancel: true, confirmText: "授权", confirmColor: "#52a2d8", ...

    #微信小程序录音权限设置

    拿过去直接用

     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("未设置录音授权");
                        self.setData({
                          show: 0
                        })
                        wx.showModal({
                          title: '提示',
                          content: '您未授权录音,功能将无法使用',
                          showCancel: false,
                          success: function (res) {
    
                          },
                        })
                      } else {
                        //第二次才成功授权
                        console.log("设置录音授权成功");
                        // 配置一些东西打开,关闭
                        self.setData({
                          status: 2,
                          show: true,
                          hideText: false
                        })
                        // recorderManager.start(options);
                      }
                    },
                    fail: function () {
                      console.log("授权设置录音失败");
                      self.setData({
                        show: false
                      })
                    }
                  })
                } else if (res.cancel) {
                  console.log("cancel");
                }
              },
              fail: function () {
                console.log("openfail");
                self.setData({
                  show: 0
                })
              }
            })
    
    展开全文
  • 微信小程序录音功能(简易教学)

    千次阅读 2020-05-09 13:37:33
    按住录音</button> <button catchtap="play">播放录音</button> .js Page({ data: { frequency:'', }, //手指按下 touchdown: function (e) { console.log("手指按下了...") v.

    .wxml

    <button bindtouchstart="touchdown" bindtouchend="touchup">按住录音</button>
    <button catchtap="play">播放录音</button>
    

    .js

    Page({
      data: {
        frequency:'',
      },
      //手指按下
      touchdown: function (e) {
        console.log("手指按下了...")
        var that = this;
        //开始录音
        wx.startRecord({
          success: function (res) {
            that.setData({
              frequency: res.tempFilePath
            })
          }
        })
      },
      //手指抬起
      touchup: function (e) {
        console.log("手指抬起了...")
        wx.stopRecord()
      },
      play:function(e){
        wx.playVoice({
          filePath: this.data.frequency,
          success: function () {
            wx.showToast({
              title: '播放结束',
              icon: 'none',
              duration: 1000
            })
          }
        })
      },
    })
    

    对你有帮助的话记得收藏点赞,有什么问题欢迎评论留言。
    展开全文
  • 微信小程序 录音

    千次阅读 2019-02-18 14:53:45
    录音 录音中   wxml: &lt;!-- 开始录音 --&gt; &lt;image src="/img/add_voice.png" class="add-voice" wx:if="{{record == 0 }}" bindtap="...

    为录音

    录音中

     

    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
    }
    

    播放音频:https://blog.csdn.net/onion_line/article/details/86529049

    展开全文
  • 微信小程序录音机.rar

    2021-03-06 15:08:10
    本微信小程序实现了音频录制功能,仿微信录音按钮,动态显示。
  • uniapp小程序录音功能权限问题

    千次阅读 2021-09-30 17:54:24
    微信小程序录音权限设置 methods: { recordShow(e) { var that = this; uni.getSetting({ success(res) { // console.log(res.authSetting['scope.record']); //判断是否第一次获取...
  • 录音之前有wx.startRecord来调用录音,不过目前微信小程序已经停止对该接口的维护,目前可采用wx.getRecorderManager创建录音管理来进行录音 录音转文字调用后端写的接口,我这里是PCM录音格式,具体要求可根据后端...
  • 微信小程序录音功能实现

    千次阅读 2019-10-21 10:33:57
    首先我们要做的就是长按录音功能,顺带做了个播放录音带进度条功能,效果图及代码如下: 首先我们要做的效果图就是上图这样,下面就贴代码吧。 wxml: <view catch:longpress="handleRecordStart" catch:...
  • wxml文件: <view class="container"> <view class="audio_ctl"> <button bindtouchstart="handleRecordStart" bindtouchend="handleRecordEnd"&...长按录音</button> <button bindtap...
  • appletRecordDemo 微信小程序录音播放录音demo

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,264
精华内容 10,905
关键字:

小程序录音