longPressRecording

功能描述

仿微信发送语音效果,按下向上滑动动录音图标可取消,用例见 longPressRecording.html

依赖的模块

  1. ./libs/longPressRecording.css
  2. ./libs/longPressRecording.js

快速使用

引入模块文件

  1. <link rel="stylesheet" type="text/css" href="./libs/longPressRecording.css"/>
  2. <script src="./libs/longPressRecording.js" type="text/javascript" charset="utf-8"></script>

使用以下DOM将会自动绑定长按事件

  1. <div class="btn">
  2. <input type="button" id="bt_recoding" value="按住 说话">
  3. </div>
  4. <div class="blackBoxSpeak">
  5. <p class="blackBoxSpeakConent">手指上划,取消发送</p>
  6. </div>
  7. <div class="blackBoxPause">
  8. <p class="blackBoxPauseContent" style="background: red">松开手指, 取消发送</p>
  9. </div>