diff --git a/css/style.css b/css/style.css index 36b4212..bfa1718 100644 --- a/css/style.css +++ b/css/style.css @@ -21,6 +21,7 @@ body { height: 350px; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; + padding: 0 5px; color: #fff; } @@ -30,7 +31,7 @@ body { } .tagA { - width: 400px; + width: 100%; height: 20px; border-radius: 5px 5px 0 0; border: #f54e4e; @@ -50,7 +51,7 @@ body { } .tagB { - width: 400px; + width: 100%; height: 20px; border-radius: 0; border: #f54e4e; @@ -64,7 +65,7 @@ body { } .tagC { - width: 400px; + width: 100%; height: 20px; border-radius: 0; border: #f54e4e; @@ -84,8 +85,8 @@ body { } .tagD { - width: 400px; - height: 20px; + width: 100%; + //height: 20px; border-radius: 0 0 5px 5px; border: #f54e4e; background-color: #fff; @@ -158,3 +159,49 @@ h1 { DIV { text-align: center } + +@-webkit-keyframes scroll { + 0% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + 100% { + -webkit-transform: translate(-100%, 0); + transform: translate(-100%, 0) + } +} + +@-moz-keyframes scroll { + 0% { + -moz-transform: translate(0, 0); + transform: translate(0, 0); + } + 100% { + -moz-transform: translate(-100%, 0); + transform: translate(-100%, 0) + } +} + +@keyframes scroll { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(-100%, 0) + } +} + +.marquee { + display: block; + width: 100%; + white-space: nowrap; + overflow: hidden; +} + +.marquee span { + display: inline-block; + padding-left: 100%; + -webkit-animation: scroll 15s infinite linear; + -moz-animation: scroll 15s infinite linear; + animation: scroll 15s infinite linear; +} diff --git a/index.html b/index.html index 1dab60b..4ffa984 100755 --- a/index.html +++ b/index.html @@ -11,8 +11,10 @@ integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"> + @@ -30,13 +32,19 @@ Artist -
ArtistName
+
+ ArtistName +
-
SongName
+
+ + SongName + +

diff --git a/js/radio.js b/js/radio.js index b9a7788..863a5bf 100644 --- a/js/radio.js +++ b/js/radio.js @@ -1,8 +1,3 @@ -var lastfm = new LastFM({ - apiKey : '59ab8307ec00a5ec90574ac91885798e', - apiSecret : 'e09bec215fdc3100ff998167e5b401f8', -}); - var MPDartist, MPDsong, MPDfile, MPDCurr; MPDartist = MPDsong = MPDfile = MPDCurr = 'empty'; @@ -27,22 +22,20 @@ function show() .then(function(temp){ // Получение информации из файла var array = temp.toString().split("\n"); - // вывод в консоль информации о файле - /* - for(i in array) { - console.log(array[i]);} */ // .replace - удаление пробелов в начале и конце строки MPDartist = array[0]; - MPDsong = array[1]; - MPDfile = array[2].replace(/^vk_kun\//,'').replace(/\.mp3/,''); + MPDsong = array[1]; + MPDfile = array[2].replace(/^vk_kun\//,'').replace(/\.mp3/,''); if (MPDartist == '' && MPDCurr != MPDfile) { MPDartist = MPDfile.replace(/\s-.*/,'').replace(/^\s*/,'').replace(/\s*$/,''); MPDsong = MPDfile.replace(/^.*\s-/,'').replace(/^\s*/,'').replace(/\s*$/,''); - getLastFM_info(MPDartist, MPDsong); + getArtistURL(MPDartist); + getSongURL(MPDartist, MPDsong); } else if (MPDCurr != MPDfile) { - getLastFM_info(MPDartist, MPDsong); + getArtistURL(MPDartist); + getSongURL(MPDartist, MPDsong); } MPDCurr = MPDfile; }); @@ -55,26 +48,21 @@ $(document).ready( } ); -function getLastFM_info(FMartist, FMsong) +// Процедура для получения ссылки на артиста в last.fm +function getArtistURL(MPDartist) { - lastfm.artist.getInfo({artist: FMartist}, {success: function(data){ - console.log(data.artist.url); - // формируем ссылку на артиста в LastFM - document.querySelector('form[name="artistURL"]').setAttribute('action', data.artist.url); - // выводим название артиста - $("#artistName").text(FMartist); - }, error: function(code, message){ - console.log('Error #'+code+': '+message);} - }); - - lastfm.track.getInfo({track: FMsong, artist: FMartist}, {success: function(data){ - console.log(data.track.url); - // формируем ссылку на артиста в LastFM - document.querySelector('form[name="songURL"]').setAttribute('action', data.track.url); - // выводим название трека - $("#songName").text(FMsong); - }, error: function(code, message){ - console.log('Error #'+code+': '+message);} - }); + $("#artistName").text(MPDartist); + MPDartist = encodeURI("https://www.last.fm/music/"+MPDartist.replace(/\s+/g,'+')); + document.querySelector('form[name="artistURL"]').setAttribute('action', MPDartist); + console.log(MPDartist) +} +// Процедура для получения ссылки на песню в last.fm +function getSongURL(MPDartist, MPDsong) +{ + $("#songName span").text(MPDsong); + MPDartist = MPDartist.replace(/\s+/g,'+'); + MPDsong = encodeURI("https://www.last.fm/music/"+MPDartist+"/_/"+MPDsong.replace(/\s+/g,'+')); + document.querySelector('form[name="songURL"]').setAttribute('action', MPDsong); + console.log(MPDsong) } diff --git a/js/radio_last_fm.js b/js/radio_last_fm.js new file mode 100644 index 0000000..08243d0 --- /dev/null +++ b/js/radio_last_fm.js @@ -0,0 +1,112 @@ +var lastfm = new LastFM({ + apiKey : '59ab8307ec00a5ec90574ac91885798e', + apiSecret : 'e09bec215fdc3100ff998167e5b401f8', +}); + +var MPDartist, MPDsong, MPDfile, MPDCurr; +MPDartist = MPDsong = MPDfile = MPDCurr = 'empty'; + +function show() +{ + + let xmlHttpRequest = function() { + return new Promise(function(resolve, reject) { + var xhr = new XMLHttpRequest(); + xhr.open('GET', '../trackname'); + var temp = 'empty'; + xhr.onload = function (e) { + if (xhr.readyState == 4 && xhr.status == 200) { + resolve(xhr.responseText); + } + }; + xhr.send(); + }); + }; + + xmlHttpRequest() + .then(function(temp){ + // Получение информации из файла + var array = temp.toString().split("\n"); + // вывод в консоль информации о файле + /* + for(i in array) { + console.log(array[i]);} */ + + // .replace - удаление пробелов в начале и конце строки + MPDartist = array[0]; + MPDsong = array[1]; + MPDfile = array[2].replace(/^vk_kun\//,'').replace(/\.mp3/,''); +/* + urlArtist = getArtistURL(MPDartist); + console.log(urlArtist); + urlSong = getSongURL(MPDartist, MPDsong); + console.log(urlSong); +*/ + if (MPDartist == '' && MPDCurr != MPDfile) { + MPDartist = MPDfile.replace(/\s-.*/,'').replace(/^\s*/,'').replace(/\s*$/,''); + MPDsong = MPDfile.replace(/^.*\s-/,'').replace(/^\s*/,'').replace(/\s*$/,''); + getArtistURL(MPDartist); + getSongURL(MPDartist, MPDsong); + //getLastFM_info(MPDartist, MPDsong); + } else if (MPDCurr != MPDfile) { + getArtistURL(MPDartist); + getSongURL(MPDartist, MPDsong); + //getLastFM_info(MPDartist, MPDsong); + } + MPDCurr = MPDfile; + }); +} + +$(document).ready( + () => { + show(); + setInterval(show, 5000); + } +); + +/* +function getLastFM_info(FMartist, FMsong) +{ + lastfm.artist.getInfo({artist: FMartist}, {success: function(data){ + //console.log(data.artist.url); + // формируем ссылку на артиста в LastFM + document.querySelector('form[name="artistURL"]').setAttribute('action', data.artist.url); + // выводим название артиста + $("#artistName").text(FMartist); + }, error: function(code, message){ + console.log('Error #'+code+': '+message);} + }); + + lastfm.track.getInfo({track: FMsong, artist: FMartist}, {success: function(data){ + //console.log(data.track.url); + // формируем ссылку на артиста в LastFM + document.querySelector('form[name="songURL"]').setAttribute('action', data.track.url); + // выводим название трека + $("#songName").text(FMsong); + }, error: function(code, message){ + console.log('Error #'+code+': '+message);} + }); + +} +*/ + +// Процедура для получения ссылки на артиста в last.fm +function getArtistURL(MPDartist) +{ + $("#artistName").text(MPDartist); + MPDartist = encodeURI("https://www.last.fm/music/"+MPDartist.replace(/\s+/g,'+')); + document.querySelector('form[name="artistURL"]').setAttribute('action', MPDartist); + console.log(MPDartist) + //return encodeURI(MPDartist); +} + +// Процедура для получения ссылки на песню в last.fm +function getSongURL(MPDartist, MPDsong) +{ + $("#songName").text(MPDsong); + MPDartist = MPDartist.replace(/\s+/g,'+'); + MPDsong = encodeURI("https://www.last.fm/music/"+MPDartist+"/_/"+MPDsong.replace(/\s+/g,'+')); + document.querySelector('form[name="songURL"]').setAttribute('action', MPDsong); + console.log(MPDsong) + //return encodeURI(MPDsong); +}