uniapp 录音和播放功能

简介: 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();
      },

录音时效果演示:

目录
相关文章
|
1天前
|
PHP
全新uniapp小说漫画APP小说源码/会员阅读/月票功能
价值980的uniapp小说漫画APP小说源码/会员阅读/月票功能
28 19
|
3月前
|
开发工具
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
阿里云点播服务web播放器sdk,短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
34 0
|
2月前
|
JavaScript 数据安全/隐私保护
uniapp功能权限判断$auth.auth $auth.role显示判断生成源码
uniapp功能权限判断$auth.auth $auth.role显示判断生成源码
32 0
|
4月前
|
开发框架 移动开发 前端开发
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
86 1
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现
90 12
|
5月前
|
JavaScript
uniapp+uView 【详解】录音,自制音频播放器
uniapp+uView 【详解】录音,自制音频播放器
144 0
|
5月前
|
前端开发 JavaScript 索引
uniapp的u-album组件自定义删除功能
这样,你就可以在u-album组件中实现自定义的删除功能了。需要注意的是,这个删除操作只是在前端删除了图片项,并没有在后端删除对应的图片文件,如果你需要在后端也删除对应的图片文件,你还需要在删除操作后发送一个请求到后端,让后端删除对应的图片文件。
122 0
下一篇
DataWorks