Angular JavaScript 如何在不下载音频文件的情况下仅下载音频预览信息？

Question

在自定义音频列表查看器的开发过程中，我遇到了一个问题，即对于非常长的音频文件列表，如果要同时下载一堆文件，则可能需要很长时间：

<cdk-virtual-scroll-viewport #scroller
                             autosize
                             class="content"
                             style="height: 100%">
  <div *cdkVirtualFor="let groupAudio of groupedAudios; let i = index" class="example-item">
    <div [class.selected]="true"
          class="btn btn-dark custom_obj-audio"
          [ngClass]="{'custom_obj-audio-button-green' : isGroupAudioSelected(i), 'custom_obj-audio-button-red': !isGroupAudioSelected(i)}"
          (click)="onSelectGroupAudio(i)">
      <p *ngFor="let name of getAudioName(i)" style="display: block; margin: 3px; word-wrap:normal; height: fit-content;">
        {{name}}
      </p>
      <div matListItemLine style="height: fit-content; width: 100%;">
        <div *ngFor="let custom_obj of groupAudio.custom_objs">
          <p>{{custom_obj.audioName}}</p>
          <audio controls>
            <source [src]="custom_obj.previewUrl" type="audio/wav">
          </audio>
        </div>
      </div>
    </div>
  </div>
</cdk-virtual-scroll-viewport>

正如您从示例 Angular 模板代码中看到的那样，我正在使用虚拟滚动并在每次滚动列表时添加新音频，此触发器开始从服务器加载音频文件 ...

我可以使用

src

事件将

onclick

添加到音频标签，但这意味着客户将看不到音频的预览信息，例如音频长度 ...

是否可以在不下载整个文件的情况下下载文件的预览信息？