Initial Commit
This commit is contained in:
commit
c309554dd0
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
*/
|
||||
7
README.md
Normal file
7
README.md
Normal file
@ -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
|
||||
71
audioPlayer.js
Normal file
71
audioPlayer.js
Normal file
@ -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);
|
||||
}
|
||||
38
index.html
Normal file
38
index.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Music Player</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<article>
|
||||
<aside>
|
||||
<img id="audioCoverArt" class="audioCoverArt" src="" alt="Cover"></img>
|
||||
</aside>
|
||||
<div class="content">
|
||||
<header>
|
||||
<h3>
|
||||
<a id="audioTrack">Track</a>
|
||||
</h3>
|
||||
By
|
||||
<a id="audioArtist">Artist</a>
|
||||
</header>
|
||||
</div>
|
||||
</article>
|
||||
<audio controls id="audioPlayer">
|
||||
Sorry, your browser doesn't support HTML5!
|
||||
</audio>
|
||||
<div class="queue-wrapper">
|
||||
<table class="playlist">
|
||||
<tbody id="audioPlaylist">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script src="musicList.js"></script>
|
||||
<script src="audioPlayer.js"></script>
|
||||
<script>audioPlayer();</script>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
12
musicList.js
Normal file
12
musicList.js
Normal file
@ -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"]
|
||||
]
|
||||
10
panel.html
Normal file
10
panel.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Music Player</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<iframe scrolling="no" src=index.html width=100% height=307px frameborder="no">
|
||||
</iframe>
|
||||
</html>
|
||||
91
styles.css
Normal file
91
styles.css
Normal file
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user