uni-app 介绍

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。
开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。

html部分

我是写了个录音的图片
点击之后弹出一个弹出层(仿了下qq的样式)

在这里插入图片描述

样式怎么写我就不赘述了大家都会

在这里插入图片描述

js部分

这是重点敲黑板!!!

在这里插入图片描述

创建实例

为了全局都好获取到,可以随时开始录音,随时停止录音,我把他扔进全局了

const recorderManager = uni.getRecorderManager();//创建一个录音实例
	const innerAudioContext = uni.createInnerAudioContext();//用来播放的实例
	// 为了防止苹果手机静音无法播放
	uni.setInnerAudioOption({
		obeyMuteSwitch: false
	})
	innerAudioContext.autoplay = true;
	export default {

开始录音

this.timecount = '00:00:00';//初始化录音时间
this.hour = 0;
this.minute = 0;
this.second = 0;
this.getTimeIntervalplus();//封装的一个计时器,调用开始计时
const options = {//参数
	duration: 600000,
	sampleRate: 44100,
	numberOfChannels: 1,
	encodeBitRate: 192000,
	format: 'mp3',
	frameSize: 50
}
recorderManager.start(options);

在这里插入图片描述

结束录音

需要限制最短时长的可以做下判断,我这边没写

recorderManager.stop();//结束录音
clearInterval(this.timer);//结束计时

播放录音

innerAudioContext.src = this.voicePath;//播放的地址(上面录的本地地址)
innerAudioContext.play();//播放

暂停播放

innerAudioContext.pause();//暂停播放
clearInterval(this.timer);//清除定时器

提交录音到后端

//结束录音提交录音
submitrecord: function() {
	this.count  = 1;//这是定义了一个全局的变量来防止多次提交
	if (this.count == 1){
		console.log(this.count);
		var https = getApp().globalData.https;
		if (this.recordednum == 2) {
		this.recordednum = 3;
		recorderManager.stop();
		clearInterval(this.timer);
	}
	if (this.voicePath != '') {
		console.log(this.voicePath);
		uni.uploadFile({
			url: https   'Uploads/uploadVoiceVideo',
			filePath: this.voicePath,
			name: 'file',
			success: (res) => {
			this.count = 0;
			//初始化
			this.initialize()//我封装了一个初始化定时器的函数
			this.timer = this.timecount;
			this.show_recording = false;
			var data = JSON.parse(res.data);
			if (this.current == 0) {//判断是哪个列里面录的音插回去
				this.firsvideo.push(data.address);
				} else if (this.current == 1) {
					this.secovideo.push(data.address);
					console.log(this.secovideo);
				} else if (this.current == 2) {
					this.thrivideo.push(data.address);
				}
				uni.showToast({
						title: '提交成功!',
						icon: 'none',
						duration: 1200
				})
			},
			fail: (err) => {
				uni.hideLoading();
				uni.showToast({
					tilte: '上传失败~',
					icon: 'none',
					duration: 1200
				})
					return
				}
			});
		} else {
			console.log("录音失败")
			uni.showToast({
				tilte: '录音失败',
				icon: 'none',
				duration: 1200
			})
			uni.hideLoading();
			this.show_recording = false;
			this.checkPermission()
			this.rerecord()
		}
	} else {
		uni.showToast({
			title: '请勿重复提交',
			icon: 'none',
			duration: 2000
		})
	this.count=0;
	}
},

重新录制

//重新录制
			rerecord: function() {
				//初始化定时器
				this.initialize()
				this.getTimeIntervalplus();//开始计时
				const options = {
					duration: 600000,
					sampleRate: 44100,
					numberOfChannels: 1,
					encodeBitRate: 192000,
					format: 'mp3',
					frameSize: 50
				}
				recorderManager.start(options);//开始录音
			},

onLoad部分

onLoad(option) {
			var appointment_message = option.appointment_message;
			appointment_message = JSON.parse(appointment_message);
			this.appointment_message = appointment_message;
			let that = this;
			recorderManager.onStop(function(res) {
				console.log('recorder stop'   JSON.stringify(res));
				that.voiceDuration = res.duration;
				that.voicePath = res.tempFilePath;
				console.log(res);
			});
		},

计时器

// 计时器增
			getTimeIntervalplus() {
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					this.second  = 1;
					if (this.second >= 60) {
						this.minute  = 1;
						this.second = 0;
					}
					if (this.minute >= 10) {
						this.recordednum = 3;
						recorderManager.stop();
						clearInterval(this.timer);
					}
					this.second2 = this.second;
					this.minute2 = this.minute;
					this.timecount = this.showNum(this.hour)   ":"   this.showNum(this.minute)   ":"   this
						.showNum(this.second);

 - console.log("this.timecount", this.timecount)

				}, 1000);
			},

