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

最新推荐文章于 2024-09-06 14:31:29 发布

伍零伍零

最新推荐文章于 2024-09-06 14:31:29 发布

阅读量3k

点赞数 2

文章标签： vue.js css3 前端

本文链接：https://blog.csdn.net/p_5050/article/details/126528287

版权

本文介绍了一种使用Vue.js和CSS3来实现类似微信的语音录制和播放功能的方法。作为前端初学者的作者，分享了自己的学习过程，并提供了一段带有动画效果的语音交互体验。同时，作者欢迎读者指出可能存在的错误。

摘要由CSDN通过智能技术生成

本文使用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=&