all repos — retro-website @ 345e76b0ac9042616f4a3c5f44c9f72101713d6f

res/js/music.js (view raw)

  1const music = document.getElementById("music");
  2const source = document.getElementById("music-source");
  3const music_base = document.getElementById("music-player-base");
  4const music_song = document.getElementById("music-player-song");
  5const music_song_text = document.getElementById("song-text");
  6const clickAudio1 = new Audio(url="res/sfx/os/click2.ogg");
  7const clickAudio2 = new Audio(url="res/sfx/os/click1.ogg");
  8
  9const tracks = {
 10    "awesome": {
 11        file_name: "AwesomeRapBeat.opus",
 12        track_name: "Awesome Rap Beat",
 13        track_author: "Jay Tholen",
 14        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 15    },
 16    "dream": {
 17        file_name: "WeFellIntoaDream.opus",
 18        track_name: "We Fell Into a Dream",
 19        track_author: "Jay Tholen",
 20        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 21    },
 22    "earmint": {
 23        file_name: "Earmint.opus",
 24        track_name: "Earmint",
 25        track_author: "Jay Tholen",
 26        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 27    },
 28    "forest": {
 29        file_name: "ForestFeast.opus",
 30        track_name: "Forest Feast",
 31        track_author: "Jay Tholen",
 32        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 33    },
 34    "gtrock": {
 35        file_name: "GoodtimeRock.opus",
 36        track_name: "Goodtime Rock",
 37        track_author: "Jay Tholen",
 38        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 39    },
 40    "katie": {
 41        file_name: "KatiesKuddlyKatKorner.opus",
 42        track_name: "Katie's Kuddly Kat Korner",
 43        track_author: "Jay Tholen",
 44        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 45    },
 46}
 47
 48const page_tracks = {
 49    "about": "awesome",
 50    "anime": "dream",
 51    "dragonquest": "forest",
 52    "earthbound": "gtrock",
 53    "gf": "katie",
 54    "indies": "earmint",
 55    "zelda": "forest",
 56}
 57
 58let currentTrack = "";
 59let showTimeout, hideTimeout;
 60
 61function formatTrack(track) {
 62    return `${track.track_author} - ${track.track_name} (${track.track_from})`;
 63}
 64
 65function showTitle(){
 66    if (!currentTrack) return;
 67    hideTitle();
 68    clearTimeout(showTimeout);
 69    clearTimeout(hideTimeout);
 70    
 71    showTimeout = setTimeout(() => { 
 72        music_song_text.textContent = formatTrack(tracks[currentTrack]);
 73        music_song.style.top = "0";
 74    }, 400);
 75
 76    hideTimeout = setTimeout(() => hideTitle(), 3_400);
 77}
 78
 79function hideTitle(){
 80    music_song.style.top = "100%";
 81}
 82
 83function playPause(toggle=play, track=currentTrack) {
 84    let changed = false;
 85    if (track != currentTrack) {
 86        changed = true;
 87        currentTrack = track;
 88        source.src = "res/mus/" + tracks[currentTrack].file_name;
 89        music.load();
 90    }
 91
 92    if (!controlsEnabled)
 93        return;
 94    if (toggle){
 95        music_base.classList.remove("player-play");
 96        music.pause();
 97        play = false
 98        hideTitle();
 99    }
100    else {
101        music_base.classList.add("player-play");
102        music.play().catch(() => {});
103        if(changed)
104            showTitle();
105        play = true
106    }
107}