数据部分

data() {
			return {
				action: 'https://yl.letter-song.top/api/Uploads/uploadPicture', //上传图片地址
				textareavalue: '', //文字描述值
				fileList2: [], //返回图片路径2
				fileList3: [], //返回图片路径3
				fileList: [], //返回图片路径1
				firsvideo: [], //录音路径1
				secovideo: [], //录音路径2
				thrivideo: [], //录音路径3
				appointment_message: '', //预约信息上个页面传参过来的
				list: [{ //标签表
					name: '过往症状'
				}, {
					name: '近期症状'
				}, {
					name: '本次症状',
				}],
				current: 0, //选中项
				sty: { //滑块样式
					height: '4px',
					borderRadius: '2rpx',
					borderTopLeftRadius: '10px',
					backgroundColor: '#3ECEB5'
				},
				activeItem: { //选中项样式
					color: '#333333',
					fontWeight: '600',
					fontSize: '36rpx',
				},
				show_recording: false, //调起录音弹窗
				recordednum: 1, //1:初始状态2.录音状态3结束
				voicePath: '', //本次音频录音路径
				voiceDuration: '',
				timecount: '00:00:00',
				timecount2: "",
				hour: 0,
				minute: 0,
				second: 0,
				hour2: 0,
				minute2: 0,
				second2: 0,
				isZant: false,
				timer: '',
				yuming: '这是域名',
				permiss: 0, //0为开启录音权限1已开启录音权限,
				count: 0
			}
		},

到此这篇关于uniapp 实现录音上传功能的文章就介绍到这了,更多相关uniapp 录音上传内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

uniapp实现录音上传功能的更多相关文章

  1. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  2. 利用Python上传日志并监控告警的方法详解

    这篇文章将详细为大家介绍如何通过阿里云日志服务搭建一套通过Python上传日志、配置日志告警的监控服务,感兴趣的小伙伴可以了解一下

  3. PHP实现文件上传与下载实例与总结

    这篇文章主要介绍了PHP实现文件上传与下载实例与总结的相关资料,需要的朋友可以参考下

  4. 小程序实现图片裁剪上传

    这篇文章主要为大家详细介绍了小程序实现图片裁剪上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. js实现头像上传并且可预览提交

    这篇文章主要介绍了js如何实现头像上传并且可预览提交,帮助大家更好的理解和使用js,感兴趣的朋友可以了解下

  6. PHP如何将图片文件上传到另外一台服务器上

    这篇文章主要介绍了PHP如何将图片文件上传到另外一台服务器上,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  7. nodejs 图片预览和上传的示例代码

    本篇文章主要介绍了nodejs 图片预览和上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. iOS视频录制(或选择)压缩及上传功能(整理)

    最新做的一个功能涉及到了视频的录制、压缩及上传功能,经过大神的一番教导,终于倒腾清楚了,今天小编把问题经过记录一下分享到脚本之家平台,供大家参考

  9. 详解ionic本地相册、拍照、裁剪、上传(单图完全版)

    本篇文章主要介绍了ionic本地相册、拍照、裁剪、上传(单图完全版),非常具有实用价值,需要的朋友可以参考下

  10. uniapp中vuex的应用使用步骤

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于uniapp中vuex的应用使用,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部