如何使用Vue3+TS实现语音播放组件
这篇文章主要介绍如何使用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秒的位置开始）
完整代码
以上是"如何使用Vue3+TS实现语音播放组件"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！
