Ionic 5 Angular 12自定义音频播放器状态异常及报错问题

问题现象 #

1. 点击任意音频播放后，所有音频项均显示暂停图标
2. 控制台抛出错误：core.mjs:6469 ERROR TypeError: Cannot read properties of undefined (reading '0')，播放/暂停图标显示异常

问题原因 #

1. displayPlay未初始化：仅声明类型未赋值，初始为undefined，访问displayPlay[i]时触发读取未定义属性的错误
2. 播放状态未隔离：播放新音频时未重置其他项状态，且未处理旧音频的暂停逻辑，导致状态判断混乱

修复方案 #

1. 初始化播放状态数组 #

在组件类中初始化displayPlay为布尔数组，确保每个音频项对应独立状态位：

// .ts文件
displayPlay: boolean[] = [];
audio: Audio | null = null; // 显式声明类型避免null/undefined问题

ngOnInit(): void {
  // 初始化状态数组为全false（若medias异步加载，需在数据回调中执行此逻辑）
  const filteredMedias = this.medias.filter(media => media.type === this.mediaType);
  this.displayPlay = Array(filteredMedias.length).fill(false);
}

2. 修正播放/暂停逻辑 #

修改playAudio和toggleAudio函数，实现状态隔离与音频实例管理：

playAudio(file: string, index: number) {
  // 暂停当前正在播放的音频
  if (this.audio) {
    this.audio.pause();
  }
  // 重置所有项的播放状态为暂停
  this.displayPlay = this.displayPlay.map(() => false);
  
  // 创建新音频实例并播放
  this.audio = new Audio(file);
  this.audio.play().catch(err => console.error('播放失败:', err));
  
  // 设置当前项为播放状态
  this.displayPlay[index] = true;
}

toggleAudio(index: number) {
  if (!this.audio) return;
  
  if (this.displayPlay[index]) {
    this.audio.pause();
    this.displayPlay[index] = false;
  } else {
    this.audio.play();
    this.displayPlay[index] = true;
  }
}

3. 优化模板状态判断 #

添加空值合并运算符，避免数组索引越界导致的异常：

<ion-slide *ngFor="let media of medias | filterByType: mediaType; let i = index">
    <ng-container>
       <ion-segment color="light">
          <ion-segment-button layout="icon-bottom" color="light"
          *ngIf="!(displayPlay[i] ?? false)" 
             (click)="playAudio(media?.image_path,i)">
            <ion-icon name="play" color="light"></ion-icon>
            <ion-label>Play</ion-label>
            </ion-segment-button>
        <ion-segment-button layout="icon-bottom" 
         *ngIf="displayPlay[i] ?? false" (click)="toggleAudio(i)">
            <ion-icon name="pause" color="light"></ion-icon>
            <ion-label>Pause</ion-label>
        </ion-segment-button>
    </ion-segment>
  </ng-container>
 </ion-slide>

说明 #

• 初始化displayPlay数组解决了未定义属性的报错问题
• 播放新音频时重置所有状态并暂停旧音频，避免了所有图标同步切换的异常
• 空值合并运算符??增强了模板的健壮性，处理数组索引越界的情况

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