commit c309554dd04336cf2c34d00234ab49b94a1556af Author: Anon Date: Mon Apr 17 20:54:28 2023 -0700 Initial Commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..355164c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..9248935 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +#README + +A simple Javascript and HTML5 music player for fedi instances. + +Intended to be displayed in an iframe in the optional panel for pleroma instances. + +git clone the repository into instance/panel.html diff --git a/audioPlayer.js b/audioPlayer.js new file mode 100644 index 0000000..155e6e7 --- /dev/null +++ b/audioPlayer.js @@ -0,0 +1,71 @@ +function appendMusicList(el, title, time) +{ + const tr = document.createElement("tr") + const tdtitle = document.createElement("td") + const tdtime = document.createElement("td") + const div = document.createElement("div") + + tr.setAttribute("id", "queue-item") + tdtitle.setAttribute("class", "title") + tdtime.setAttribute("width", "50") + tdtime.innerHTML = time + div.setAttribute("colspan", "2") + div.innerHTML = title + + tdtitle.appendChild(div) + tr.appendChild(tdtitle) + tr.appendChild(tdtime) + el.appendChild(tr) + + return tr +} + +function audioPlayer() +{ + const aPlay = document.getElementById("audioPlayer"); + const aList = document.getElementById("audioPlaylist"); + const aTrack = document.getElementById("audioTrack"); + const aArtist = document.getElementById("audioArtist"); + const aCoverArt = document.getElementById("audioCoverArt") + + var currentSong = null; + + function changeSong(idx, doplay=true) + { + if (idx === currentSong) + { + aPlay.play() + return + } + const aListLinks = aList.getElementsByTagName("tr"); + if (currentSong !== null) + { + aListLinks[currentSong].classList.remove("current-song"); + } + currentSong = idx % aListLinks.length + aListLinks[currentSong].classList.add("current-song"); + + const aSelected = aListLinks[currentSong].getElementsByTagName("div")[0] + aPlay.src = musicList[idx][0] + aTrack.innerHTML = musicList[idx][1] + aArtist.innerHTML = musicList[idx][2] + aCoverArt.src = musicList[idx][4] + if (doplay === true) + { + aPlay.play(); + } + } + + musicList.forEach((value, index, array) => { + const el = appendMusicList(aList, value[1], value[3]) + el.addEventListener("click", () => { + // el.preventDefault(); + changeSong(index); + }); + }) + + aPlay.addEventListener("ended", function(){ + changeSong(currentSong + 1); + }) + changeSong(0, false); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..b8a2f72 --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + Music Player + + + +
+ + +
+ + + +
+
+ + + +
+ + diff --git a/musicList.js b/musicList.js new file mode 100644 index 0000000..550b0b3 --- /dev/null +++ b/musicList.js @@ -0,0 +1,12 @@ +const musicList = [ + ["media/declare_war_on_all_vocaloid", "Declare War on All Vocaloid", "Sukone Tei", "05:53", "art/declare_war_on_all_vocaloid.png"], + ["media/chains.m4a", "Chains", "Sukone Tei", "05:46", "art/chains.png"], + ["media/loyalty.opus", "Verheerender - LOYALTY", "Azur Lane", "01:45", "art/loyalty.jpg"], + ["media/true_love_restraint.mp3", "True Love Restraint", "Len Kagamine", "03:35", "art/true_love_restraint.jpg"], + ["media/tei.opus", "Tei", "Sukone Tei", "04:18", "art/tei.png"], + ["media/insanity.mp3", "iNSaNiTY", "Teto Sakebi + Ritsu Kire", "04:55", "art/insanity.png"], + ["media/youre_seriously_mad.flac", "You’re Seriously Mad? I’m Not Mistaken Here?", "MAYU", "03:50", "art/your_seriously_mad.png"], + ["media/psychotic_love_song.flac", "Psychotic Love Song", "Sukone Tei", "05:02", "art/psychoticlovesong.png"], + ["media/rotten_girl.mp3", "Rotten Girl, Grotesque Romance", "Hatsune Miku", "04:10", "art/grotesquromance.png"], + ["media/monopolizing_romance.flac", "Monopolizing Romance", "Hatsune Miku", "03:36", "art/monopolizing_romance.png"] +] diff --git a/panel.html b/panel.html new file mode 100644 index 0000000..1506d25 --- /dev/null +++ b/panel.html @@ -0,0 +1,10 @@ + + + + + Music Player + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..38d6408 --- /dev/null +++ b/styles.css @@ -0,0 +1,91 @@ +* { + margin: 0; + padding: 0; +} + +html { + height: 100%; +} + +body { + font-family: sans-serif; + height: 100%; +} + +main { + height: 100%; + display: flex; + flex-direction: column; +} + +aside { + padding: .5em; + float: right; + max-width: 120px; + max-height: 120px; + position: absolute; + right: 0; + top: 0; +} + +img.audioCoverArt{ + height: 60px; + width: 60px; +} + +article{ + background-color: #1b1c1d; + color: white; + position: relative; + display: block; + padding: 1.25em; +} + +.queue-wrapper { + flex: 1; + padding: .5em; + background-color: #2f3030; + height: 100%; + overflow-y: auto; +} + +table { + border-collapse: collapse; + width: 100%; +} + +td { + padding: .5em; + font-size: 90%; + border: 0px; +} + +.current-song * { + background-color: white; + color: black; +} + +tr:hover { + background-color: #1b1c1d; + color: white; +} + +tr { + cursor: pointer; + color: white; +} + +audio { + width: 100%; + vertical-align: bottom; + background-color: #1b1c1d; +} + +audio::-webkit-media-controls-enclosure{ + border-radius: 0px; + max-height: 40px; +} + +audio::-webkit-media-controls-play-button { + background-color: lightblue; +}