API tools faq
paste
Advertisement
AntVenom

Song Fade In + Out. For use w/ OBS

AntVenom
Jan 6th, 2020
554
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.04 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!-- Max was here -->
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  7.         <style>
  8.             @import 'https://fonts.googleapis.com/css?family=Fjalla+One';
  9.             .ticker {
  10.                 padding: 10px;
  11.                 font-family: 'Fjalla ONe', 'Helvetica', sans-serif;
  12.                 transition: opacity 1s;
  13.                 -webkit-transition: opacity 1s;
  14.                 /* Safari */
  15.                 opacity:1;
  16.                 width: auto;
  17.                 color: white;
  18.                 text-shadow: 0px 0 10px black, 0 0px 0px black, 0px 0 0px black, 0 0px 10px black;
  19.                 font-size: 40px;
  20.                 /* Font size. */
  21.                
  22.                 text-align: right;
  23.                 /* text-transform: uppercase; */
  24.             }
  25.             .fade {
  26.                 opacity:0;
  27.             }
  28.         </style>
  29.     </head>
  30.  
  31.     <body>
  32.         <div class='ticker' id='song'></div>
  33.        
  34.         <script>
  35.             var httpRequest;
  36.             var showFor = 12; // Seconds
  37.             var fadeLength = 1 // Seconds
  38.             var updateInterval = 3; // Seconds
  39.             var currentSong;
  40.            
  41.             var songElem = document.getElementById('song');
  42.  
  43.             function makeRequest(url) {
  44.                 httpRequest = new XMLHttpRequest();
  45.                 if(!httpRequest) {
  46.                     songElem.innerText = 'Something went wrong :(';
  47.                     alert('Kan geen request maken');
  48.                     return false;
  49.                 }
  50.                 httpRequest.onreadystatechange = stateChange;
  51.                 try {
  52.                     httpRequest.open('GET', url);
  53.                     //httpRequest.setRequestHeader("Authorization", "Basic " + btoa(":" + vlcPassword));
  54.                     httpRequest.send();
  55.                 }
  56.                 catch(e) {
  57.                     alert(e);
  58.                 }
  59.             }
  60.  
  61.             function stateChange() {
  62.                 if(httpRequest.readyState === XMLHttpRequest.DONE) {
  63.                     if(httpRequest.status === 200) {
  64.                         //songElem.innerText = httpRequest.responseXML;
  65.                         setTimeout(doRequest, updateInterval*1000);
  66.                         updateInfoPlain(httpRequest.responseText);
  67.                         /*try {
  68.                             var xml = httpRequest.responseXML;
  69.                             var i = xml.getElementsByTagName("information");
  70.                             if(i.length > 0) {
  71.                                 var c = i[0].getElementsByTagName("category");
  72.                                 for (var iC = 0; iC < c.length; iC++) {
  73.                                    if(c.item(iC).getAttribute("name") == 'meta') {
  74.                                        var metaItem = c.item(iC);
  75.                                        var meta = {};
  76.  
  77.                                        var metaItems = metaItem.getElementsByTagName("info");
  78.  
  79.                                        for(var mI = 0; mI < metaItems.length; mI++) {
  80.                                            meta[metaItems.item(mI).getAttribute("name")] = metaItems.item(mI).innerHTML;
  81.                                        }
  82.                                        console.log(meta);
  83.                                        updateInfo(meta);
  84.                                        break;
  85.                                    }
  86.                                }
  87.                            }
  88.                    } catch (e) {
  89.                        console.log(e);
  90.                    }*/
  91.                    //console.log(xml.getElementsByTagName("information"));
  92.                    }
  93.                    else {
  94.                        //alert(httpRequest.status);
  95.                        //songElem.innerText = httpRequest.status;
  96.                    }
  97.                }
  98.            }
  99.  
  100.            /*
  101.            function updateInfo(m) {
  102.                if(currentSong == m.title) return;
  103.  
  104.                currentSong = m.title;
  105.                var t = m.title + " – " + m.artist
  106.                document.getElementById("song").innerHTML = t;
  107.                document.getElementById("song").style.opacity = 1;
  108.                setTimeout(function() {
  109.                    document.getElementById("song").style.opacity = 0;
  110.                }, showFor * 1000);
  111.            }*/
  112.  
  113.            var visibilityTimer;
  114.            var fadeoutTimer;
  115.            var visible = true;
  116.          
  117.            function updateInfoPlain(s) {
  118.                if(currentSong === s) return;
  119.                currentSong = s;
  120.              
  121.                if(visible) {
  122.                    clearTimeout(visibilityTimer);
  123.                    songElem.classList.add("fade"); //hide
  124.                  
  125.                    setTimeout(function() { //(after hidden:)
  126.                        songElem.innerText = currentSong; //change song
  127.                        songElem.classList.remove("fade"); //show again
  128.                    }, fadeLength * 1000);
  129.                  
  130.                    //set visibility timer
  131.                    startVisibilityTimer();
  132.                }
  133.                else { //(already hidden)
  134.                    songElem.innerText = currentSong; //change song
  135.                    songElem.classList.remove("fade"); //show
  136.                    visible = true;
  137.                    startVisibilityTimer();
  138.                }
  139.            }
  140.          
  141.            function startVisibilityTimer() {
  142.                visibilityTimer = setTimeout(function() {
  143.                    songElem.classList.add("fade");
  144.                    visible = false;
  145.                }, showFor * 1000 + fadeLength * 1000 * 2);
  146.            }
  147.          
  148.            function doRequest() {
  149.                makeRequest('URL FOR TXT FILE (Might have to be a web-based file now, since HTML is super finnicky w/ TXT file reading');
  150.            }
  151.            doRequest();
  152.        </script>
  153.     </body>
  154. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!