Angular 2应用中获取上传MP3文件的时长

安全阿岳

2026-5-29

我完全理解你想要用Angular风格的方式获取上传MP3时长的需求——不想直接碰document.querySelector或者window.URL.createObjectURL，而是希望依托组件化的思路来实现。其实核心可以借助浏览器的AudioContext API来完成，不需要依赖DOM查询或者创建对象URL，完全在Angular组件/服务内部封装逻辑。

方案一：组件内直接实现

这种方式适合单个组件使用、不需要复用的场景：

1. 组件模板

保持你原本的@ViewChild绑定，添加accept属性限制音频文件：

<input #file type="file" class="form-control-file" (change)="onFileSelected($event)" accept="audio/*">

2. 组件类代码

利用FileReader读取文件的ArrayBuffer，再通过AudioContext解码音频数据获取时长：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-audio-upload',
  templateUrl: './audio-upload.component.html',
  styleUrls: ['./audio-upload.component.css']
})
export class AudioUploadComponent {
  @ViewChild('file') fileInput!: ElementRef<HTMLInputElement>;
  private audioContext: AudioContext | null = null;

  constructor() {
    // 初始化AudioContext，兼容不同浏览器前缀
    this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
  }

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (!input.files || input.files.length === 0) return;

    const file = input.files[0];
    // 校验是否为音频文件
    if (!file.type.startsWith('audio/')) {
      alert('请选择有效的音频文件');
      return;
    }

    const reader = new FileReader();
    reader.onload = (e) => {
      const arrayBuffer = e.target?.result as ArrayBuffer;
      // 解码音频数据获取时长
      this.audioContext?.decodeAudioData(
        arrayBuffer,
        (audioBuffer) => {
          const durationInSeconds = audioBuffer.duration;
          console.log('音频时长（秒）:', durationInSeconds);
          // 这里可以把时长存入你的FormGroup，比如：
          // this.yourFormGroup.get('duration')?.setValue(durationInSeconds);
        },
        (error) => {
          console.error('音频解码失败:', error);
        }
      );
    };
    reader.readAsArrayBuffer(file);
  }
}

方案二：封装成可复用服务（Angular最佳实践）

如果多个组件都需要获取音频时长，建议封装成服务，提升复用性：

1. 创建音频服务

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AudioService {
  private audioContext: AudioContext | null = null;

  constructor() {
    this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
  }

  /**
   * 获取音频文件的时长（秒）
   * @param file 上传的音频文件
   */
  getAudioDuration(file: File): Promise<number> {
    return new Promise((resolve, reject) => {
      if (!file.type.startsWith('audio/')) {
        reject(new Error('请选择音频类型的文件'));
        return;
      }

      const reader = new FileReader();
      reader.onload = (e) => {
        const arrayBuffer = e.target?.result as ArrayBuffer;
        this.audioContext?.decodeAudioData(
          arrayBuffer,
          (audioBuffer) => resolve(audioBuffer.duration),
          (error) => reject(error)
        );
      };
      reader.onerror = () => reject(new Error('文件读取失败'));
      reader.readAsArrayBuffer(file);
    });
  }
}

2. 在组件中使用服务

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { AudioService } from './audio.service';

@Component({
  selector: 'app-audio-upload',
  templateUrl: './audio-upload.component.html',
  styleUrls: ['./audio-upload.component.css']
})
export class AudioUploadComponent {
  yourFormGroup: FormGroup;

  constructor(
    private fb: FormBuilder,
    private audioService: AudioService
  ) {
    this.yourFormGroup = this.fb.group({
      audioFile: [],
      duration: []
    });
  }

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (!input.files || input.files.length === 0) return;

    const file = input.files[0];
    // 更新表单中的文件字段
    this.yourFormGroup.get('audioFile')?.setValue(file);

    // 调用服务获取时长
    this.audioService.getAudioDuration(file)
      .then(duration => {
        this.yourFormGroup.get('duration')?.setValue(duration);
        console.log('音频时长:', duration);
      })
      .catch(error => {
        console.error('获取时长失败:', error);
      });
  }
}

为什么这个方案符合你的需求？

完全没有使用document.querySelector或者window.URL.createObjectURL，所有操作都在Angular的组件/服务体系内完成；
借助@ViewChild和组件事件绑定，符合Angular的组件化开发思路；
不需要依赖音频元素的loadedmetadata事件，而是直接通过解码音频数据获取时长，避免了DOM元素相关的问题；
封装成服务后可以在整个应用中复用，符合Angular的最佳实践。

内容的提问来源于stack exchange，提问作者Peter Højlund Palluth