'angular auido not working when page loaded

I want to add music to my website and it to start with the music. the music starts only when the picture is clicked. As you can see i want to start when page loaded but it cant be. I have to click publick changed function double times for start music? Why?

export class NavbarComponent implements OnInit{

sounddata:string = "/assets/images/sound-close.png";

auth:boolean = false;

audio = new Audio()


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

  this.changed();
}


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();
    }
  }
}
angularaudio


Solution 1:[1]

Recently browsers are strcting autoplay policies in order to improve the user experience. For example, if you are using Google Chrome, autoplay policies are:

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:
    • The user has interacted with the domain (click, tap, etc.).
    • On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
    • The user has added the site to their home screen on mobile or installed the PWA on desktop.
  • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohammad Babaei

Related Questions