搜索 - 论坛

卷心菜 3楼回复老虎会游泳的我得找个时间给服务器重装一下系统 (2024-06-24/样/源)

宝塔有免费的nginx防火墙啊！开下防cc
https://www.chengyao.xyz

卷心菜 5楼回复爱特的腾讯云轻量应用服务器开始支持IPv6了 (2024-06-24/样/源)

为啥不内测北京，我刚从成都换到北京
https://www.chengyao.xyz

卷心菜 6楼回复卷心菜的升级笔记本 (2024-06-22/样/源)

@echo醉老仙，旧的有一条是1600的，一条1333的，导致最终频率是1333，现在换个1600的就成了1600了
@hik，我也是这么想的
https://www.chengyao.xyz

卷心菜 3楼回复卷心菜的升级笔记本 (2024-06-22/样/源)

@上善若水，支持m.2固态。现在有一台yoga14s，换整机感觉没必要，升级了将就用
https://www.chengyao.xyz

卷心菜 3楼回复 tasy5kg 的请教HTML的audio元素如何自定义进度滑块的外观 (2024-06-13/样/源)

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）：
<!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