精华内容
下载资源
问答
  • 微信小程序录音

    2018-10-31 15:19:11
    微信小程序录音demo,从录音到播放,带动画。可以作为参考或整体使用。
  • appletRecordDemo 微信小程序录音播放录音demo
  • 本文实例为大家分享了微信小程序录音功能的具体代码,供大家参考,具体内容如下release.wxml存储路径:{{item.filePath}}存储时间:{{item.createTime}}音频大小:{{item.size}}KB按住 录音release.wxss/* pages/index/...

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

    release.wxml

    存储路径:{{item.filePath}}

    存储时间:{{item.createTime}}

    音频大小:{{item.size}}KB

    按住 录音

    release.wxss

    /* pages/index/release/release.wxss */

    .microphone{

    position:fixed;

    left: 250rpx;

    bottom: 0;

    height: 240rpx;

    width: 240rpx;

    border-radius: 20rpx;

    margin: 50% auto;

    background: #26A5FF;

    }

    .item-style{

    margin-top: 30rpx;

    margin-bottom: 30rpx;

    }

    .text-style{

    text-align: center;

    }

    .record-style{

    position: fixed;

    bottom: 0;

    left: 0;

    height: 120rpx;

    width: 100%;

    }

    .btn-style{

    margin-left: 30rpx;

    margin-right: 30rpx;

    }

    .sound-style{

    position: absolute;

    width: 74rpx;

    height:150rpx;

    margin-top: 45rpx;

    margin-left: 83rpx;

    }

    .board {

    overflow: hidden;

    border-bottom: 2rpx solid #26A5FF;

    }

    /*列布局*/

    .cell{

    display: flex;

    margin: 20rpx;

    }

    .cell-hd{

    margin-left: 10rpx;

    color: #885A38;

    }

    .cell .cell-bd{

    flex:1;

    position: relative;

    }

    /**只显示一行*/

    .date{

    font-size: 30rpx;

    text-overflow: ellipsis;

    white-space:nowrap;

    overflow:hidden;

    }

    release.js

    // pages/index/release/release.js

    var app = getApp()

    Page({

    data: {

    j: 1,//帧动画初始图片

    isSpeaking: false,//是否正在说话

    voices: [],//音频数组

    },

    onLoad: function () {

    },

    //手指按下

    touchdown: function () {

    console.log("手指按下了...")

    console.log("new date : " + new Date)

    var _this = this;

    speaking.call(this);

    this.setData({

    isSpeaking: true

    })

    //开始录音

    wx.startRecord({

    success: function (res) {

    //临时路径,下次进入小程序时无法正常使用

    var tempFilePath = res.tempFilePath

    console.log("tempFilePath: " + tempFilePath)

    //持久保存

    wx.saveFile({

    tempFilePath: tempFilePath,

    success: function (res) {

    //持久路径

    //本地文件存储的大小限制为 100M

    var savedFilePath = res.savedFilePath

    console.log("savedFilePath: " + savedFilePath)

    }

    })

    wx.showToast({

    title: '恭喜!录音成功',

    icon: 'success',

    duration: 1000

    })

    //获取录音音频列表

    wx.getSavedFileList({

    success: function (res) {

    var voices = [];

    for (var i = 0; i < res.fileList.length; i++) {

    //格式化时间

    var createTime = new Date(res.fileList[i].createTime)

    //将音频大小B转为KB

    var size = (res.fileList[i].size / 1024).toFixed(2);

    var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size };

    console.log("文件路径: " + res.fileList[i].filePath)

    console.log("文件时间: " + createTime)

    console.log("文件大小: " + size)

    voices = voices.concat(voice);

    }

    _this.setData({

    voices: voices

    })

    }

    })

    },

    fail: function (res) {

    //录音失败

    wx.showModal({

    title: '提示',

    content: '录音的姿势不对!',

    showCancel: false,

    success: function (res) {

    if (res.confirm) {

    console.log('用户点击确定')

    return

    }

    }

    })

    }

    })

    },

    //手指抬起

    touchup: function () {

    console.log("手指抬起了...")

    this.setData({

    isSpeaking: false,

    })

    clearInterval(this.timer)

    wx.stopRecord()

    },

    //点击播放录音

    gotoPlay: function (e) {

    var filePath = e.currentTarget.dataset.key;

    //点击开始播放

    wx.showToast({

    title: '开始播放',

    icon: 'success',

    duration: 1000

    })

    wx.playVoice({

    filePath: filePath,

    success: function () {

    wx.showToast({

    title: '播放结束',

    icon: 'success',

    duration: 1000

    })

    }

    })

    }

    })

    //麦克风帧动画

    function speaking() {

    var _this = this;

    //话筒帧动画

    var i = 1;

    this.timer = setInterval(function () {

    i++;

    i = i % 5;

    _this.setData({

    j: i

    })

    }, 200);

    }

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

    展开全文
  • 主要介绍了微信小程序录音与播放录音功能,小程序中提供了两种录音的API,旧版本录音功能和新版录音功能,需要的朋友可以参考下
  • 微信小程序 录音

    千次阅读 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

    展开全文
  • 微信小程序 录音机 播放器 动画

    热门讨论 2016-11-27 00:22:10
    微信小程序 录音机 播放器 动画
  • 这篇文章主要介绍了微信小程序录音与播放录音功能,小程序中提供了两种录音的API,旧版本录音功能和新版录音功能,需要的朋友可以参考下小程序中提供了两种录音的API旧版录音功能首先启动录音,然后停止录音即可拉到...

    这篇文章主要介绍了微信小程序录音与播放录音功能,小程序中提供了两种录音的API,旧版本录音功能和新版录音功能,需要的朋友可以参考下

    小程序中提供了两种录音的API

    旧版录音功能

    首先启动录音,然后停止录音即可拉到音频的临时地址

    启动录音:var that = this;

    wx.startRecord({

    success: function (res) {

    // 调用了停止录音接口就会触发这个函数,res.tempFilePath为录音文件临时路径

    var tempFilePath = res.tempFilePath

    that.setData({

    src: tempFilePath

    })

    },

    fail: function (res) {

    //录音失败的处理函数

    }

    })

    停止录音:wx.stopRecord()

    播放录音:wx.playVoice({

    filePath: src // src可以是录音文件临时路径

    })

    新版录音

    获取全局唯一的录音管理器,然后录音都依赖他,而播放录音则需要内部 audio 上下文 innerAudioContext 对象。

    获取全局唯一的录音管理器:var that = this;

    this.recorderManager = wx.getRecorderManager();

    this.recorderManager.onError(function(){

    // 录音失败的回调处理

    });

    this.recorderManager.onStop(function(res){

    // 停止录音之后,把录取到的音频放在res.tempFilePath

    that.setData({

    src: res.tempFilePath

    })

    console.log(res.tempFilePath )

    });

    开始录音:this.recorderManager.start({

    format: 'mp3' // 如果录制acc类型音频则改成aac

    });

    结束录音:this.recorderManager.stop()

    播放音频:this.innerAudioContext = wx.createInnerAudioContext();

    this.innerAudioContext.onError((res) => {

    // 播放音频失败的回调

    })

    this.innerAudioContext.src = this.data.src; // 这里可以是录音的临时路径

    this.innerAudioContext.play()

    上面是我整理给大家的,希望今后会对大家有帮助。

    相关文章:

    展开全文
  • 微信小程序 录音机源码 录音的音频默认是存在本地的临时路径下.第二次进入小程序无法正常使用,可以存持久,但是本地文件大小的限制是100M,最好还是上传后台. 2.录音的时间不能太短.否则会失败;也不能超过60秒.到了60...
  • 微信小程序录音机.rar

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

    千次阅读 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
                })
              }
            })
    
    展开全文
  • 在我们的日常开发中经常会遇到录音功能,并上传到服务器,今天小编给大家分享微信小程序录音功能实现并上传录音文件,使用node解析接收,需要的朋友可以参考下
  • 录音文件为silk格式,说是silk其实是base64加密后的webm格式,只需将其转为webm格式即可...但是在处理过程中遇到各种坑,下面小编给大家带来了微信小程序录音文件格式silk遇到的问题及解决方法,感兴趣的朋友一起看看吧
  • 小程序中提供了两种录音的API 旧版录音功能 首先启动录音,然后停止录音即可拉到音频的临时地址 启动录音: var that = this; wx.startRecord({ success: function (res) { // 调用了停止录音接口就会触发这个...
  • 微信小程序录音文件.silk上传服务器并且转换mp3格式。本教程将采用nodejs/silk_v3_decoder.exe/ffmpeg三个东西配合使用。本教程是在windows下通过。 本教程包括下面几个步骤: 1、nodejs安装等一些基本使用就不说了...
  • 微信小程序录音与播放录音功能实现,话不多说直接上代码实例: test.wxml <button bindtap='start'>开始录音</button> <button bindtap='play'>播放录音</button> <button bindtap=...
  • 微信小程序录音并将录音文件上传到服务器源码,包含小程序端录音及播放功能,以及服务器端php上传处理代码。
  • 微信小程序录音文件.silk上传服务器并且转换mp3格式。本教程将采用nodejs/silk_v3_decoder.exe/ffmpeg三个东西配合使用。本教程是在windows下通过。本教程包括下面几个步骤:1、nodejs安装等一些基本使用就不说了,...
  • 微信小程序录音上传 录音弹窗wxml代码: <!-- 录音弹窗 --> <view class="cui-record" hidden="{{isHideRecordModal}}"> <view class="cui-mask" catchtap="cancelRecord" bindtouchmove=...
  • 微信小程序录音silk文件格式转换为MP3及PCM格式的方法-附件资源
  • 微信小程序无法播放本地音频在微信小程序中,可以通过 audio 组件播放网络音频资源。现在想将音频先下载到本地,之后不用每次都下载,提高用户体验。使用 wx.downloadFile 接口将音频文件下载后,无法通过 audio ...
  • 微信小程序录音解码silk v3音频文件 类似微信的amr和aud文件silk-v3-decoder.zip,[Skype Silk codec sdk]解码Silk v3音频文件(如微信AMR、AUD文件、QQ SLK文件)并转换为其他格式(如MP3)。批量转换支持。
  • 本文实例为大家分享了小程序录音上传的具体代码,供大家参考,具体内容如下首先我们可以先看一下微信小程序的API这里有关于小程序录音的一些基本配置index.wxml:index.wxss:.topicRecording {float: left;...
  • 微信小程序录音开发

    千次阅读 2019-01-23 10:51:08
    第一步, <view class='container'> <button bindtap='start...开始录音</button> <button bindtap='pauseRecording'>暂停录音</button> <button bindtap='resumeRecording'&g...
  • 微信小程序 录音功能

    千次阅读 2018-07-05 10:02:09
    微信小程序里面里面使用录音的功能,首先判读设备是否有录音的权限。 wx.getSetting({ success(res) { if (res.authSetting['scope.record']) { _this.setData({ mkf: '麦克风权限已启用' }) } else { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,381
精华内容 1,752
关键字:

微信小程序录音

微信小程序 订阅