通过 AudioContext 获取音频时长

当使用 JavaScript 操作音频时，我们通常需要获取音频的时长信息。在这里，我们将介绍如何使用 AudioContext 对象获取音频的时长。

以 url 作为入参

首先，我们需要创建一个 AudioContext 对象和一个 ajax 对象。

前者是 Web Audio API 中的一个接口，它提供了一个音频处理的环境，用于创建和连接音频处理模块，以及对音频进行解码和播放等操作。

随后我们会发送一个请求，并指定返回类型为 arraybuffer。

const audioContext = new AudioContext();
const audioRequest = new XMLHttpRequest();
const audioSrc = 'path/to/audio/file.mp3';

audioRequest.open('GET', audioSrc, true);
audioRequest.responseType = 'arraybuffer';

decodeAudioData是 AudioContext 的一个 api，decodeAudioData() 方法可用于异步解码音频文件中的 ArrayBuffer。ArrayBuffer 数据可以通过 XMLHttpRequest 和 FileReader 来获取。AudioBuffer 是通过 AudioContext 采样率进行解码的，然后通过回调返回结果。

audioRequest.onload = function() {
  audioContext.decodeAudioData(audioRequest.response)
    .then((buffer) => {
      console.log(buffer.duration);
    })
};

audioRequest.send();

以 File 作为入参

在这里我们使用了 FileReader 对象，该对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

readAsArrayBuffer 是 FileReader 对象提供的一个方法，用于读取指定的文件并将其作为二进制数据返回。该方法通常用于读取二进制文件，例如音频文件、视频文件、图像文件等。

const audioContext = new AudioContext();

const fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);

fileReader.onload = function() {
  audioContext.decodeAudioData(fileReader.result)
    .then((buffer) => {
      console.log(buffer.duration);
    })
};

以上就是使用 AudioContext 对象获取音频时长的方法。需要注意的是，这种方法只适用于支持 Web Audio API 的浏览器。

浏览器兼容性