Knah-Tsaeb
/
html5-music-player
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[chg] small improve ui

This commit is contained in:
Knah Tsaeb 2015-09-25 16:15:25 +02:00
parent a426ee4c6b
commit 50510791f2
3 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@ -22,13 +22,16 @@
<span id="album"></span>
</p>
<div id="controls">
<input id="back" type="button" value="|&#x25c0;&#x25c0;"/>
<input id="next" type="button" value="&#9654;&#9654;|"/>
<br />
<label for="">Shuffle:</label>
<input id="shuffle" type="checkbox"/>
<label for="">Repeat: </label>
<input id="repeat" type="checkbox"/>
<p>
<input id="back" type="button" value="|&#x25c0;&#x25c0;"/>
<input id="next" type="button" value="&#9654;&#9654;|"/>
</p>
<p>
<label for="shuffle">Shuffle:</label>
<input id="shuffle" type="checkbox"/>
<label for="repeat">Repeat: </label>
<input id="repeat" type="checkbox"/>
</p>
</div>
<p id="error"></p>
</div>

13
player.css
View File

@ -43,11 +43,14 @@ body > div {
order: 0;
width: 140px;
}
#player #infos {
#infos {
align-self: auto;
flex: 1 1 0;
order: 0;
}
#infos p {
margin: .3em 0;
}
#player #title {
margin: 0;
text-align: center;
@ -55,8 +58,8 @@ body > div {
word-wrap: break-word;
}
#player #back, #player #next {
margin: 0 .2em;
display: inline;
margin: 9px 5px 0 0;
font-family: Arial;
height: 25px;
width: 47px;
@ -100,7 +103,7 @@ body > div {
padding-left: 0;
}
#playlist > ul ul {
/* transition:height 1s linear;*/
/*transition:height 1s linear;*/
overflow: hidden;
height: 0;
}
@ -125,6 +128,10 @@ body > div {
font-style: normal;
color: white;
}
#playlist li:hover {
color: lime;
transition: color 150ms ease-in-out;
}
@media (max-width: 980px) {
#player {

8
player.js
View File

@ -31,6 +31,8 @@ function extToMime(ext) {
switch(ext) {
case "mp3":
return "audio/mpeg";
case "mp2":
return "audio/mpeg";
case "ogg":
return "audio/ogg";
case "aac":
@ -126,8 +128,12 @@ function populateList(arr, e, dir) {
var tags = ID3.getAllTags(file);
document.getElementById("artist").textContent = "Artist : " + tags.artist || "";
document.getElementById("album").textContent = "Album : " + tags.album || "";
title.textContent = tags.title || title.textContent;
window.document.title = title.textContent = tags.title || title.textContent;
});
} else {
document.getElementById("artist").textContent = "";
document.getElementById("album").textContent = "";
window.document.title = title.textContent;
}
last = music[track];
while (last.id != 'playlist') {