如何用Vue3写播放器
导读:本文共5967.5字符,通常情况下阅读需要20分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: TODO实现播放/暂停;实现开始/结束时间及开始时间和滚动条动态跟随播放动态变化;实现点击进度条跳转指定播放位置;实现点击圆点拖拽滚动条。页面布局及 css 样式如下<template> <div class="song-item"> <audio src="" /> <!--... ...
目录
(为您整理了一些要点),点击可以直达。TODO
实现播放/暂停;
实现开始/结束时间及开始时间和滚动条动态跟随播放动态变化;
实现点击进度条跳转指定播放位置;
实现点击圆点拖拽滚动条。
页面布局及 css
样式如下
思路:给 ”播放“ 注册点击事件,在点击事件中通过 audio
的属性及方法来判定当前歌曲是什么状态,是否播放或暂停,然后声明一个属性同步这个状态,在模板中做出判断当前应该显示 ”播放/暂停“。
关键性 api:
audio.paused
:当前播放器是否为暂停状态
audio.play()
:播放
audio.pause()
:暂停
最后把属性及事件应用到模板中去。
思路:获取当前已经播放的时间及总时长,然后再拿当前时长 / 总时长及得到歌曲播放的百分比即滚动条的百分比。通过侦听 audio
元素的 timeupdate
事件以做到每次当前时间改变时,同步把 DOM 也进行更新。最后播放完成后把状态初始化。
关键性api:
audio.currentTime
:当前的播放时间;单位(s)
audio.duration
:音频的总时长;单位(s)
timeupdate
:currentTime
变更时会触发该事件。
思路:给滚动条注册鼠标点击事件,每次点击的时候获取当前的 offsetX
以及滚动条的宽度,用宽度 / offsetX
最后用总时长 * 前面的商就得到了我们想要的进度,再次更新进度条即可。
关键性api:
event.offsetX
:鼠标指针相较于触发事件对象的 x 坐标。
思路:使用 hook
管理这个拖动的功能,侦听这个滚动条的 鼠标点击、鼠标移动、鼠标抬起事件。
点击时: 获取鼠标在窗口的 x
坐标,圆点距离窗口的 left
距离及最大的右移距离(滚动条宽度 - 圆点距离窗口的 left
)。为了让移动式不随便开始计算,在开始的时候可以弄一个开关 flag
移动时: 实时获取鼠标在窗口的 x
坐标减去 点击时获取的 x
坐标。然后根据最大移动距离做出判断,不要让它越界。最后: 总时长 * (圆点距离窗口的 left
+ 计算得出的 x
/ 滚动条长度) 得出百分比更新滚动条及进度
抬起时:将 flag
重置。
最后调用这个 hook
如何用Vue3写播放器的详细内容,希望对您有所帮助,信息来源于网络。