prevent sevral audios from playing at the same time in JavaScript

Question

I'm challenging my self to build this mini music app with no tutos, but I'm having a lot of problemes, so for now I'm trying to play each song by clicking on the name of the song I've built this array of objects and the function the play it but I can't use .paused in the if condition to check if there is any song playing

const btns = Array.from(document.querySelectorAll('.song-details'));
const music = [
    {
    img: 'img/2.jpg',
    id:1,
    songName: 'Am I Wrong',
    audio : new Audio('audio/Am-I-wrong.mp3'),
    lyrics: 'Am I wrong lyrics',
    btn: btns[1]
    },
    {
    img: 'img/3.jpg',
    id:2,
    songName: 'Sex,Drugs,Etc',
    audio : new Audio('audio/Sex-Drugs-Etc.mp3'),
    lyrics: 'Way Down We Go',
    
    },
    

    {
    img: 'img/7.jpg',
    id:3,
    songName: 'Me Myself & I ',
    audio : new Audio('audio/Me-Myself-I.mp3'),
    lyrics: 'Me Myself & I lyrics',
    },

    {
    img: 'img/4.jpg',
    id:4,
    songName: 'Blood In The Water',
    audio : new Audio('audio/Blood-In-The-Water.mp3'),
    lyrics: 'Blood In The Water lyrics',  
    },

    {
    img: 'img/3.jpg',
    id:5,
    songName: 'Eastside',
    audio : new Audio('audio/Eastside.mp3'),
    lyrics: 'Eastside lyrics',
    },

    {
    img: 'img/6.jpg',
    id:6,
    songName: 'Everything Black ',
    audio : new Audio('audio/Everything-Black.mp3'),
    lyrics: 'Everything Black  lyrics',
    
    },
    
]


const btnsLoop = () => {
    for (j = 0; j < btns.length; j++) {
        const musicObject = music[j];
        const { img, id, songName, audio, lyrics } = musicObject;
        
    
        btns[j].addEventListener('click', () => {
          
`
 if(musicObject.audio.paused && musicObject.audio.currentTime > 0 &&  !musicObject.audio.ended) {
                musicObject.audio.play();
             } else {
                musicObject.audio.pause();
             }
        })
    }
}

btnsLoop();

Answer 1

A possible solution for your specific use-case is to simply first pause all your audio objects and start playing the requested sound afterwards.

So in the click event listener's callback function get all audio objects stored inside the music array like:

music.forEach(element => {
});

and pause 'em:

music.forEach(element => {
    element.audio.pause();
});

Here's a simplified example:

const btns = Array.from(document.querySelectorAll('.song-details'));
const music = [{
    id: 1,
    songName: 'Am I Wrong',
    audio: new Audio('https://download.samplelib.com/mp3/sample-12s.mp3'),
  },
  {
    id: 2,
    songName: 'Sex,Drugs,Etc',
    audio: new Audio('https://download.samplelib.com/mp3/sample-15s.mp3'),
  }
];

for (j = 0; j < btns.length; j++) {
  const musicObject = music[j];
  const {
    id,
    songName,
    audio
  } = musicObject;
  btns[j].addEventListener('click', () => {
    music.forEach(element => {
      element.audio.pause();
    });
    musicObject.audio.play();
  });
}

<button class="song-details">Song A</button>
<button class="song-details">Song B</button>