前端uniApp使用音频组件

前端uniApp使用音频组件

概况：

1、前端图片转换 base64数据

2、创建 camera 组件的上下文 cameraContext 对象且实现拍照功能，返回图片路径。

3、创建内部 audio 上下文 innerAudioContext 对象且播放自定义mp3文件。

代码如下：

请把面部放在圆圈内拍摄脸部来确认身份请把完整面部放在圆圈内拍摄脸部来保存身份识别数据{{ mode == 'create' ? '录入面部信息' : '身份核实' }}export default {data() {return {img: {bg: `${this.patientUrl}/page/user/face_camera/bg1.png`,tips: `${this.patientUrl}/page/user/face_camera/tips.png`,face: `${this.patientUrl}/page/user/face_camera/face.png`},voice: {// 自定义MP3文件路径voice_1: `${this.patientUrl}/voice/voice_1.mp3`},mode: 'verificate',photoPath: '',showCamera: true,showImage: false,audio: null};},methods: {confirmHandle:function(res){let that = this// 销毁audio上下文对象that.audio.destroy()// 创建并返回 camera 组件的上下文 cameraContext 对象。const ctx = uni.createCameraContext();// 拍照，可指定质量，成功则返回图片路径。ctx.takePhoto({quality: 'high',success: (res) => {that.photoPath = res.tempImagePaththat.showCamera = falsethat.showImage = true// 把照片读取成base64字符串,获取全局唯一的文件管理器uni.getFileSystemManager().readFile({ // .readFile 读取本地文件内容。单个文件大小上限为100M。filePath: that.photoPath,encoding: 'base64',success:function(res){let image = res.datalet url = nullif(that.mode == 'create'){url = '/face/auth/createFaceModel'}else{url = '/face/auth/verifyFaceModel'}let data = {image: image}that.ajax(url, 'POST', data, function(res){let result = res.data.resultif(result == 'create'){// 跳回到上一页uni.showToast({icon: 'none',title: result})setTimeout(function() {uni.navigateBack({delta: 1});},2000)}else{ // 核验人脸信息uni.showToast({icon: 'none',title: result,duration: 1500})}})}})}});}},onLoad: function(options) {this.mode = options.mode// 创建并返回 audio 上下文 audioContext 对象let audio = uni.createInnerAudioContext()this.audio = audio// src: 音频的数据链接，用于直接播放。audio.src = this.voice.voice_1audio.play() // 播放（H5端部分浏览器需在用户交互时进行）},// 应用从前台进入后台时触发（切换到其他app）onHide: function() {// 关闭该页面时，则停止播放语音if(!this.audio || this.audio != null){// 停止播报（销毁当前实例）this.audio.destroy()}},// 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时。onUnload:function () {// 关闭该页面时，则停止播放语音if(!this.audio || this.audio != null){// 停止播报（销毁当前实例）this.audio.destroy()}}};@import url('face_camera.less');

【更多使用请参考文档：】

https://uniapp.dcloud.net.cn/api/media/camera-context.html

https://uniapp.dcloud.net.cn/api/media/audio-context.html#createinneraudiocontext