请教HTML的audio元素如何自定义进度滑块的外观

@Ta 06-12 23:52发布,06-12 23:53修改 5437点击

我想自定义audio元素的进度滑块外观,感觉默认的外观有些看不清。

image.png(18.25 KB)

首先我想让滑块始终显示当前播放位置的小圆点。默认情况下是需要鼠标悬停在滑块上方才能看到小圆点,这样不太方便看到进度;

然后我想隐藏小圆点后方显示的已经加载的进度,因为这个进度条颜色比较深,很容易与已经播放的进度搞混,特别是小圆点没有显示的情况下。

我尝试设置了CSS,但没有效果:

audio::-internal-track-segment-highlight-after {
  display: none !important;
}

想知道除了自行编写一个音乐播放控件,还有没有别的写法。感谢大家的帮助。

回复列表(3|隐藏机器人聊天)
  • @Ta / 06-13 06:19 / /
    被锁定
    层主 @咯叽 于 2024-06-16 15:54 删除了该楼层。
  • @Ta / 06-13 06:54 / /
    我觉得你需要一个chatgpt
  • @Ta / 06-13 08:59 / /

    https://www.chengyao.xyz/questions/9c45e33e-4907-4fd3-9d16-1292fe42c6ed

    要自定义<audio>标签的进度滑块,您需要使用HTML、CSS和JavaScript(或者在Vue等框架中使用其绑定和事件处理机制)来创建一个自定义的进度条,并将其与音频播放的进度控制相绑定。以下是一个基本的步骤说明,以及一个简化的示例代码:

    步骤说明:

    1. HTML结构:创建音频元素<audio>以及一个表示进度的<div><input type="range">作为进度条。

    2. CSS样式:自定义进度条的样式,包括背景、滑块等。

    3. JavaScript逻辑

      • 初始化音频元素和进度条的状态。
      • 监听音频的timeupdate事件,用于实时更新进度条。
      • 实现进度条的点击和拖动功能,以便用户能跳转播放位置。

    示例代码(纯JavaScript):

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* 简单的进度条样式 */
      .progress-bar {
        width: 100%;
        height: 10px;
        background-color: #ccc;
        position: relative;
      }
      .progress-filled {
        height: 100%;
        background-color: blue;
      }
      .progress-thumb {
        width: 10px;
        height: 10px;
        background-color: red;
        position: absolute;
        cursor: pointer;
      }
    </style>
    </head>
    <body>
    
    <audio id="audio" src="your-audio-source.mp3"></audio>
    <div class="progress-bar">
      <div class="progress-filled"></div>
      <div class="progress-thumb" style="left:0;"></div>
    </div>
    
    <script>
      const audio = document.getElementById('audio');
      const progressBar = document.querySelector('.progress-bar');
      const progressFilled = document.querySelector('.progress-filled');
      const progressThumb = document.querySelector('.progress-thumb');
    
      // 更新进度条
      function updateProgress() {
        const percent = (audio.currentTime / audio.duration) * 100;
        progressFilled.style.width = `${percent}%`;
        progressThumb.style.left = `${percent}%`;
      }
    
      // 设置进度
      function setProgress(event) {
        const rect = progressBar.getBoundingClientRect();
        const percent = Math.min(Math.max((event.clientX - rect.left) / rect.width, 0), 1);
        audio.currentTime = percent * audio.duration;
        updateProgress();
      }
    
      // 添加事件监听
      audio.addEventListener('timeupdate', updateProgress);
      progressBar.addEventListener('click', setProgress);
      progressBar.addEventListener('mousemove', (e) => {
        if (e.buttons === 1) { // 检查鼠标是否按下
          setProgress(e);
        }
      });
    
      // 开始播放
      audio.play();
    </script>
    
    </body>
    </html>
    

    Vue.js中的实现会更加简洁,利用Vue的指令和方法来处理数据绑定和事件处理。

    确保根据实际项目需求调整样式和逻辑细节。上述代码提供了一个基础的实现框架,实际应用中可能需要处理更多细节,如拖拽结束的处理、边界检查、触控设备的支持等。

    来自通义千问
    https://www.chengyao.xyz

添加新回复
回复需要登录