random-music-js/script.js at master · innermost47/random-music-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import { startDraw, stopDraw } from "./draw.js";
import {
  start,
  stopSound,
  timer as eightBitsTimer,
  setPaused as setEightBitsPaused,
} from "./eightBits.js";
import {
  startSine,
  stopSine,
  timer as sineTimer,
  setPaused as setSinePaused,
} from "./sine.js";
import { audioCtx } from "./utils/utils.js";

const play = document.getElementById("play");
const stopSong = document.getElementById("stop");
const startSongs = [start, startSine];
const stopSongs = [stopSound, stopSine];
const songChoices = document.getElementById("songChoice");
const modal = document.getElementById("welcome-modal");
const helpBtn = document.getElementById("help");

let isPlaying = false;
let isPaused = false;
let songChoice = songChoices.value;
let playingSong;

function stopAll() {
  isPlaying = false;
  isPaused = false;
  stopSongs[playingSong]();
  stopDraw();

  play.classList.remove("playing");
  const icon = play.querySelector("i");
  if (icon) {
    icon.className = "bi bi-play-fill me-2";
  }
}

songChoices.addEventListener("input", () => {
  songChoice = songChoices.value;
});

play.addEventListener("click", () => {
  if (!isPlaying) {
    isPlaying = true;
    isPaused = false;
    startSongs[songChoice]();
    playingSong = songChoice;
    startDraw();

    play.classList.add("playing");
    const icon = play.querySelector("i");
    if (icon) {
      icon.className = "bi bi-pause-fill me-2";
    }
  } else {
    isPaused = !isPaused;
    const currentTimer = playingSong === "0" ? eightBitsTimer : sineTimer;
    const setPaused = playingSong === "0" ? setEightBitsPaused : setSinePaused;

    if (isPaused) {
      setPaused(true);
      if (audioCtx && audioCtx.state === "running") {
        audioCtx.suspend();
      }
      if (currentTimer) {
        currentTimer.pause();
      }
      const icon = play.querySelector("i");
      if (icon) {
        icon.className = "bi bi-play-fill me-2";
      }
    } else {
      setPaused(false);
      if (audioCtx && audioCtx.state === "suspended") {
        audioCtx.resume();
      }
      if (currentTimer) {
        currentTimer.resume();
      }
      const icon = play.querySelector("i");
      if (icon) {
        icon.className = "bi bi-pause-fill me-2";
      }
    }
  }
});

stopSong.addEventListener("click", () => {
  stopAll();
});

if (!localStorage.getItem("has-seen-modal")) {
  setTimeout(() => {
    const welcomeModal = new bootstrap.Modal(modal);
    welcomeModal.show();

    modal.addEventListener("hidden.bs.modal", () => {
      localStorage.setItem("has-seen-modal", true);
    });
  }, 100);
}

helpBtn.addEventListener("click", () => {
  const welcomeModal = new bootstrap.Modal(modal);
  welcomeModal.show();
});