Angular页面加载时音频无法自动播放，需两次调用changed函数才可启动的原因分析

首先咱们来拆解你遇到的问题：为什么需要两次调用changed()才能启动音乐？主要有两个核心原因：

1. 浏览器自动播放政策的限制 #

现代主流浏览器（Chrome、Firefox、Safari等）都有严格的自动播放政策——禁止页面在没有用户主动交互（比如点击、触摸）的情况下自动播放音频/视频。你在ngOnInit里直接调用changed()触发audio.play()，属于页面加载时的无交互自动触发，这个播放请求会被浏览器直接拦截，导致第一次播放完全无效。

2. 初始状态的逻辑矛盾 #

你的初始状态设置存在冲突：

• 初始auth = false（对应代码里的“未播放”状态）
• 但sounddata却设为关闭图标（/assets/images/sound-close.png），而代码里auth=true才对应关闭图标（代表正在播放）。

这种状态不匹配会导致：

• 页面加载后，用户看到的是“关闭图标”，但实际音频并未播放
• 第一次调用changed()（不管是ngOnInit里的自动调用还是用户点击），auth切换为true，执行play()但被浏览器拦截，图标仍显示关闭
• 第二次调用changed()时，auth切回false，执行pause()（但音频本来就没播放，毫无作用），图标切换为打开
• 第三次调用才会再次切回auth=true，此时因为有用户点击的交互，play()才能被浏览器允许，音频终于启动

修复方案 #

步骤1：修正初始状态的逻辑一致性 #

把初始状态和图标对应关系理清楚：未播放时显示“打开图标”，播放时显示“关闭图标”：

sounddata:string = "/assets/images/sound-open.png"; // 初始为未播放状态，对应打开图标
auth:boolean = false; 

步骤2：移除无交互的自动播放调用 #

删掉ngOnInit里的this.changed()，避免浏览器拦截无效的播放请求：

ngOnInit(){ 
  this.audio.src = "/assets/images/snowambient.mp3"; 
  this.audio.load(); 
  this.audio.loop = true; 
  // 移除 this.changed(); 不再尝试无交互自动播放
} 

步骤3：（可选）实现“首次用户交互后自动播放” #

如果你还是想接近“自动播放”的效果，可以监听页面的首次点击事件，用户只要点击页面任意位置就触发播放：

ngOnInit(){ 
  this.audio.src = "/assets/images/snowambient.mp3"; 
  this.audio.load(); 
  this.audio.loop = true; 

  // 监听页面首次点击，触发播放后移除监听
  const playOnFirstClick = () => {
    this.changed();
    document.removeEventListener('click', playOnFirstClick);
  };
  document.addEventListener('click', playOnFirstClick);
} 

修复后的完整代码 #

export class NavbarComponent implements OnInit{ 
  sounddata:string = "/assets/images/sound-open.png"; 
  auth:boolean = false; 
  audio = new Audio() 

  ngOnInit(){ 
    this.audio.src = "/assets/images/snowambient.mp3"; 
    this.audio.load(); 
    this.audio.loop = true; 
    // 可选：取消注释下面的代码，实现首次点击自动播放
    // const playOnFirstClick = () => {
    //   this.changed();
    //   document.removeEventListener('click', playOnFirstClick);
    // };
    // document.addEventListener('click', playOnFirstClick);
  } 

  public changed(){ 
    this.auth = !this.auth; 
    console.log("im here") 
    if(this.auth == true){ 
      console.log("im here2") 
      this.sounddata = "/assets/images/sound-close.png"; 
      return this.audio.play(); 
    } else if(this.auth == false){ 
      this.sounddata = "/assets/images/sound-open.png"; 
      return this.audio.pause(); 
    } 
  } 
}

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