uniapp开发微信小程序-实现授权、拍照、录像、录音上传相关文件

发布于:2024-05-18 ⋅ 阅读:(296) ⋅ 点赞:(0)

先看效果图
在这里插入图片描述

一、授权
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({
    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.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;
};

网站公告

今日签到

点亮在社区的每一天
去签到