您所在的位置:首页 / 知识分享

wx小程序录音并上传到后端保存[后端PHP]

2020.07.30

52

wngpng

wxml文件:

<view class="container">
  <view class="audio_ctl">
    <button bindtouchstart="handleRecordStart" bindtouchend="handleRecordEnd">长按录音</button>
    <button bindtap="handlePlayVoice">播放</button>
    <button bindtap="handleUploadVoice">上传</button>
    <view class="uploaded">
      <view>已上传文件url: </view>
      <text>{{uploaded_url}}</text>
    </view>
    <audio controls src="https://fanyi.baidu.com/gettts?lan=cte&text=%e4%bd%a0%e5%a5%bd%ef%bc%8c%e7%82%b9%e5%8e%bb%e4%bd%93%e8%82%b2%e9%a6%86&spd=5&source=web" />
  </view>
</view>

js文件:

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    record_tmpfile: '',     // 最近一次录音的临时文件路径;
    record_ms: '',          // 录音的毫秒数
    uploaded_url: '',       // 已上传文件的路径;
    userInfo: {}
  },

  // 录音功能: 
  handleRecordStart: function(e) {
    const that = this;
    const timeStart = Date.now();
    wx.startRecord({
      success: function (res) {
        console.log('record success res: ', res);
        var tempFilePath = res.tempFilePath
        that.setData({
          record_tmpfile: tempFilePath,
          record_ms: Date.now() - timeStart,
        });
      },
      fail: function (res) {
        //录音失败
        console.log('record fail res: ', res);
        wx.stopRecord();
        if(res.errMsg.indexOf('auth') >= 0) {
          wx.showModal({
            title: '无法录音',
            content: '您已经拒绝访问麦克风,无法使用录音功能,如需使用,请删除此小程序,并重新搜索打开',
            showCancel: false,
          });
        } else {
          wx.showToast({
            title: '未知错误',
          })
        }
      }
    })
    setTimeout(function () {
      //结束录音  
      wx.stopRecord()
    }, 60000);
  },

  // 停止录音: 
  handleRecordEnd: function(e) {
    wx.stopRecord()
  },
  
  // 播放录音: 
  handlePlayVoice: function() {
    console.log('start play voice');
    wx.playVoice({
      filePath: this.data.record_tmpfile,
    })
  },
  // 上传录音
  handleUploadVoice: function() {
    const { record_tmpfile, record_ms } = this.data;
    wx.showLoading({ title: '上传中' });
    const that = this;
    wx.uploadFile({
      url: app.api_url + '/upload/uploadfile.php', 
      filePath: record_tmpfile,
      name: 'file',
      formData: {
        audio_ms: record_ms,
      },
      success: function (res) {
        wx.hideLoading();
        var data = res.data
        console.log('upload_res: ', res);
        const data2 = JSON.parse(res.data);
        console.log('upload res data2: ', data2);
        //do something
        let toastTitle = '上传成功';
        if (data2.c != 0) {
          toastTitle = data2.m;
        } else {
          that.setData({ uploaded_url: data2.d});
        }
        setTimeout(function() {
          wx.showToast({ title: toastTitle });
        }, 500);
      },
      fail: function(res) {
        wx.hideLoading();
      }
    })
  }
})

PHP后端接收保存:

// 封装返回json数据格式方法
function json_response($c=0, $m='', $d='') {
    $data = array(
        'code'     =>  $c,
        'msg'     =>  $m,
        'data'     =>  $d
    );
    return json_encode($data);
}

// 接收小程序传递参数(即:小程序录音市场参数等)
$params = json_decode(file_get_contents("php://input"), true);
$audio_ms = $params['audio_ms'];

// 接收小程序上传录音文件
if(!array_key_exists('file', $_FILES)) {
    return json_response(-1,'未传入文件',$readPath);
}

// 获取临时文件路径并构造新文件名称
$file = $_FILES['file']['tmp_name'];
$randFileName = 'weapp_audio_' . md5(uniqid("", true));

// 将临时文件保存到服务器中
$savePath = '/data/wwwroot/www.h5tpl.com/web/uploads/xcxvoice/' . $randFileName . '.silk';
file_put_contents($savePath, file_get_contents($file));

//获取服务器中保存的录音文件路径并返回到小程序客户端中
$readPath = 'https://www.h5tpl.com/uploads/xcxvoice/' . $randFileName . '.silk';
return json_response(200,'上传成功',$readPath);

相关新闻

权限系统设计方案

2020.02.25

376

权限管理是所有后台系统的都会涉及的一个重要组成部分,主要目的是对不同的人访问资源进行权限的控制,避免因权限控制缺失或操作不当引发的风险问题,如操作错误,隐私数据泄露等问题。

SEO & SEM

2015.11.03

1424

小程序 - 验证码倒计时组件

2018.12.26

1064

发送验证码倒计时的方法很常见,在项目里面也经常会多次用到,这时就要把倒计时封装为组件,需要用到的时候方便使用。