files/tinyrain.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noindex, nofollow" />
        <meta name="googlebot" content="noindex, nofollow" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core-compat.min.js"></script>
        <title>TinyRain</title>

        <script type='text/javascript'>
            window.addEvent('load', function() {
            var song = new Audio("http://rainymood.com/audio1110/0.m4a");
            song.controls = true;
            song.controlsList = "nodownload";
            song.loop = true;
            song.autoplay = true;
            document.body.appendChild(song);
            });
        </script>

        <style>
            html,
            body {
                height: 100%;
            }
            html {
                display: table;
                margin: auto;
            }
            body {
                display: table-cell;
                vertical-align: middle;
                width: 100%;
                background: #002B36;
                zoom: 3;
            }
            audio{
                width: 250px;
                height: 40px;
            }
            audio::-webkit-media-controls-download-button {
                display: none;
            }

            audio::-webkit-media-controls-panel {
                background: #4c717a;
            }
            audio::-webkit-media-controls-timeline {
                height: 0px;
                -webkit-filter: saturate(10) blur(5px);
                -webkit-transform: scale(1, 10);
            }
            audio::-webkit-media-controls-volume-slider {
                -webkit-filter: saturate(10);
            }
            audio::-webkit-media-controls-mute-button {
                -webkit-filter: brightness(200%);
            }
            audio::-webkit-media-controls-play-button {
                -webkit-filter: brightness(200%);
                -webkit-transform: scale(1.5, 1.5);
            }
            audio::-webkit-media-controls-time-remaining-display,
            audio::-webkit-media-controls-current-time-display {
                display: none;
            }
        </style>

        <link rel="shortcut icon" href="https://cdn3.iconfinder.com/data/icons/weather-16/256/Rainy_Day-16.png" />
    </head>
    <body>
    </body>
</html>