前端页面布局代码

描述：@longpress是uniapp的事件，长按时触发的事件，@touchend事件可以监听松开按钮时触发的。

 <!-- 上传语音 --><view class="Voice_input audiodiv" ><text class="Voice_title">语音输入:</text><view class="Voice_Btn"><!-- <view class="speak_btn" > --><button v-if="ifshowrecordbtn" @longpress="touchdown" @touchend="touchup"  style="width:500rpx;height:66rpx"   class="talkbtn">{{speak}}</button><!-- </view> --><button v-else class="talkbtn talkbtn2"  style="width:500rpx;height:66rpx"  @tap="recordagain">{{recordtimeshow}} S</button><audio class="showaudio" :src="audioSrc" id="myAudio"  controls :poster="poster"></audio></view></view>

css样式

/* 语音输入 */.Voice_input{border-bottom: 1px solid rgba(215,215,215,0.50);}.audiodiv{padding-bottom: 50px;}.Voice_title{height: 41px;line-height: 41px;font-family: PingFangSC-Regular;font-size: 16px;color: #1F1F26;}.speak_btn{width: 178px;height: 30px;background-image: linear-gradient(180deg, #FFFFFF 0%, #F1F1F1 100%);border: 1px solid #E8E8E8;border-radius: 15.5px;margin: 0 auto;text-align: center;line-height: 30px;font-family: PingFangSC-Regular;font-size: 14px;color: #AAAAAA;text-align: center;margin-bottom: 15px;}.talkbtn{color: #cccccc;font-size: 11px;border: 1rpx solid #cccccc;border-radius: 40rpx;margin-top: 5px;position: absolute;left: 50%;transform:translate(-50%,0);background: #f2f6fa;}.showaudio{position: fixed;left: 800rpx;top: 0;width: 213px;height: 28px;}

js部分

methods:{// 按住说话starttouchdown:function(){this.speak='正在录音'recorderManager.start({duration: 60000,//录音的时长，单位 mssampleRate: 16000, //采样率，有效值 8000/16000/44100numberOfChannels: 1, //录音通道数，有效值 1/2encodeBitRate: 96000, //编码码率format: 'mp3', //音频格式，有效值 aac/mp3frameSize: 50, //指定帧大小audioSource: 'auto' //指定录音的音频输入源，可通过 wx.getAvailableAudioSources() 获取})console.log('录音开始')},//停止录音touchup: function (e) {this.speak='按住说话',this.ifshowrecordbtn=falserecorderManager.stop()console.log('录音结束')},recordagain:function(){let that = this;uni.showModal({title: '提示',content: '试听或者删除录音',confirmText: "试听",//这块是确定按钮的文字cancelText:"删除",//这块是取消的文字success (res) {if (res.confirm) {that.recordplay();} else if (res.cancel) {that.recordtimeshow=0,that.ifshowrecordbtn=true}}})},ss_to_s:function(ss){return (ss/1000).toFixed(0);},//点击播放录音recordplay: function () {var that = thisthat.audioCtx.play()},//按住说话end
}
声明关于录音的apionReady() {var that = thisthat.audioCtx = uni.createAudioContext('myAudio')
},
录音授权等相关操作
onLoad() {this.ctx = uni.createCameraContext()uni.authorize({scope: "scope.record",success: function() {console.log("录音授权成功");},fail: function() {console.log("录音授权失败");}})var that = this;//获取全局唯一的录音管理器 RecorderManager实例that.recorderManager = uni.getRecorderManager()that.recorderManager.onStop((res) => {console.log('res' + res);console.log('获取到文件路径：' + res.tempFilePath)console.log('duration' + res.duration)console.log('fileSize' + res.fileSize)that.audioSrc=res.tempFilePath,that.recordtimeshow=that.ss_to_s(res.duration)})that.recorderManager.onError((res) => {console.log('录音失败了！')})}

df

uniapp微信小程序实现按住说话功能相关推荐

uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码（适用于 uniapp 微信小程序项目，源代码直接开箱即用）超级详细的代码及注释
效果图 uniapp 项目编译微信小程序,一些常见的登录方式及源代码,示例代码干净整洁无BUG拿来即用. 本文示例实现了 uniapp 微信小程序项目的登录功能,包含微信授权登录.获取微信手机号登录. ...
uni-app 微信小程序分享功能传参接收与调试
uni-app 微信小程序功能传参接收与调试当使用微信小程序进行分享好友功能时,怎样能够联调,查看是否接收到参数,并在被分享人点进来的时候逻辑处理是否正确. 1.分享功能实现分享给朋友 ...
【多人会议功能】uniapp - 微信小程序 - 腾讯云
目的:uniapp微信小程序通过腾讯云实现多人会议功能. 效果展示: 功能实现: 前提条件: 注册腾讯云账号,并完成实名认证. 推拉流标签不支持个人小程序,要求申请的企业类微信小程序. 步骤一:开 ...
uniapp微信小程序拨打电话功能
uniapp微信小程序拨打电话功能先上代码,可以直接拿过去用. <button @click="playphone()">< ...
uniapp - [微信小程序] 超详细实时录音功能，录制外部声音及播放上传到服务器（支持录音完毕生成 mp3、试听音频(带进度条)、暂停录音、重新录音、限制录音最大时长、自定义音频名称等功能）
前言网上的教程都太乱了,功能不好用且一堆 BUG,没有注释很难改造示例为自己用. 本文实现了 uniapp 微信小程序平台,授权麦克风进行录音并保存为音频的功能,内置播放器可播放录音文件, 您直接复 ...
uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
uniapp - 微信小程序接入腾讯视频播放器功能插件，uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程（详细示例源码，一键复制开箱即用）
效果图在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能! ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(七）---登陆注销功能与微信小程序测试号的申请
到此为止,我们只差一个退出登陆功能了. 回到index.vue页面,之前我们已经预留了退出按钮,现在给它加上功能 <button class="mybutton" type= ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...

uniapp微信小程序实现按住说话功能

前端页面布局代码

css样式

js部分

df

uniapp微信小程序实现按住说话功能相关推荐

最新文章

热门文章