javascript - 音乐播放器仅从一个文件夹播放

Question

我的JavaScript代码最近遇到了问题。它是一种音乐播放器，可以根据时间更改播放列表；

2 AM-6AM-播放音频音乐/ early_morning

6 AM-11AM-从音频/早晨播放音乐

11 AM-7PM-播放音频/白天的音乐

7 PM-10PM-从音频/黄金时间播放音乐

10 PM-2AM-从音频/夜总会播放音乐

这是有问题的代码:

// TIME OF DAY
var early_morning, morning, daytime, primetime, nightclub;
early_morning = new Date();
morning = new Date();
daytime = new Date();
primetime = new Date();
nightclub = new Date();
early_morning.setUTCHours(1);
morning.setUTCHours(5);
daytime.setUTCHours(10);
primetime.setUTCHours(18);
nightclub.setUTCHours(21);

// AUDIO PLAYER
var lastSong = null;
var selection = null;
if (early_morning > morning) {
    var playlist = ["audio/early_morning/1998_trk04.mp3", "audio/early_morning/adagio.mp3", "audio/early_morning/all_obsessed.mp3", "audio/early_morning/no_saints.mp3", "audio/early_morning/swingin_partay.mp3"];
}
if (morning > daytime) {
    var playlist = ["audio/morning/1998_trk04.mp3", "audio/morning/cool_groovings.mp3", "audio/morning/game_on.mp3", "audio/morning/half_pipe.mp3", "audio/morning/hope.mp3", "audio/morning/internationale!.mp3", "audio/morning/move_it.mp3", "audio/morning/muted.mp3", "audio/morning/no_saints.mp3", "audio/morning/swingin_partay.mp3"];
}
if (daytime > primetime) {
    var playlist = ["audio/primetime/1998_trk04.mp3", "audio/primetime/apocalypse(remix).mp3", "audio/primetime/bondicular(remix).mp3", "audio/primetime/choir_of_impending_breakbeat.mp3", "audio/primetime/cine2000.mp3", "audio/primetime/kompressor(remix).mp3", "audio/primetime/no_saints.mp3", "audio/primetime/orchestral_hardcore(remix).mp3", "audio/primetime/orchestral_hardcore.mp3", "audio/primetime/quest.mp3", "audio/primetime/swingin_partay.mp3", "audio/primetime/the_trap.mp3"];
}
if (primetime > nightclub) {
    var playlist = ["audio/daytime/1998_trk04.mp3", "audio/daytime/2009_trk7.mp3", "audio/daytime/4mp3", "audio/daytime/connected.mp3", "audio/daytime/funkerama.mp3", "audio/daytime/gritty_groove.mp3", "audio/daytime/internationale!(remix)", "audio/daytime/no_saints.mp3", "audio/daytime/smooth_strings_trip.mp3", "audio/daytime/sunset.mp3", "audio/daytime/swingin_partay.mp3"];
}
if (nightclub > early_morning) {
    var playlist = ["audio/nightclub/adagio.mp3", "audio/nightclub/apocalypse.mp3", "audio/nightclub/dance_9.mp3", "audio/nightclub/internationale!.mp3", "audio/nightclub/nu-soul_village(remix).mp3", "audio/nightclub/obsessive.mp3", "audio/nightclub/universe.mp3"]; 
}
var player = document.getElementById("player"); // Get Audio Element
player.autoplay = true;
player.addEventListener("ended", selectRandom); // Run function when song ends

function selectRandom() {
    while (selection == lastSong) { // Repeat until different song is selected
        selection = Math.floor(Math.random() * playlist.length);
    }
    lastSong = selection; // Remember last song
    player.src = playlist[selection]; // Tell HTML the location of the new Song

}

selectRandom(); // Select initial song
player.play(); // Start Song

问题是我的网站仅在播放夜总会文件夹中的音乐，而在发布此内容时，它应该在黄金时间文件夹中播放音乐。

我的代码有问题吗？如果是这样，我该如何解决？

谢谢，

-S

Answer 1

如果查看以下代码段，将看到符合条件的代码。设置时间的方式，唯一适用的条件就是nightclub > early_morning，这是因为当您使用setUTCHours时，它基本上是在设置日期并冻结该时间。想象一个简单的情况，您不使用日期对象，而只在这里使用数字。在此处查找如何使用调试器，并逐步执行代码以查看变量实际评估的结果。

// TIME OF DAY
var early_morning, morning, daytime, primetime, nightclub;
early_morning = new Date();
morning = new Date();
daytime = new Date();
primetime = new Date();
nightclub = new Date();
early_morning.setUTCHours(1);
morning.setUTCHours(5);
daytime.setUTCHours(10);
primetime.setUTCHours(18);
nightclub.setUTCHours(21);

