diff --git a/index.html b/index.html index 213e646..5ce5aee 100644 --- a/index.html +++ b/index.html @@ -22,13 +22,16 @@

- - -
- - - - +

+ + +

+

+ + + + +

diff --git a/player.css b/player.css index c2a4932..24e64e1 100644 --- a/player.css +++ b/player.css @@ -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 { diff --git a/player.js b/player.js index 48a6b97..9013638 100644 --- a/player.js +++ b/player.js @@ -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') {