一聚教程网:一个值得你收藏的教程网站

热门教程

Vue3+TS实现语音播放组件代码示例

时间:2022-06-29 01:51:43 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下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;
      
      max-
      min-
      
      background-color: rgba(23, 23, 23, 0.15);
      cursor: pointer;
      .circle {
        position: absolute;
        
        
        background-color: #555555;
        border-radius: 100%;
        cursor: pointer;
        user-select: none;
        transform: translate(-50%);
      }
      .slider-bar {
        
        max-
        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');
    };

然后,监听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');
 
      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秒的位置开始)

完整代码



热门栏目