微信小程序录音机源代码

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()
  },
})
相关推荐
Myli_ing24 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维41 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue