码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 微信小程序录音机源代码


    {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()
      },
    })
    
  • 相关阅读:
    基于nginx在视频播放器与服务器之间反向代理流程
    数据链路层——MAC帧、ARP协议详解
    Zookeeper
    Docker技术入门| Part03:Dockerfile详解(Dockerfile概念、Dockerfile 指令、使用Dockerfile构建镜像)
    aarch64 arm64 部署 stable diffusion webui 笔记 【2】继续安装其他依赖 gfpgan
    phpstudy设置允许远程访问mysql数据库(linux,pc都适用)
    [网络] TCP协议中的三次握手是什么?利用3次握手的SYN Flood DDOS攻击知道吗?
    用JavaEE编写一个简单的网页,显示10个“你好”信息,在服务器中运行,在本机上访问,然后用另一台机器访问。
    Ftrans自动同步软件:满足企业级数据同步的需求
    牛客手速月赛61 F(又是被20级打爆的一天)
  • 原文地址:https://blog.csdn.net/2301_77264434/article/details/139736056
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号