vue + css3实现微信录制播放语音效果

本文使用vue + css3实现语音录制效果与语音播放效果。

效果图 ↓↓↓

 

<template>
  <div>
    <!-- 音频录制 -->
    <div class="audio-record" v-show="recordStatus">
      <img class="cancel-img" width="20" src="@/assets/image/close.png" @click="cancelRecord()" />

      <p class="duration-seconds-style">
        <span v-show="isDurationSeconds">已录制&nbsp;{
  {durationSeconds}}″</span>
        <span v-show="countDownRecord">{
  {countDownSecond}}″&nbsp;后停止录制</span>
      </p>

      <div class="icon">
        <img src="@/assets/image/audio_icon.png" width="45" />
        <div class="voice-animation" ref="voiceAnimation">
          <p v-for="item in 7" :key="item"></p>
        </div>
      </div>

      <div class="record-status" v-show="!startRecord" @click="startAudioRecord">
        <p>开始录制</p>
      </div>
      <div class="btn" v-show="startRecord">
        <div class="cancel" @click="cancelRecord">
          <p>取消</p>
        </div>
        <div class="send" @click="sendRecord">
          <p>发送</p>
        </div>
      </div>
    </div>

    <!-- 语音条 -->
    <div class="audio-detail-msg" v-show="isShowAudio">
      <div
        class="audio-style"
        :class="{'add-animation': isPlay}"
        :style="{width: handle