前端uniApp使用音频组件

前端uniApp使用音频组件

概况：

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

代码如下：

<template>
<view>
<view class="face-container">
<camera device-position="front" flash="off" class="camera" @error="error" v-if="showCamera">
<cover-image :src="img.bg" class="bg"></cover-image>
</camera>
<view class="image-container" v-if="showImage">
<image mode="widthFix" class="photo" :src="photoPath"></image>
<view class="cover"></view>
</view>
</view>
<view class="desc">
<block v-if="mode == 'verificate'">
<image :src="img.tips" mode="widthFix" class="tips"></image>
<text>请把面部放在圆圈内</text>
<text>拍摄脸部来确认身份</text>
</block>
<block v-if="mode == 'create'">
<image :src="img.face" mode="widthFix" class="face"></image>
<text>请把完整面部放在圆圈内</text>
<text>拍摄脸部来保存身份识别数据</text>
</block>
</view>
<button class="btn" @tap="confirmHandle">{{ mode == 'create' ? '录入面部信息' : '身份核实' }}</button>
</view>
</template>
<script>
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.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 = null
if(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>
<style lang="less">
@import url('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