前端uniApp使用音频组件

前端uniApp使用音频组件

概况：

1、前端图片转换 base64数据
2、创建 camera 组件的上下文 cameraContext 对象且实现拍照功能，返回图片路径。
3、创建内部 audio 上下文 innerAudioContext 对象且播放自定义mp3文件。

代码如下：

<template><view><viewclass="face-container"><cameradevice-position="front"flash="off"class="camera"@error="error"v-if="showCamera"><cover-image:src="img.bg"class="bg"></cover-image></camera><viewclass="image-container"v-if="showImage"><imagemode="widthFix"class="photo":src="photoPath"></image><viewclass="cover"></view></view></view><viewclass="desc"><blockv-if="mode == 'verificate'"><image:src="img.tips"mode="widthFix"class="tips"></image><text>请把面部放在圆圈内</text><text>拍摄脸部来确认身份</text></block><blockv-if="mode == 'create'"><image:src="img.face"mode="widthFix"class="face"></image><text>请把完整面部放在圆圈内</text><text>拍摄脸部来保存身份识别数据</text></block></view><buttonclass="btn"@tap="confirmHandle">{{ mode == 'create' ? '录入面部信息' : '身份核实' }}</button></view></template><script>exportdefault{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.tempImagePath
                    that.showCamera =false
                    that.showImage =true// 把照片读取成base64字符串,获取全局唯一的文件管理器
                    uni.getFileSystemManager().readFile({// .readFile 读取本地文件内容。单个文件大小上限为100M。filePath: that.photoPath,encoding:'base64',success:function(res){let image = res.data
                            let 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.result
                                if(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_1
        audio.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()}}};</script><stylelang="less">@importurl('face_camera.less');</style>

【更多使用请参考文档：】
https://uniapp.dcloud.net.cn/api/media/camera-context.html
https://uniapp.dcloud.net.cn/api/media/audio-context.html#createinneraudiocontext