先看效果图
一、授权
1、用户拒绝或未授权时调用inquiriesEmpower方法
uni.showModal为弹出确认弹窗,点击确定调用uni.openSetting跳转设置页面,点击取消可自行处理
const inquiriesEmpower = (auth = "scope.record") => {
return new Promise((resolve, reject) => {
uni.getSetting({
success(res) {
if (!res.authSetting[auth]) {
uni.showModal({
content: "获取授权失败,是否重新授权?",
success: (res) => {
if (res.confirm) {
uni.openSetting({
success(res) {
console.log(res.authSetting);
},
});
} else if (res.cancel) {
reject("用户点击取消");
}
},
});
}
},
});
});
};
// 授权按钮
const toInquiriesEmpower = async () => {
try {
await inquiriesEmpower();
} catch (err) {
console.log(err);
}
};
二、拍照
uni.chooseImage拍摄或从手机相册中选图片,返回图片的临时文件路径
// 拍照和相册
const takePicture = () => {
uni.chooseImage({
count: 1,
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"], //从相册选择
success: (res) => {
const { tempFilePaths } = res;
console.log(tempFilePaths);
},
});
};
三、录像和相册
uni.chooseVideo拍摄视频或从手机相册中选视频,返回视频的临时文件路径,sourceType: [‘camera’]控制为相机录制
// 录像和相册
const takeVideoPicture = () => {
uni.chooseVideo({
compressed: false, //是否压缩所选的视频源文件,默认值为 true
sourceType: ["album", "camera"],
success: (res) => {
const { tempFilePath } = res;
console.log(tempFilePath);
},
});
};
四、录音
uni.getRecorderManager() 创建录音管理器,uni.createInnerAudioContext()创建并返回内部 audio 上下文,具体如下:
const playAudioId = ref(0); //播放中的id标识
const playStatus = ref(0); //录音播放状态 0:未播放 1:正在播放
//创建一个录音管理器
const recorderManager = uni.getRecorderManager();
//创建一个播放器
let audioContext = uni.createInnerAudioContext();
//录音开始
const startRecord = async () => {
try {
await inquiriesEmpower("scope.record");
const options = {
duration: 60000, // 默认值 60000(1 分钟)
sampleRate: 16000, // 采样率
numberOfChannels: 1, // 录音通道数
encodeBitRate: 96000, // 编码码率
format: "mp3", // 音频格式,有效值 aac/mp3
frameSize: 10, // 指定帧大小,单位 KB
};
recorderManager.start(options);
} catch (err) {
console.log(err);
}
};
//录音结束
const endRecord = () => {
recorderManager.stop();
recorderManager.onStop(function (res) {
const { tempFilePath } = res;
const fileName = new Date().getTime();
// 向预览数组里添加 -- 自行修改
const tempArr = {
id: fileName,
url: tempFilePath,
type: "audio",
};
});
};
// 播放录音
const playAudio = (item) => {
if (playStatus.value === 1 && playAudioId.value != item.id) {
uni.showToast({
title: "请先暂停当前播放...",
icon: "none",
});
return;
}
if (playStatus.value == 0) {
playMusic(item);
} else {
stopMusic(item);
}
};
//播放音乐
const playMusic = (item) => {
audioContext = uni.createInnerAudioContext();
audioContext.src = item.url;
audioContext.play();
//直接播放
audioContext.onPlay((res) => {
//暂停之后点击播放继续播放
uni.showToast({
title: "播放中...",
icon: "none",
});
updateStatus(item, 1); //更新播放音频的状态
//此处省略 -自行设置定时器获取,当前音频播放的时间/当前播放音频总时长
//audioContext.duration/audioContext.currentTime
//示例代码:
// intervalID.value = setInterval(() => {
// const currentTime = audioContext.currentTime || 0; //当前音频播放的时间
// const druationTime = audioContext.duration || 0; //当前播放音频总时长
// item.tiemAll = formatTime(druationTime); // 格式化总时长 如:00:26
// item.currentTime = formatTime(currentTime); // 格式化当前时长 如:00:12
// // 播放完成清除定时器
// if (audioContext.duration && item.currentTime) {
// clearInterval(intervalID.value);
// }
// }, intervalTime.value);
});
//播放结束重制播放
audioContext.onEnded((end) => {
updateStatus(item, 0); //更新播放音频的状态
});
};
// 暂停音乐
const stopMusic = (item) => {
audioContext.pause();
audioContext.onPause((res) => {
uni.showToast({
title: "暂停播放",
icon: "none",
});
});
updateStatus(item, 0);
};
// 更新播放音频的状态
const updateStatus = (item, falg) => {
item.play = falg;
playStatus.value = falg;
playAudioId.value = item.id;
};
// 格式化时间的函数,将秒转换为分:秒格式
const formatTime = (num) => {
num = num?.toFixed(0);
let second = num % 60;
if (second < 10) second = "0" + second;
let min = Math.floor(num / 60);
if (min < 10) min = "0" + min;
return min + ":" + second;
};