从初学者到高手：H5 Audio音频拖动进阶指南

前端

2023-04-18 21:04:25

实现音频文件拖动：克服无总时长的挑战

音频文件拖动功能对于用户自如地控制播放至关重要。然而，在没有返回总时长的音频文件中，拖动似乎是一项不可能的任务。在本指南中，我们将深入探讨如何克服这一挑战，实现无缝的拖动体验。

为什么音频文件没有返回总时长？

音频文件不返回总时长通常是因为后端没有正确配置。更具体地说，后端的ContentType应该设置为audio/mp3或audio/mpeg，并且文件大小应该正确返回。如果这些条件不满足，音频标签将无法获取总时长信息。

实现拖动的两种方法

一旦后端正确配置，就可以使用两种主要方法来实现拖动：

HTML5 seek() 方法： 这种方法直接通过 HTML5 的 seek() 方法进行音频文件定位。它提供精确的定位，但需要浏览器支持。
JavaScript currentTime 属性： 这种方法利用 JavaScript 的 currentTime 属性，该属性表示当前播放时间。它更加灵活，可以在任何浏览器中使用，但定位精度可能略低。

代码示例

HTML5 seek() 方法：

<audio id="audio" src="audio.mp3">
  Your browser does not support the audio element.
</audio>

<script>
  const audio = document.getElementById("audio");

  // 监听拖动事件
  document.addEventListener("drag", function(e) {
    // 计算相对拖动位置
    const relativePos = e.clientX / e.target.clientWidth;

    // 计算目标时间
    const targetTime = relativePos * audio.duration;

    // 设置当前时间
    audio.currentTime = targetTime;
  });
</script>

JavaScript currentTime 属性：

<audio id="audio" src="audio.mp3">
  Your browser does not support the audio element.
</audio>

<script>
  const audio = document.getElementById("audio");

  // 监听拖动事件
  document.addEventListener("drag", function(e) {
    // 计算相对拖动位置
    const relativePos = e.clientX / e.target.clientWidth;

    // 计算目标时间
    const targetTime = audio.duration * relativePos;

    // 将拖动位置更新到 currentTime
    audio.currentTime = targetTime;
  });
</script>