微信小程序录音与播放录音功能实现

灰太狼 2023-02-21 06:06 34阅读 0赞

**微信小程序录音与播放录音功能实现，话不多说直接上代码实例：**

**test.wxml**

**test.js**

var voice = "";
    Page({
      play: function () {
        //播放声音文件  
        wx.playVoice({
          filePath: voice
        })
      },
      start: function () {
        //开始录音  
        wx.startRecord({
          success: function (e) {
            voice = e.tempFilePath
          }
        })
      },
      stop: function () {
        //结束录音  
        wx.stopRecord();
      }
    })

**微信小程序录音与播放录音功能前端界面：**

![微信小程序录音与播放录音功能实现][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA_size_16_color_FFFFFF_t_70] 微信小程序录音与播放录音功能实现

pick一下最终效果，然后一步一步来。先把界面效果做出来。

**微信小程序录音与播放录音功能：**

1.  长按会随动画出现边上半透明的圈，松开会缩回去。
2.  顶部progressBar长按时出现，然后随录音时长变短。

这是界面功能，我们先搞一下。

**wxml**：

**wxss样式**：

.head {
      width: 100%;
      height: 400rpx;
      position: relative;
      
    }
    .head ,page{
      background-color: #f7f7f7;
    }
    .record, .dot {
      height: 200rpx;
      width: 200rpx;
      border-radius: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation-iteration-count: 1;
    }
    
    .record {
      background: rgba(92, 212, 76);
      z-index: 10;
    }
    
    .dot {
      background: rgba(92, 212, 76, 0.7);
      z-index: 9;
    }
    
    .dot-blowup {
      animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      animation-fill-mode: forwards;
    }
    
    .dot-zoomout {
      animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      animation-fill-mode: forwards;
    }
    
    @keyframes sploosh2 {
      0% {
        box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
        background: rgba(92, 212, 76, 0.7);
      }
    
      100% {
        box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
        background: rgba(92, 212, 76, 0.3);
      }
    }
    
    @keyframes sploosh3 {
      0% {
         box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
        background: rgba(92, 212, 76, 0.3);
      }
    
      100%{
        box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
        background: rgba(92, 212, 76, 0.7);
      }
    }
    
    .record image {
      height: 90rpx;
      width: 90rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 10;
      background: transparent;
      transform: translate(-50%, -50%);
    }

**js赋值**：

这里我的录音按钮点击扩散效果用的是纯css实现，而上方progress是使用animation实现的。

**参考自**：**[必学智库][Link 1]**

在开发微信小程序遇到资源类无法显示的问题：找了很多资料，特记录备用。

1. 真机测试不能显示图片问题

**原因：**微信小程序的图片资源必须是base64和网络图片格式。  
**解决方案：**js中，对本地图片进行转码，或者直接将url换为image根目录。

参考资料：[http//:wangzhan.jiaxiangz.com][http_wangzhan.jiaxiangz.com]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200628200643607.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA==,size_16,color_FFFFFF,t_70
[Link 1]: http://www.ibxiue.com
[http_wangzhan.jiaxiangz.com]: http://http//:wangzhan.jiaxiangz.com