Angular中如何仅获取音频预览信息而非下载完整音频文件？

针对你遇到的虚拟滚动下音频批量加载耗时长的问题，以下几种方案可以实现只获取音频预览信息（时长等）而不下载完整文件：

1. 利用HTML5 Audio的preload="metadata"属性 #

这是最简单直接的原生方案，设置该属性后，浏览器只会加载音频的元数据（时长、比特率等），不会下载完整文件，完美适配虚拟滚动场景。

修改模板中的audio标签：

<audio controls preload="metadata">
  <source [src]="custom_obj.previewUrl" type="audio/wav">
</audio>

若需要在代码中主动获取时长，可监听loadedmetadata事件：

<audio controls preload="metadata" (loadedmetadata)="saveAudioDuration($event, custom_obj)">
  <source [src]="custom_obj.previewUrl" type="audio/wav">
</audio>

组件中对应处理方法：

saveAudioDuration(event: Event, customObj: any) {
  const audioEl = event.target as HTMLAudioElement;
  customObj.duration = audioEl.duration; // 将时长存入对象，方便页面展示
}

2. 后端预计算元数据返回 #

如果对性能要求更高，可以让后端在音频上传/存储阶段，提前解析并存储音频的元数据（时长、文件大小等）。前端请求音频列表时，后端直接将这些元数据与previewUrl一同返回。

比如custom_obj新增duration字段后，前端可直接展示时长，同时延迟加载音频源：

<p>{{custom_obj.audioName}} - {{custom_obj.duration | number:'1:2'}}秒</p>
<audio controls [src]="custom_obj.isPlaying ? custom_obj.previewUrl : ''" (click)="togglePlay(custom_obj)">
</audio>

组件中通过togglePlay方法控制播放状态并赋值音频源，彻底避免预加载阶段的带宽消耗。

3. 手动发送HTTP范围请求解析元数据 #

若原生preload策略无法满足需求，可通过HTTP范围请求（Range Requests）仅获取音频文件的头部数据，自行解析WAV格式的元数据计算时长。

WAV的时长可通过文件数据大小和比特率推导，这些信息在文件前几百字节即可找到，Angular中实现示例：

import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(private http: HttpClient) {}

async calculateWavDuration(url: string): Promise<number> {
  const headers = new HttpHeaders({
    'Range': 'bytes=0-1023' // 请求前1024字节数据
  });

  const buffer = await this.http.get(url, { headers, responseType: 'arraybuffer' }).toPromise();
  const dataView = new DataView(buffer);
  
  // 解析WAV格式的fmt块与data块计算时长
  const offset = 20;
  const bitRate = dataView.getUint32(offset + 8, true);
  const dataSize = dataView.getUint32(offset + 16, true);
  
  return dataSize / (bitRate / 8); // 时长 = 数据字节数 / 每秒字节数
}

在虚拟滚动加载新元素时调用该方法，将计算出的时长赋值给对应对象，即可实现无完整下载获取预览信息。

内容的提问来源于stack exchange，提问作者Denis Kotov