HowlerJS playlist: checking if a specific song is playing

Question

I'm trying to experiment with a HowlerJS playlist code. I would like to make a button that checks if a specific song in the playlist is playing, and if so, hide a line of text when clicked. I'm not very knowledgeable with these things, so I've been shooting in the dark trying to get it working. Is it possible to use this playlist code and make the type of button I need? This is the playlist and the code to hide the line of text:

var player = new Player([
  {
    title: 'Rave Digger',
    file: 'rave_digger',
    howl: null
  },
  {
    title: '80s Vibe',
    file: '80s_vibe',
    howl: null
  },
  {
    title: 'Running Out',
    file: 'running_out',
    howl: null
  }
]);


function checksound() {
   if(rave_digger.playing()){
$(".note").hide();
   }    
}

<div class="button" onclick="checksound();">Click here</div>

<div class="note">remove this text if Rave Digger is playing</div>

This would be easy if the songs were individually defined, but I can't figure it out due to how the songs are retrieved and defined:

sound = data.howl = new Howl({
src: ['./audio/' + data.file + '.webm', './audio/' + data.file + '.mp3'],
html5: true,});}

sound.play();

Here is the full code I am using: https://jsfiddle.net/vfozrn9d/1/

Is there any way I could specify that the file "rave_digger" should be checked for ".playing()"?

Answer 1

Had a look at the Howler player.js code on github and it looks like the player object will expose a playlist array and an index property

so you could write a function that checks the playlist to see if a certain track is playing

function isTrackPlaying(filename) {
  // assume the track is not playing
  let playing = false;

  // Retrieve the currently active track listing from the playlist
  const track = player.playlist[player.index];

  // is it the track we are looking for?
  if(track.file == filename) {
    // has it been initialised, and is it playing?
    playing = track.howl && track.howl.playing(); 
  }

  return playing;
}

Then your checksound function would become

function checksound() {
   if(isTrackPlaying('rave_digger')){
     $(".note").hide();
   }    
}