微信小程序录音机源代码

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()
  },
})