HowlerJS 播放列表：检查特定歌曲是否正在播放

Question

我正在尝试 HowlerJS playlist code。我想制作一个按钮来检查播放列表中的特定歌曲是否正在播放，如果是，则在单击时隐藏一行文本。我对这些东西不是很了解，所以我一直在黑暗中拍摄，试图让它发挥作用。是否可以使用此播放列表代码并制作我需要的按钮类型？这是播放列表和隐藏文本行的代码：

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>

如果歌曲是单独定义的，这会很容易，但由于歌曲的检索和定义方式，我无法理解：

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

sound.play();

这是我使用的完整代码：https://jsfiddle.net/vfozrn9d/1/

有什么方法可以指定应检查文件“rave_digger”是否有“.playing()”？

Answer 1

查看了 github 上的 Howler player.js 代码，看起来播放器对象将公开一个 playlist 数组和一个 index 属性

因此您可以编写一个函数来检查播放列表以查看某个曲目是否正在播放

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;
}

那么你的checksound函数就会变成

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

HowlerJS 播放列表：检查特定歌曲是否正在播放

HowlerJS playlist: checking if a specific song is playing

javascript

jquery

html5-audio

howler.js

web-audio-api