uniapp 录音和播放功能

2023-08-26 274

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： uniapp 录音和播放功能

实现录音功能需要用到 uni.getRecorderManager();

播放则需要用到 uni.createInnerAudioContext();

import * as m from '@dcloudio/uni-app'
 // 录音功能
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();

按钮样式部分：

   <button @tap="startRecord">开始录音</button>
   <button @tap="playVoice">播放录音</button>
   <button @tap="Stop">停止播放</button>

点击开始录音时弹出层出现：

弹出层样式：

  <!-- <button>打开弹窗</button> -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view class="pop">
        <view style="margin:10px 10px;text-align: end;" @click="endRecord">
          完成
        </view>
        <view class="luyin">
          <text>录音秒数</text>
          <text>{{num}}  秒</text>
        </view>
        <view class="img">
          <view>
            {{title}}
          </view>
          <image v-if="start" @click="open" src="https://pic.imgdb.cn/item/6483d51a1ddac507cc140c7c.png"
            mode=""></image>
          <image v-show="pause" @click="down" src="https://pic.imgdb.cn/item/6483d6811ddac507cc155ed6.png"
            mode=""></image>
          <image v-show="go_on" @click="go_ons" src="https://pic.imgdb.cn/item/6483d51a1ddac507cc140c7c.png"
            mode=""></image>
        </view>
      </view>
    </uni-popup>

css部分：

.pop {
    width: 100%;
    height: 30vh;
  }
  .luyin {
    width: 100%;
    height: 40px;
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
    // >text:nth-child(1){
    // }
    >text:nth-child(2) {
      margin-left: 10px;
    }
  }
  .img {
    width: 100%;
    text-align: center;
    margin-top: 40px;
    image {
      border-radius: 50%;
      width: 50px;
      height: 50px;
      margin-top: 20px;
    }
  }

js部分：

//底部弹出
startRecord() {
        this.$refs.popup.open('bottom')
      },

效果演示：

开始录音效果：

//开始录音
            open() {
        this.start = false;
        this.pause = true;
        this.title = '开始录音';
        console.log('开始录音');
        recorderManager.start();
        this.times = setInterval(() => {
          console.log(++this.num);
        }, 1000)
      },
//暂停录音
           down() {
        this.pause = false;
        this.go_on = true;
        this.title = '暂停录音';
        recorderManager.pause();
        clearInterval(this.times)
      },
//继续录音
      go_ons() {
        this.pause = true;
        this.go_on = false;
        this.title = '继续录音';
        recorderManager.resume();
        this.times = setInterval(() => {
          console.log(++this.num);
        }, 1000)
      },
//结束录音
            endRecord() {
        console.log('录音结束');
        recorderManager.stop();
        clearInterval(this.times)
        console.log(this.num);
      },

在onload中获取录音结束的返回值

onLoad() {
      let self = this;
      recorderManager.onStop(function(res) {
        console.log('recorder stop' + JSON.stringify(res));
        self.voicePath = res.tempFilePath;
      });
    },

开始播放事件：

//播放录音
            playVoice() {
        console.log('播放录音');
        if (this.voicePath) {
          innerAudioContext.src = this.voicePath;
          innerAudioContext.play();
        }
      },
//停止播放
      Stop() {
        innerAudioContext.stop();
      },