chat-pc/src/components/talk/message/AudioMessage.vue

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { PlayOne, PauseOne } from '@icon-park/vue-next'
import { ITalkRecordExtraAudio, ITalkRecord } from '@/types/chat'

const props = defineProps<{
  extra: ITalkRecordExtraAudio
  data: ITalkRecord
  maxWidth?: Boolean
}>()

const audioRef = ref()

const durationDesc = ref('-')

const state = reactive({
  isAudioPlay: false,
  progress: 0,
  duration: 0,
  currentTime: 0,
  loading: true,
  showText: false
})

const onPlay = () => {
  if (state.isAudioPlay) {
    audioRef.value.pause()
  } else {
    audioRef.value.play()
  }

  state.isAudioPlay = !state.isAudioPlay
}

const onPlayEnd = () => {
  state.isAudioPlay = false
  state.progress = 0
}

const onCanplay = () => {
  state.duration = audioRef.value.duration
  durationDesc.value = formatTime(parseInt(audioRef.value.duration))
  state.loading = false
  
  if (props.data.is_convert_text === 1 && props.data.extra.content) {
    setTimeout(() => {
      state.showText = true
    }, 300)
  }
}

const onError = (e: any) => {
  console.log('音频播放异常===>', e)
}

const onTimeUpdate = () => {
  let audio = audioRef.value
  if (audio.duration == 0) {
    state.progress = 0
  } else {
    state.currentTime = audio.currentTime
    state.progress = (audio.currentTime / audio.duration) * 100
  }
}

const formatTime = (value: number = 0) => {
  if (value == 0) {
    return '-'
  }

  return `${Math.floor(value)}"`
}
</script>
<template>
  <div class="pointer w-200px bg-#f5f5f5 rounded-10px px-11px">
    <div class="im-message-audio h-44px">
    <audio
      ref="audioRef"
      preload="auto"
      type="audio/mp3,audio/wav"
      :src="extra.url"
      @timeupdate="onTimeUpdate"
      @ended="onPlayEnd"
      @canplay="onCanplay"
      @error="onError"
    />

    <div class="play">
      <div class="btn pointer" @click.stop="onPlay">
        <n-icon :size="18" :component="state.isAudioPlay ? PauseOne : PlayOne" />
      </div>
    </div>
    <div class="desc">
      <span class="line" v-for="i in 23" :key="i"></span>
      <span
        class="indicator"
        :style="{ left: state.progress + '%' }"
        v-show="state.progress > 0"
      ></span>
    </div>
    <div class="time">{{ durationDesc }}</div>
  </div>
  
  <transition name="expand">
    <div class="text-container py-12px border-t-2px border-t-solid border-t-#E0E0E4" v-if="data.is_convert_text===1">
      <div class="flex justify-center items-center" v-if="data.is_convert_text===1&&!data.extra.content">
        <n-spin :stroke-width="3" size="small" />
      </div>
      <transition name="fade">
        <div class="text-content" v-if="data.extra.content">{{ data.extra.content }}</div>
      </transition>
    </div>
  </transition>
  </div>

</template>
<style lang="less" scoped>
.im-message-audio {
  --audio-bg-color: #f5f5f5;
  --audio-btn-bg-color: #ffffff;
  display: flex;
  align-items: center;
  overflow: hidden;
  > div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .play {
    width: 45px;
    height: inherit;
    flex-shrink: 0;

    .btn {
      width: 26px;
      height: 26px;
      background-color: var(--audio-btn-bg-color);
      border-radius: 50%;
      color: rgb(24, 24, 24);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
  }

  .desc {
    flex: 1 1;
    height: inherit;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;

    .line {
      justify-content: space-between;
      height: 30px;
      width: 2px;
      background-color: rgb(40, 39, 39);
      margin-left: 3px;

      &:first-child {
        margin-left: 0;
      }

      &:nth-child(1) {
        height: 16px;
      }
      &:nth-child(2) {
        height: 10px;
      }
      &:nth-child(3) {
        height: 8px;
      }
      &:nth-child(4) {
        height: 6px;
      }
      &:nth-child(5) {
        height: 2px;
      }
      &:nth-child(6) {
        height: 10px;
      }
      &:nth-child(7) {
        height: 20px;
      }

      &:nth-child(8) {
        height: 16px;
      }
      &:nth-child(9) {
        height: 10px;
      }
      &:nth-child(10) {
        height: 13px;
      }
      &:nth-child(11) {
        height: 10px;
      }
      &:nth-child(12) {
        height: 8px;
      }
      &:nth-child(13) {
        height: 15px;
      }
      &:nth-child(14) {
        height: 16px;
      }
      &:nth-child(15) {
        height: 16px;
      }
      &:nth-child(16) {
        height: 15px;
      }
      &:nth-child(17) {
        height: 14px;
      }
      &:nth-child(18) {
        height: 12px;
      }
      &:nth-child(19) {
        height: 8px;
      }
      &:nth-child(20) {
        height: 3px;
      }
      &:nth-child(21) {
        height: 6px;
      }
      &:nth-child(22) {
        height: 10px;
      }
      &:nth-child(23) {
        height: 16px;
      }
    }

    .indicator {
      position: absolute;
      height: 70%;
      width: 1px;
      background-color: #9b9595;
      transition: left 0.1s linear;
    }
  }

  .time {
    width: 50px;
    height: inherit;
    font-size: 12px;
    flex-shrink: 0;
  }
}

.expand-enter-active,
.expand-leave-active {
  transition: all 0.5s ease;
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  max-height: 0;
  opacity: 0;
  padding: 0;
  border-top-width: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.text-container {
  overflow: hidden;
  transition: all 0.2s ease;
}

.text-content {
  line-height: 1.5;
  transition: all 0.2s ease;
}

html[theme-mode='dark'] {
  .im-message-audio {
    --audio-bg-color: #2c2c32;
    --audio-btn-bg-color: rgb(78, 75, 75);

    .btn {
      color: #ffffff;
    }

    .desc {
      .line {
        background-color: rgb(169, 167, 167);
      }
    }
  }
}
</style>