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