all repos — retro-website @ 01cd37a6289e6c6786134951c3b0adb291712ea4

res/script.js (view raw)

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