uniapp录音功能

这篇具有很好参考价值的文章主要介绍了uniapp录音功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

录音功能需要使用到uniapp官方文档里面的API

模版区

<template>
	<view>
		<button @tap="startRecord">开始录音</button>
		<button @tap="endRecord">停止录音</button>
		<button @tap="playVoice">播放录音</button>
	</view>
</template>

js

const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
 
innerAudioContext.autoplay = true;
 
export default {
	data() {
		return {
			text: 'uni-app',
			voicePath: ''
		}
	},
	onLoad() {
		let self = this;
		recorderManager.onStop(function (res) {
			console.log('recorder stop' + JSON.stringify(res));
			self.voicePath = res.tempFilePath;
		});
	},
	methods: {
		startRecord() {
			console.log('开始录音');
 
			recorderManager.start();
		},
		endRecord() {
			console.log('录音结束');
			recorderManager.stop();
		},
		playVoice() {
			console.log('播放录音');
 
			if (this.voicePath) {
				innerAudioContext.src = this.voicePath;
				innerAudioContext.play();
			}
		}
	}
}

现在就是可以进行一个简单的录音,暂停以及播放,再根据需求进行更改即可

还有需要注意的就是在进行真机调试的时候需要判断用户是否打开了录音权限文章来源地址https://www.toymoban.com/news/detail-730815.html

uni.authorize({
					scope: 'scope.record',
					success() {
						recorderManager.start({
							format: 'mp3'
						});
						t.getTimeInterval();
						uni.setInnerAudioOption({
							obeyMuteSwitch: false
						})
					},
					fail() {
						uni.showModal({
							content: '检测到您没打开录音功能权限,是否去设置打开?',
							confirmText: "确认",
							cancelText: '取消',
							success(res) {
								recorderManager.start();
								t.time = setInterval(this.timer, 50)
							}
						})
					}
				})

到了这里,关于uniapp录音功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【uni-app】uni-app实现聊天页面功能(小程序)——布局篇

    在工作中使用uni-app参与开发一个小程序,其中要写一个简单的聊天页面,虽然功能不多(只有一个发送文字的功能),但是其中的细节比较多,也踩过很多坑,特此记录下来。要实现的页面如图所示,该篇主要讲讲如何布局(参考了很多文章之后根据页面需求进行一个整合)

    2024年02月05日
    浏览(89)
  • 【UniApp】-uni-app-打包成网页

    经过上一篇文章的介绍,已经将这个计算器的计算功能实现了,接下来就是我们项目当中的一个发包上线阶段,我模拟一下,目的就是为了给大家介绍一下,uni-app是如何打包成网页的。 除了可以打包成网页,uni-app还可以打包成小程序、App、H5、快应用等等,后面在单独开文

    2024年02月04日
    浏览(67)
  • Uniapp uni-app学习与快速上手

    个人开源uni-app开源项目地址:准备中 在线展示项目地址:准备中 什么是uni-app uni,读 you ni ,是统一的意思。 Dcloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位,致力于推进HTML5发展构建,HTML5生态。 2012年,DCloud开始研发小程序技术,优化webvie

    2024年02月09日
    浏览(58)
  • uni-app实现图片上传功能

    效果 代码  

    2024年02月13日
    浏览(64)
  • 【uni-app】通过uni-app基础组件picker实现选择日期、时间的功能示例(完整代码+图文)

    一、获取日期(基础) 二、获取日期和时间(改进)  

    2024年02月11日
    浏览(53)
  • 前端-vscode中开发uni-app

    node -v npm install @vue/ cli@4.5.15 -g 指定版本号:4.5.15 在自己电脑目录下创建项目: demo02是自己项目名字 在D/AllCode/vs_vue2_uniapp目录下执行一下命令: vue create -p dcloudio/uni-preset-vue demo02 要想在vscode执行npm命令 我们打开pages.json和manifest.json,发现会报红,这是因为在json中是不能写注

    2024年01月18日
    浏览(64)
  • uni-app开发 小程序直播功能

    1、微信后台申请插件开通 2、微信后台开通直播功能 3、代码中接入直播插件AppID 4、【直播组件】如何使用 5、直播组将状态获取 微信开发直播功能,需要企业账号; 需要申请直播功能和插件 1、微信后台申请插件开通 微信后台 登录微信后台 点击设置中的第三方设置 — 添

    2024年02月05日
    浏览(55)
  • uni-app小程序分享功能实现

    通过onShareAppMessage(OBJECT) 将小程序到分享微信聊天,onShareTimeline()将小程序分享到朋友圈。 api中的参数配置参考文档:https://uniapp.dcloud.net.cn/api/plugins/share.html#onshareappmessage 分为全局引入、单页面引两种方式 全局引入只需要在小程序main.js中引入一次,可以复用,便于维护; 单

    2024年02月05日
    浏览(96)
  • UNI-APP 人脸识别分析及实现(前端)

    实现流程: 1、打开摄像头——自动读取照片——传输给后端——后端交由第三发或自主开发来识别——返回结果(相识度比) 2、打开摄像头——自动读取视频——传输给后端——后端通过解析视频,截取图片交由第三发或自主开发来识别——返回结果(相识度比) 通过分

    2023年04月08日
    浏览(42)
  • uni-app小程序中实现分享功能

    1、在manifest.json文件中配置分享相关信息,包括分享标题、分享图片等。 代码如下: 2、在需要触发分享的页面中,使用uni.navigateToMiniProgram()方法打开分享页面。  3、在被分享的小程序中,可以通过wx.getLaunchOptionsSync()获取到分享时携带的额外数据。  

    2024年02月08日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包