Ember component is rendering the number of time the tracked property from component is changed

I have been trying to implement this project in ember. I am aware of the DDAU design paradigm. But in this particular project I wanted to have the AudioPlayer manage the pause and play state. Hence I used a component-class PlayerComponent to manage this state. I further attached a modifier to the audio tag and added an EventListener for canplay. I passed the isPlaying property from the component-class and I'm logging it to the console.
Instead of logging the the value of isPlaying once when the new media is loaded when I hit the next button (I am loading the media locally) it prints value of isPlaying the number of times its value was changed. I am not able to decipher why this is happening.

Here is the video showing the problem

Here is the Code:

1. index.hbs (templates/index.hbs)

<h1>Music Player</h1>
<Player
  @song=
  @next=
  @prev=
/>

2. index.js (controller/index.js)

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class IndexController extends Controller {
  songList = ['ukulele', 'summer', 'hey'];
  @tracked current = 0;
  
  @action
  next() {
    if (this.current == this.songList.length - 1) this.current = 0;
    else this.current++;
  }

  @action
  prev() {
    if (this.current == 0) this.current = this.songList.length - 1;
    else this.current--;
  }

  get currentSong() {
    return this.songList[this.current];
  }
}

3. player.hbs (components/player.hbs)

<div class='music-container ' id='music-container'>
  <div class='music-info'>
    <h4 id='title'></h4>
    <div class='progress-container' id='progress-container'>
      <div class='progress' id='progress'></div>
    </div>
  </div>

  <audio
    src='/music/.mp3'
    id='audio'
    
  ></audio>

  <div class='img-container'>
    <img src='images/.jpeg' alt='music-cover' id='cover' />
  </div>
  <div class='navigation'>
    <button id='prev' class='action-btn' type='button'>
      <i class='fas fa-backward' ></i>
    </button>
    <button id='play' class='action-btn action-btn-big' type='button'>
      <i
        class='fas '
        
      ></i>
    </button>
    <button id='next' class='action-btn' type='button'>
      <i class='fas fa-forward' ></i>
    </button>
  </div>
</div>

4. player.js (components/player.js)

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class PlayerComponent extends Component {
  @tracked isPlaying = false;
  @action
  playPause() {
    if (this.isPlaying) this.isPlaying = false;
    else this.isPlaying = true;
    this.playSong(this.isPlaying);
  }
  playSong(cond) {
    let audioElement = document.querySelector('#audio');
    if (cond) audioElement.play();
  }
}

4. song-change.js (modifiers/song-change.js)

import { modifier } from 'ember-modifier';

export default modifier(function songChange(element, [isplaying]) {
  // element.addEventListener('canplay', onChange);
  element.addEventListener('canplay', loaded);

  function loaded() {
    console.log(isplaying);
  }
});