在进度条(搜索栏)的末尾添加一个移动友好的“点抓取”到自定义htm5音频播放器

<button class="grab-button">点抓取</button>

.grab-button {
  background-color: #f2f2f2;
  border: none;
  color: #333;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
}

// 获取音频元素
var audio = document.getElementById('my-audio');

// 获取进度条元素
var progressBar = document.getElementById('progress-bar');

// 获取点抓取按钮元素
var grabButton = document.querySelector('.grab-button');

// 点击按钮时的事件处理函数
grabButton.addEventListener('click', function() {
  // 获取当前音频的播放位置
  var currentTime = audio.currentTime;
  
  // 设置进度条的值为当前播放位置
  progressBar.value = currentTime;
  
  // 更新音频的播放位置
  audio.currentTime = currentTime;
});