微信小程序录音机源代码

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 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C4 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
盏茶作酒2917 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_37 分钟前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐1 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机1 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星1 小时前
vue实现微信聊天emoji表情
前端·javascript
停止重构1 小时前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚1 小时前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript