微信小程序录音实现上传和播放录音

// pages/recorderManager/recorderManager.js
const recorderManager = wx.getRecorderManager();
const innerAudioContext = wx.createInnerAudioContext();
Page({data: {openRecordingdis: "block",//录音图片的不同shutRecordingdis: "none",//录音图片的不同recordingTimeqwe:0,//录音计时setInter:"",//录音名称isplay:true //播放状态  true--播放中  false--暂停播放},//录音计时器recordingTimer:function(){var that = this;//将计时器赋值给setInterthat.data.setInter = setInterval(function () {var time = that.data.recordingTimeqwe + 1;if(time>60){wx.showToast({title: '录音时长到一分钟啦',duration:1500,mask:true})clearInterval(that.data.setInter);that.shutRecording();return;}that.setData({recordingTimeqwe: time})}, 1000); },//开始录音openRecording: function() {var that = this;wx.getSystemInfo({success: function(res) {that.setData({shutRecordingdis: "block",openRecordingdis: "none"})}})const options = {duration: 60000, //指定录音的时长，单位 ms，最大为10分钟（600000），默认为1分钟（60000）sampleRate: 16000, //采样率numberOfChannels: 1, //录音通道数encodeBitRate: 96000, //编码码率format: 'mp3', //音频格式，有效值 aac/mp3frameSize: 50, //指定帧大小，单位 KB}//开始录音计时   that.recordingTimer();//开始录音recorderManager.start(options);recorderManager.onStart(() => {console.log('。。。开始录音。。。')});//错误回调recorderManager.onError((res) => {console.log(res);})},//结束录音shutRecording: function() {var that = this;wx.getSystemInfo({success: function(res) {that.setData({shutRecordingdis: "none",openRecordingdis: "block"})}})recorderManager.stop();recorderManager.onStop((res) => {console.log('。。停止录音。。', res.tempFilePath)const {tempFilePath} = res;//结束录音计时  clearInterval(that.data.setInter);//上传录音wx.uploadFile({url: "http://www.xinjue.com:8080/imageUpload?fileType=mp3",//这是你自己后台的连接filePath: tempFilePath,name:"file",//后台要绑定的名称header: {"Content-Type": "multipart/form-data"},//参数绑定formData:{recordingtime: that.data.recordingTimeqwe,topicid: that.data.topicid,userid:1,praisepoints:0},success:function(ress){console.log(res);wx.showToast({title: '保存完成',icon:'success',duration:2000})that.setData({recordingTimeqwe:0})},fail: function(ress){console.log("。。录音保存失败。。");}})})},//录音播放recordingAndPlaying: function(e) {var isplay = e.currentTarget.dataset.isplay; //暂停还是播放innerAudioContext.src ="http://soundpreview.ohipic.com/preview/sound/00/29/33/515ppt-S293364-183B1F2B.mp3";innerAudioContext.startTime=0; //播放起始位置innerAudioContext.autoplay = true;//是否自动播放if (isplay == true){isplay = false;//播放事件innerAudioContext.onPlay(() => {console.log('开始播放');})}else{isplay = true;//监听暂停innerAudioContext.onPause(() => {console.log('暂停播放');})}this.setData({isplay:isplay})},})

<!--pages/recorderManager/recorderManager.wxml-->
<text>录音页面编写</text>
<button bindtap="openRecording" size="50rpx">开始录音</button>
<button bindtap="stop">暂停录音</button>
<button bindtap="shutRecording">结束录音</button>
<button bindtap="recordingAndPlaying" data-isplay="{{isplay}}">播放录音</button>
<form bindsubmit="submit" report-submit='true' class='formid'><button form-type="submit" >发送推送消息</button></form><!-- <view class="img-box"><canvas bindtap="previewImg" hidden="{{canvasHidden}}" style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas"/><!--<image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image></view> -->

使用最新的API

InnerAudioContext 实例，可通过 wx.createInnerAudioContext 接口获取实例。

微信小程序录音实现上传和播放录音相关推荐

php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html  <view class="cont ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
微信小程序媒体文件上传到微信服务器
微信小程序媒体文件上传到微信服务器官方给出的事例如下: curl -F media=@test.jpg "https://api.weixin.qq.com/cgi-bin/media/up ...
微信小程序上传多张图片到服务器,怎么在微信小程序中同时上传多张图片
怎么在微信小程序中同时上传多张图片发布时间:2021-04-16 18:05:52 来源:亿速云阅读:99 作者:Leah 今天就跟大家聊聊有关怎么在微信小程序中同时上传多张图片,可能很多人都不太 ...
微信小程序多文件上传之wx-multipart
微信小程序多文件上传之wx-multipart 前言:我后端写了个多文件上传接口,奈何前端同事说微信小程序只能单文件上传,要支持多文件上传还要我单独再写一个单文件上传的接口,我他喵- 我看了下微信小程 ...
php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...

微信小程序录音实现上传和播放录音

微信小程序录音实现上传和播放录音相关推荐

最新文章

热门文章

微信小程序 录音实现上传 和播放录音

微信小程序 录音实现上传 和播放录音相关推荐

最新文章

热门文章

微信小程序录音实现上传和播放录音

微信小程序录音实现上传和播放录音相关推荐