I am creating a music player using basic html, css, and javascript. However, I have noticed that I have to click twice in order 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();
}
})
// functions for moving forward and backward
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]);
})
Below is my HTML code:
<div class="container">
<div class="musicCard">
<div class="titles">
<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 containing songs and a 'data.js' file with an object array that includes the paths and names of the songs. Despite checking everything, I can't seem to figure out what's wrong with my code.