// AUDIO PLAYER
var lastSong = null;
var selection = null;
if (early_morning > morning) {
    console.log('early_morning > morning')
}
if (morning > daytime) {
    console.log('morning > daytime')
}
if (daytime > primetime) {
    console.log('daytime > primetime')
}
if (primetime > nightclub) {
    console.log('primetime > nightclub')
}
if (nightclub > early_morning) {
    console.log('nightclub > early_morning')
}

这是一种更简单的方法，即根据预定义的时间间隔检查当前时间。这并不比您的方法更好或更糟，但是我只是用它来表明对于每个数字输入，应该只有一个输出。

const intervals = {
  2: "early_morning",
  3: "early_morning",
  4: "early_morning",
  5: "early_morning",
  6: "early_morning",
  7: "morning",
  8: "morning",
  9: "morning",
  10: "morning",
  11: "morning",
  12: "daytime",
  13: "daytime",
  14: "daytime",
  15: "daytime",
  16: "daytime",
  17: "daytime",
  18: "daytime",
  19: "daytime",
  20: "primetime",
  21: "primetime",
  22: "primetime",
  23: "nightclub",
  0: "nightclub",
  1: "nightclub",
  2: "nightclub",
}

const hour = new Date().getHours()
console.log(intervals[hour]);

const playlist = [{
    name: 'earlyMorning',
    times: [2, 3, 4, 5, 6],
    songs: ["audio/morning/1998_trk04.mp3", "audio/morning/cool_groovings.mp3", "audio/morning/game_on.mp3", "audio/morning/half_pipe.mp3", "audio/morning/hope.mp3", "audio/morning/internationale!.mp3", "audio/morning/move_it.mp3", "audio/morning/muted.mp3", "audio/morning/no_saints.mp3", "audio/morning/swingin_partay.mp3"]
  },
  {
    name: 'morning',
    times: [7, 8, 9],
    songs: ["audio/daytime/1998_trk04.mp3", "audio/daytime/2009_trk7.mp3", "audio/daytime/4mp3", "audio/daytime/connected.mp3", "audio/daytime/funkerama.mp3", "audio/daytime/gritty_groove.mp3", "audio/daytime/internationale!(remix)", "audio/daytime/no_saints.mp3", "audio/daytime/smooth_strings_trip.mp3", "audio/daytime/sunset.mp3", "audio/daytime/swingin_partay.mp3"]
  },
  {
    name: 'daytime',
    times: [12, 13, 14, 15, 16, 17, 18, 19],
    songs: ["audio/primetime/1998_trk04.mp3", "audio/primetime/apocalypse(remix).mp3", "audio/primetime/bondicular(remix).mp3", "audio/primetime/choir_of_impending_breakbeat.mp3", "audio/primetime/cine2000.mp3", "audio/primetime/kompressor(remix).mp3", "audio/primetime/no_saints.mp3", "audio/primetime/orchestral_hardcore(remix).mp3", "audio/primetime/orchestral_hardcore.mp3", "audio/primetime/quest.mp3", "audio/primetime/swingin_partay.mp3", "audio/primetime/the_trap.mp3"]
  },
  {
    name: 'primetime',
    times: [20, 21, 22],
    songs: ["audio/daytime/1998_trk04.mp3", "audio/daytime/2009_trk7.mp3", "audio/daytime/4mp3", "audio/daytime/connected.mp3", "audio/daytime/funkerama.mp3", "audio/daytime/gritty_groove.mp3", "audio/daytime/internationale!(remix)", "audio/daytime/no_saints.mp3", "audio/daytime/smooth_strings_trip.mp3", "audio/daytime/sunset.mp3", "audio/daytime/swingin_partay.mp3"]
  },
  {
    name: 'nightclub',
    times: [23, 0, 1, 2],
    songs: ["audio/nightclub/adagio.mp3", "audio/nightclub/apocalypse.mp3", "audio/nightclub/dance_9.mp3", "audio/nightclub/internationale!.mp3", "audio/nightclub/nu-soul_village(remix).mp3", "audio/nightclub/obsessive.mp3", "audio/nightclub/universe.mp3"]
  }
]

let nowPlaying = null;
// const player = document.getElementById("player"); // Get Audio Element
// player.autoplay = true;
// player.addEventListener("ended", selectRandom); // Run function when song ends

function selectRandom() {
  // destructure object because all we want is the song array
  const { songs } = playlist.find(list => list.times.includes(new Date().getHours()));
  // remove the currently playing song, or nothing if null
  const filteredSongs = songs.filter(song => song != nowPlaying);
  // pick a random song out of the remaining songs
  const selection =  filteredSongs[Math.floor(Math.random() * filteredSongs.length)]
  lastSong = selection; // Remember last song
  // player.src = selection; // Tell HTML the location of the new Song
  console.log(`Now playing ${selection}`);
}

selectRandom(); // Select initial song
//player.play(); // Start Song