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> <span id="album"></span>
</p> </p>
<div id="controls"> <div id="controls">
<input id="back" type="button" value="|&#x25c0;&#x25c0;"/> <p>
<input id="next" type="button" value="&#9654;&#9654;|"/> <input id="back" type="button" value="|&#x25c0;&#x25c0;"/>
<br /> <input id="next" type="button" value="&#9654;&#9654;|"/>
<label for="">Shuffle:</label> </p>
<input id="shuffle" type="checkbox"/> <p>
<label for="">Repeat: </label> <label for="shuffle">Shuffle:</label>
<input id="repeat" type="checkbox"/> <input id="shuffle" type="checkbox"/>
<label for="repeat">Repeat: </label>
<input id="repeat" type="checkbox"/>
</p>
</div> </div>
<p id="error"></p> <p id="error"></p>
</div> </div>

13
player.css
View File

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

8
player.js
View File

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