i have to click two time play a song

I am making a song player using plain html,css, and js, here i have to click two time to play a song

import data from './data.js';

const music = document.querySelector('audio');
const forward = document.getElementById('forward');
const back = document.getElementById('backward');
const play_push = document.getElementById('play_pause');

console.log(data[0]);
let isMusicPlaying=false;

const play =()=>{
    music.play();
    isMusicPlaying=false;
}

const pause = ()=>{
    music.pause();
    isMusicPlaying=true;
}
// play pause function

play_push.addEventListener("click", (e)=>{
   if(isMusicPlaying){
    play();
   }
   else {
    pause();
   }
     
})

// forward and backword functions
let  counter = 0;
forward.addEventListener("click", ()=>{
    counter++;
    music.src=data[counter].song;
    console.log(data[counter]);
})

backward.addEventListener("click",()=>{
    counter--;
    music.src=data[counter].song;
    console.log(data[counter]);
})

and this is my Html

<div class="container">
        <div class="musicCard">
            <div class="titals">
                <h2>name</h2>
                <h3>artist</h3>
            </div>
            <div class="cardImage">
                <img src="" alt="">
            </div>
            <audio src="./Data/songs/Akhiyan.mp3"></audio>
            <div class="controller">
                <div class="fa-solid fa-backward" id="backward"></div>
                <div class="fa-solid fa-play" id="play_pause"></div>
                <div class="fa-solid fa-forward" id="forward"></div>
            </div>
        </div>
    </div>

i have a folder which have songs
and a data.js file which has object array contain songs path and name
i dont know what wrong i seen correct to me