微信小程序录音机源代码

html 复制代码
<!-- <button bind:tap="startTab">开始录音</button>
<button bind:tap="stopTab">结束录音</button>
<button bind:tap="playTab">播放录音</button>
<view style="margin: 0 auto;">{{time}}</view> -->
<view class="container">
  <!-- 上面部分 -->
  <view class="top">
    <view class="lyjText">录音机</view>
    <view class="times">{{h<10?'0'+ h:h}}:{{f<10?'0'+ f:f}}:{{s<10?'0'+ s:s}}</view>
  </view>
  <!-- 下面部分 -->
  <view class="player">
  <!-- 暂停 -->
    <view bind:tap="pauseTab" class="playerBox sjx"></view>
    <!-- 开始录音 -->
    <view class="playerBox1">
      <view class="litterBox" bind:tap="startTab">
      </view>
    </view>
    <!-- 结束录音 -->
    <view class="playerBox" bind:tap="stopTab">
      <view class="zfx"></view>
    </view>
  </view>
  <button type="primary" bind:tap="playTab">播放</button>
</view>
css 复制代码
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
}
.player {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.playerBox1 {
  width: 200rpx;
  height: 200rpx;
  background-color: red;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 50rpx;
}
.litterBox {
  width: 90rpx;
  height: 90rpx;
  background-color: white;
  border-radius: 50%;
}
.playerBox {
  width: 140rpx;
  height: 140rpx;
  background-color: rgb(239,239,239);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.zfx {
  width: 40rpx;
  height: 40rpx;
  background-color: rgb(174,174,174);
}
.sjx::after {
  content: "";
  display: block;
  border: 30rpx solid transparent;
  border-left-color: rgb(174,174,174);
  position: relative;
  left: 15rpx;
}
.lyjText {
  font-size: 50rpx;
}
.times {
  font-size: 120rpx;
}
.top {
  display: flex;
  flex-direction: column;
  align-items: center;
}
javascript 复制代码
// 全局录音管理器
let recorder = wx.getRecorderManager()
// 全局文件管理
// let fileSytems = wx.getFileSystemManager()
let audio = wx.createInnerAudioContext()
let timer = null
let _this
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 小时
    h: 0,
    // 分钟
    f: 0,
    // 秒
    s: 0,
    file: '',
    // 是否在播放
    isPlay: false
  },
  onLoad() {
    _this = this
  },
  pauseTab() {
    if (this.data.isPlay === true) {
      this.setData({
        isPlay: false
      })
      recorder.pause()
      clearInterval(timer)
      timer = null
    } else if (this.data.isPlay === false) {
      this.startTab()
    }
  },
  startTab() {
    this.setData({
      isPlay: true
    })
    if (!timer) {
      timer = setInterval(() => {
        this.setData({
          s: this.data.s >= 59 ? 0 : this.data.s + 1,
          f: this.data.s >= 59 ? this.data.f + 1 : this.data.f,
          h: this.data.f >= 59 ? this.data.h + 1 : this.data.h,
        })
      }, 1000)
    }

    recorder.start()
  },
  stopTab() {
    this.setData({
      isPlay: false
    })
    clearInterval(timer)
    timer = null
    this.setData({
      f: 0,
      h: 0,
      s: 0
    })
    recorder.stop()
    // console.log(1);
    recorder.onStop(res => {
      console.log(1);
      const {
        tempFilePath
      } = res
      // console.log(res);
      this.data.file = tempFilePath
      console.log(this.data.file);
    })
  },
  playTab() {
    audio.src = this.data.file
    audio.play()
  },
})
相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
程序员入门进阶5 小时前
基于微信小程序的电子购物系统的设计与实现(lw+演示+源码+运行)
微信小程序·小程序
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js