VUE3开箱即用的音频播放组件（基于原生audio）

1 效果展示

2 组件文件

AudioBase.vue

注：我是使用unocss语法来编写css 如果项目没有搭载unocss 将其相应的转换为css即可

<template>
  <div
    :style="{
      height: `${100 + (textDiv ? textDiv.clientHeight + 10 : 0)}px`,
    }"
    p-10
    bg-white
    w-500
    rounded-xl
    border="1px solid gray-200 "
  >
    <div>
      <div inline-flex text-size-6xl>
        与
        <div mx-5 inline-flex>{{ $props.customerName }}</div>
        进行通话
      </div>
      <div text-gray-500 inline-flex float-right>{{ $props.callTime }}</div>
    </div>
    <div class="bg-[--td-brand-color-1]" float-left flex-center pl-9 pr-11 rounded-55 w-330 h-40 mt-10>
      <span w-50 inline-block mr-8> {{ transTime(audioCurrent) }} </span>
      <div class="progress" w-120 mx-10 my-0>
        <t-slider
          v-model="playProgress"
          :tooltip-props="{
            theme: 'light',
            content: transTime((changeVal * audioDuration) / 100),
          }"
          @change="change"
          @change-end="changeEnd"
        />
      </div>
      <span w-50 inline-block mr-6>{{ transTime(audioDuration) }}</span>
      <t-icon
        v-if="!playStatus"
        name="play-circle"
        class="color-[--td-brand-color-6]"
        w-34
        h-34
        ml-7
        cursor-pointer
        @click="onPlay"
      ></t-icon>
      <t-icon
        v-else
        class="color-[--td-brand-color-6]"
        w-34
        h-34
        ml-7
        cursor-pointer
        name="pause-circle"
        @click="onPause"
      ></t-icon>
    </div>
    <audio ref="audioRef" :src="url" @canplay="onCanplay" />
    <div ml-20 flex-center mt-10>
      <t-popup v-model:visible="speedVisible" placement="top" :width="50">
        <template #content>
          <div
            v-for="item in speedList"
            :key="item.value"
            mb-17
            cursor-pointer
            text-center
            @click="onChangeSpeed(item.value)"
          >
            <span>{{ item.label }}</span>
          </div>
        </template>
        <div inline ml-5 cursor-pointer>
          <span class="text-[var(--td-brand-color-6)]" cursor-pointer @click="onHandleSpeed"
            >{{ activeSpeed.toFixed(1) }}x</span
          >
          <div color-gray-6 text-12>倍速</div>
        </div>
      </t-popup>
      <div inline ml-20 flex-col-center cursor-pointer>
        <t-icon class="color-[var(--td-brand-color-6)]" ml-4 w-20 h-18 name="cloud-download"></t-icon>
        <div color-gray-6 text-12>下载</div>
      </div>
      <div inline ml-20 flex-col-center cursor-pointer @click="handleText">
        <t-icon class="color-[var(--td-brand-color-6)]" ml-5 w-20 h-18 name="translate"></t-icon>
        <div color-gray-6 text-12>转文字</div>
      </div>
    </div>
    <div
      v-if="showText"
      ref="textDiv"
      class="bg-[var(--td-brand-color-1)]"
      p-10
      rounded-5
      mt-10
      max-h-190
      overflow-auto
      overflow-y-auto
    >
      {{ $props.text }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import moment from 'moment';
import { defineProps, onMounted, ref } from 'vue';

defineProps({
  customerName: {
    type: String,
    default: 'xxx',// 名字
  },
  callTime: {
    type: String,
    default: '2024-08-02 16:20:35',
  },
  url: {
    type: String,
    default: 'http://music.163.com/song/media/outer/url?id=1337065812.mp3',
  },
  text: {
    type: String,
    default: '默认的内容还可以吧我是默认的语音转文字内容看看长度如何呢默认的内容还可以吧我是默认的语音转文字',
  },
});

const speedList = [
  {
    label: '2x',
    value: 2,
  },
  {
    label: '1.5x',
    value: 1.5,
  },
  {
    label: '1x',
    value: 1,
  },
  {
    label: '0.75x',
    value: 0.75,
  },
];

onMounted(() => {
  clearInterval(timeInterval.value);
});

const speedVisible = ref<boolean>(false); // 设置音频播放速度弹窗
const audioRef = ref(); // 音频标签对象
const activeSpeed = ref(1); // 音频播放速度
const audioDuration = ref(0); // 音频总时长
const audioCurrent = ref(0); // 音频当前播放时间
const playStatus = ref<boolean>(false); // 音频播放状态：true 播放，false 暂停
const playProgress = ref(0); // 音频播放进度
const timeInterval = ref(); // 获取音频播放进度定时器
const showText = ref(false);
const textDiv = ref();
const changeVal = ref(0);
/** FUNCTION */
// 拖动进度条
const change = (val) => {
  changeVal.value = val;
};
const changeEnd = (val: number) => {
  if (audioDuration.value === 0) return;
  playProgress.value = val;
  audioRef.value.currentTime = (playProgress.value / 100) * audioDuration.value;
  audioCurrent.value = audioRef.value.currentTime;
};
// 文字展示
const handleText = async () => {
  showText.value = !showText.value;
};
// 音频加载完毕的回调
const onCanplay = () => {
  audioDuration.value = audioRef?.value.duration || 0;
};
const onPlay = async () => {
  // 音频播放完后，重新播放
  if (playProgress.value === 100) audioRef.value.currentTime = 0;

  await audioRef.value.play();
  playStatus.value = true;
  audioDuration.value = audioRef.value.duration;

  timeInterval.value = setInterval(() => {
    audioCurrent.value = audioRef.value.currentTime;
    playProgress.value = (audioCurrent.value / audioDuration.value) * 100;
    if (playProgress.value === 100) onPause();
  }, 100);
};
const onPause = () => {
  audioRef.value.pause();
  playStatus.value = false;
  clearInterval(timeInterval.value);
};
const onChangeSpeed = (value: number) => {
  activeSpeed.value = value;
  // 设置倍速
  audioRef.value.playbackRate = value;
  speedVisible.value = false;
};
const onHandleSpeed = () => {
  speedVisible.value = !speedVisible.value;
};
// 音频播放时间换算
const transTime = (value: number) => {
  return `${Math.floor(value / 3600) > 9 ? Math.floor(value / 3600) : `0${Math.floor(value / 3600)}`}:${moment({
    m: moment.duration(value, 'seconds').minutes(),
    s: moment.duration(value, 'seconds').seconds(),
  }).format('mm:ss')}`;
};
</script>

<style lang="less" scoped>
.progress {
  ::v-deep .sp-slider__button-wrapper {
    width: 20px;
    height: 20px;
    margin-top: 8px;
  }
  ::v-deep .sp-slider__button {
    width: 12px;
    height: 12px;
    background-color: #4974f5;
  }
}
</style>

3 使用尝试

在外层父组件中使用如下：

先引入组件

<script setup lang="ts">
import AudioBase from '@/layouts/components/baseComponents/AudioBase.vue';
</script>

然后直接使用

<div bg-white p-10 rounded-5>
   播放组件：
   <audio-base></audio-base>
</div>