VUE3开箱即用的音频播放组件完整代码(基于原生audio)
作者:cute_ming
Vue3开箱即用的框架有很多选择,下面这篇文章主要介绍了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>
总结
到此这篇关于VUE3音频播放组件的文章就介绍到这了,更多相关VUE3音频播放组件(原生audio)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!