这篇文章主要介绍如何使用Vue3+TS实现语音播放组件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
该功能将使用vue3 + TS来实现语音播放组件,使用什么技术不重要,重要的是看懂了核心逻辑后,通过原生js、react、vue2等都可以轻松实现
所涉及到重要点有以下几个:
(1)进度条的实现:拖拽进度条、点击进度条
(2)操作audio语音播放:通过js操作audio媒体
(3)播放进度与进度条紧密关联:播放的进度改变时,进度条也随之改变;进度条改变时,播放的进度也随之改变
效果图:
开始我们的设计吧!
第一步:点击拖拽进度条
进度条的css样式如下:
父元素设置灰色背景色,圆圈进行position定位,使用left百分比,同时黑色进度条的width也是百分比,这样圆圈的left值是多少,黑色进度条的width就是多少。
.slider-wrap { position: relative; display: flex; align-items: center; height: 4px; max-width: 194px; min-width: 36px; width: 194px; background-color: rgba(23, 23, 23, 0.15); cursor: pointer; .circle { position: absolute; width: 14px; height: 14px; background-color: #555555; border-radius: 100%; cursor: pointer; user-select: none; transform: translate(-50%); } .slider-bar { height: 4px; max-width: 200px; background-color: #555555; } }
先说拖拽圆圈,圆圈上绑定mousedown事件,根据事件e.target确定圆圈、黑色进度条、灰色父元素,三者的element。同时知道了圆圈当前的left值,比如30%,还知道了当前鼠标mousedown时,事件e.pageX,即鼠标mousedown时,距离页面左边的水平值,因为对比后续鼠标移动时,触发的mousemove事件的e.pageX可以判断移动了多少。同时还要知道灰色背景的父元素的width。因为鼠标移动的距离 / width 要赋值给圆圈的left。知道移动了%多少。
const circleMousedown = (e) => { circleTarget.el = e.target; // 圆圈自身 wrapEle.el = e.target.parentElement; // 圆圈父元素 sliderBar.el = e.target.nextElementSibling; // 圆圈的兄弟节点 circleTarget.circleLeft = e.target.style.left; circleTarget.pageX = e.pageX; circleTarget.circleMouseMouve = true; wrapEle.width = window.getComputedStyle(wrapEle.el, null).getPropertyValue('width'); };
然后,监听document文档的mousemove,注意鼠标是可以在整个文档上移动的,不过圆圈可不能在灰色父元素之外。移动的e.pageX - 鼠标mousedown时的e.pageX 就是鼠标水平移动的距离。超出最大值时,圆圈left设置为100%,小于最小值时,left设置为0%,总之left要在0%~100%之间,才能保证圆圈不超出到外面去。这样圆圈就可以随着鼠标移动了,同时黑色进度条的width值与圆圈的left值一样,所以黑色进度条的width也随着鼠标移动。
document.addEventListener('mousemove', (e) => { if (circleTarget.circleMouseMouve) { const nowLeft = parseFloat(circleTarget.circleLeft) + getPercentage(e.pageX - circleTarget.pageX, wrapEle.width); if (nowLeft >= 100) { circleDragLeft = '100%'; } else if (nowLeft <= 0) { circleDragLeft = '0%'; } else { circleDragLeft = `${nowLeft}%`; } updateProgressBar(circleDragLeft); currentTimeByProgressBar(circleDragLeft); } }); document.addEventListener('mouseup', () => { circleTarget.circleMouseMouve = false; });
再说说点击父元素时,圆圈到指定位置
点击事件在灰色父元素上进行监听,注意e.target可不一定是灰色父元素,e.target表示鼠标点击到哪个元素,随后click冒泡到父元素上的。同样点击事件的e.pageX 可以确定鼠标点击的水平位置,转换为%值,设置圆圈的left值和黑色进度条的width值。
// 只处理e.target是slider-wrap 或 slider-bar的情况 const clickSliderWrap = (e) => { if (e.target.getAttribute('target') === 'wrap') { wrapEle.el = e.target; circleTarget.el = e.target.firstElementChild; sliderBar.el = e.target.lastElementChild; } else if (e.target.getAttribute('target') === 'sliderbar') { sliderBar.el = e.target; circleTarget.el = e.target.previousElementSibling; wrapEle.el = e.target.parentElement; } else { return; } wrapEle.width = window.getComputedStyle(wrapEle.el, null).getPropertyValue('width'); const styleLeft = `${getPercentage(e.offsetX, wrapEle.width)}%`; updateProgressBar(styleLeft); currentTimeByProgressBar(styleLeft); };
以上就可以实现进度条功能了。
第二步:操作媒体音频
获取audio的element,audioElement上面有play、pause等方法,还有currentTime播放进度时间,以及duration总时长。所以说HTML5的audio标签,上面的方法和属性还是非常直观的,这也正是web发展的一个特点,某个新的特性的产生,功能会很明了。
首先当媒体的第一帧加载完成时,我们就获取audio的element:(audio自身的loadeddata事件)
// 当媒体音频第一帧加载完成时 const audioLoadeddata = (e) => { audioEl = e.target; audioData.duration = e.target.duration; };
其次,对播放中进行监听:(audio的timeupdate事件)
// 播放进度:表示audio正在播放,currentTime在更新 const audioTimeupdate = (e) => { audioData.currentTime = e.target.currentTime; progressBarBycurrentTime(); };
最后,播放完成进行监听:(audio的ended事件)
// 音频播放结束 const audioEnded = () => { audioData.playing = false; };
如果对audio标签不是很熟悉,请参考文档
上述操作还是很简单的,audio上的属性、方法、事件都是非常简单明了且实用的。
第三步:进度条和播放进度关联
通过audio当前的播放时间 / 总时长,得到的%值,赋值给圆圈的left和黑色进度条的width。
通过圆圈的left值的% * 总时长,得到audio的当前播放时间。(audio的currentTime属性直接赋值,语音播放就会跳转到指定的时间进行播放,比如 1,就会从1秒的位置开始)
完整代码
<template> <div class="glowe-audio"> <div class="audio"> <div class="icon-div" @click="playPauseAudio"> <video-play class="icon" v-if="!audioData.playing"></video-play> <video-pause class="icon" v-else></video-pause> </div> <div class="slider-wrap" : target="wrap" @click="clickSliderWrap" > <div class="circle" target="circle" @mousedown="circleMousedown"></div> <div class="slider-bar" target="sliderbar" ></div> </div> <div class="time-wrap"> <span class="time">{{ durationFormat(Math.round(audioData.duration)) }}</span> </div> </div> <audio :src="audioData.audiourl" preload="auto" @ended="audioEnded" @timeupdate="audioTimeupdate" @loadeddata="audioLoadeddata" ></audio> </div></template><script lang="ts">import { defineComponent, reactive } from 'vue';import { VideoPause, VideoPlay } from '@element-plus/icons';import { durationToFormat } from '@/utils/refactor'; export default defineComponent({ name: 'GloweAudio', components: { VideoPlay, VideoPause, }, props: { audioUrl: { type: String, required: true, }, }, setup(props) { const audioData = reactive({ audiourl: props.audioUrl, playing: false, duration: 0, // 音频总时长 currentTime: 0, // 当前播放的位置 }); let audioEl: HTMLAudioElement | null = null; const wrapEle: { width: string; el: any; } = { width: '0px', el: null, }; const sliderBar: { width: string; el: any; } = { width: '0%', el: null, }; const circleTarget: { circleMouseMouve: boolean; pageX: number; circleLeft: string; el: any; } = { circleMouseMouve: false, pageX: 0, circleLeft: '0%', el: null, }; let circleDragLeft = '0%'; // 圆圈被鼠标水平拖拽的距离(默认向左) document.addEventListener('mousemove', (e) => { if (circleTarget.circleMouseMouve) { const nowLeft = parseFloat(circleTarget.circleLeft) + getPercentage(e.pageX - circleTarget.pageX, wrapEle.width); if (nowLeft >= 100) { circleDragLeft = '100%'; } else if (nowLeft <= 0) { circleDragLeft = '0%'; } else { circleDragLeft = `${nowLeft}%`; } updateProgressBar(circleDragLeft); currentTimeByProgressBar(circleDragLeft); } }); document.addEventListener('mouseup', () => { circleTarget.circleMouseMouve = false; }); const circleMousedown = (e) => { circleTarget.el = e.target; // 圆圈自身 wrapEle.el = e.target.parentElement; // 圆圈父元素 sliderBar.el = e.target.nextElementSibling; // 圆圈的兄弟节点 circleTarget.circleLeft = e.target.style.left; circleTarget.pageX = e.pageX; circleTarget.circleMouseMouve = true; wrapEle.width = window.getComputedStyle(wrapEle.el, null).getPropertyValue('width'); }; // 只处理e.target是slider-wrap 或 slider-bar的情况 const clickSliderWrap = (e) => { if (e.target.getAttribute('target') === 'wrap') { wrapEle.el = e.target; circleTarget.el = e.target.firstElementChild; sliderBar.el = e.target.lastElementChild; } else if (e.target.getAttribute('target') === 'sliderbar') { sliderBar.el = e.target; circleTarget.el = e.target.previousElementSibling; wrapEle.el = e.target.parentElement; } else { return; } wrapEle.width = window.getComputedStyle(wrapEle.el, null).getPropertyValue('width'); const styleLeft = `${getPercentage(e.offsetX, wrapEle.width)}%`; updateProgressBar(styleLeft); currentTimeByProgressBar(styleLeft); }; // 播放或暂停音频 const playPauseAudio = (e) => { const iconDiv = findParentsEl(e.target.parentElement, 'icon-div'); wrapEle.el = iconDiv?.nextElementSibling; circleTarget.el = wrapEle.el.firstElementChild; sliderBar.el = wrapEle.el.lastElementChild; const parentAudio = findParentsEl(e.target.parentElement, 'audio'); if (parentAudio) { if (!audioData.playing) { audioPlay(); } else { audioPause(); } } }; // 计算百分比的分子 function getPercentage(num: number | string, den: number | string): number { const numerator = typeof num === 'number' ? num : parseFloat(num); const denominator = typeof den === 'number' ? den : parseFloat(den); return Math.round((numerator / denominator) * 10000) / 100; } // 查找自身或最近的一个父元素有className的 function findParentsEl(el: HTMLElement, classname: string): HTMLElement | null { // 注意avg className得到一个对象而非字符串 if (el && el.className?.split && el.className.split(' ').includes(classname)) { return el; } if (el.parentElement) { if (el.parentElement.className.split(' ').includes(classname)) { return el.parentElement; } else { return findParentsEl(el.parentElement, classname); } } return null; } function updateProgressBar(percentage: string) { circleTarget.el.style.left = percentage; sliderBar.el.style.width = percentage; } // 音频播放结束 const audioEnded = () => { audioData.playing = false; }; // 播放进度:表示audio正在播放,currentTime在更新 const audioTimeupdate = (e) => { audioData.currentTime = e.target.currentTime; progressBarBycurrentTime(); }; // 当媒体音频第一帧加载完成时 const audioLoadeddata = (e) => { audioEl = e.target; audioData.duration = e.target.duration; }; // 播放 function audioPlay() { if (audioEl) { audioEl.play(); audioData.playing = true; } } // 暂停播放 function audioPause() { if (audioEl) { audioEl.pause(); audioData.playing = false; } } // 进度条和音频播放进度进行关联 function progressBarBycurrentTime() { const progress = getPercentage(audioData.currentTime, audioData.duration); updateProgressBar(`${progress}%`); } function currentTimeByProgressBar(styleLeft: string) { if (audioEl) { const currentTime = (parseFloat(styleLeft) / 100) * audioData.duration; audioEl.currentTime = currentTime; audioData.currentTime = currentTime; } } const durationFormat = (num: number): string => { return durationToFormat(num, 'm:ss'); }; const durationToWidth = (num: number): string => { return `${Math.ceil((158 / 58) * num + 33)}px`; }; return { audioData, circleMousedown, clickSliderWrap, playPauseAudio, audioEnded, audioTimeupdate, audioLoadeddata, durationFormat, durationToWidth, }; },});</script><style scoped lang="scss">.glowe-audio { .audio { display: flex; justify-content: space-evenly; align-items: center; max-width: 308px; height: 48px; .icon-div { width: 20px; height: 20px; border-radius: 100%; margin-left: 22px; margin-right: 17px; .icon { cursor: pointer; } } .slider-wrap { position: relative; display: flex; align-items: center; height: 4px; max-width: 194px; min-width: 36px; width: 194px; background-color: rgba(23, 23, 23, 0.15); cursor: pointer; .circle { position: absolute; width: 14px; height: 14px; background-color: #555555; border-radius: 100%; cursor: pointer; user-select: none; transform: translate(-50%); } .slider-bar { height: 4px; max-width: 200px; background-color: #555555; } } .time-wrap { margin-left: 15px; margin-right: 18px; .time { font-size: 12px; } } }}</style>
以上是“如何使用Vue3+TS实现语音播放组件”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!