我想自定义audio元素的进度滑块外观,感觉默认的外观有些看不清。
首先我想让滑块始终显示当前播放位置的小圆点。默认情况下是需要鼠标悬停在滑块上方才能看到小圆点,这样不太方便看到进度;
然后我想隐藏小圆点后方显示的已经加载的进度,因为这个进度条颜色比较深,很容易与已经播放的进度搞混,特别是小圆点没有显示的情况下。
我尝试设置了CSS,但没有效果:
audio::-internal-track-segment-highlight-after {
display: none !important;
}
想知道除了自行编写一个音乐播放控件,还有没有别的写法。感谢大家的帮助。
https://www.chengyao.xyz/questions/9c45e33e-4907-4fd3-9d16-1292fe42c6ed
要自定义
<audio>
标签的进度滑块,您需要使用HTML、CSS和JavaScript(或者在Vue等框架中使用其绑定和事件处理机制)来创建一个自定义的进度条,并将其与音频播放的进度控制相绑定。以下是一个基本的步骤说明,以及一个简化的示例代码:步骤说明:
HTML结构:创建音频元素
<audio>
以及一个表示进度的<div>
或<input type="range">
作为进度条。CSS样式:自定义进度条的样式,包括背景、滑块等。
JavaScript逻辑:
timeupdate
事件,用于实时更新进度条。示例代码(纯JavaScript):
Vue.js中的实现会更加简洁,利用Vue的指令和方法来处理数据绑定和事件处理。
确保根据实际项目需求调整样式和逻辑细节。上述代码提供了一个基础的实现框架,实际应用中可能需要处理更多细节,如拖拽结束的处理、边界检查、触控设备的支持等。
来自通义千问
https://www.chengyao.xyz