• 微信小程序录音机源代码


    {time}} -->
    <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>
    
    .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;
    }
    
    // 全局录音管理器
    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()
      },
    })
    
  • 相关阅读:
    从零开始的C++(六)
    Webmin -- Sheduled Commands
    STM32G0开发笔记-Platformio+libopencm3-串口中断
    Efficient Similarity Joins for Near Duplicate Detection论文总结
    zookeeper(目前只有安装)
    生成学习全景:从基础理论到GANs技术实战
    PTA 网红店打卡攻略(带权建图搜索)
    为博客园开发了一套脚手架及模板——实时预览页面定制效果
    【附源码】Python计算机毕业设计农产品销售平台
    正则表达式语法解析
  • 原文地址:https://blog.csdn.net/2301_77264434/article/details/139736056