{"id":394,"date":"2022-03-22T03:44:31","date_gmt":"2022-03-22T03:44:31","guid":{"rendered":"https:\/\/hellotech.id\/?page_id=394"},"modified":"2022-03-22T04:15:02","modified_gmt":"2022-03-22T04:15:02","slug":"radio-test","status":"publish","type":"page","link":"https:\/\/hellotech.id\/index.php\/radio-test\/","title":{"rendered":"Radio Test"},"content":{"rendered":"


\n
\n
\n
\n Simple js player<\/title><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><br \/>\n <!-- Monospace font for play and pause buttons--><br \/>\n <!-- OFL font for rest of controls--><\/p>\n<style type=\"text\/css\">\n\/* Sections ---------------------------------- *\/\n\/* main flex container *\/\n.flex_1 {\n display: flex;\n flex-direction: column;\n max-width: 427px;\n margin: auto;\n background: #bababa;\n}\n.player {\n justify-content: center;\n}\n.background {\n flex: 2;\n border-bottom: 7px solid #bcbcbc;\n background: #510909;\n padding: 1.5em 0;\n \/* border-radius: 50px; *\/\n background: #f7f7f7;\n margin: 1.222em;\n box-shadow: 0 0 10px 1px gray;\n background: ;\n}\n.prehravac {\n min-height: 100%;\n background-color: #E1E1E1;\n text-align: left;\n color: black;\n box-shadow: inset -7px 0 9px -7px rgba(134, 130, 130, 0.24);\n flex: 1;\n display: flex;\n flex-direction: row;\n border-bottom: 1px #cac9c9 solid;\n}\n.aroundbutton {\n overflow: visible;\n margin-top: .59em;\n}\n.playbutton {\n position: relative;\n z-index: 1;\n \/* top: 50%; *\/\n \/* left: 50%; *\/\n \/* transform: translateX(-50%) translateY(-50%); *\/\n box-sizing: content-box;\n display: block;\n width: 24px;\n height: 31px;\n border-radius: 50%;\n padding: 16px 39px 16px 26px;\n}\n.playbutton:before {\n content: \"\";\n position: absolute;\n z-index: 0;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n display: block;\n width: 75px;\n height: 75px;\n background: #9b4d4d;\n border-radius: 50%;\n animation: pulse-border 2.2s ease-out infinite;\n}\n.playbutton:after {\n content: \"\";\n position: absolute;\n z-index: 1;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n display: block;\n width: 75px;\n height: 75px;\n background: #b22c25;\n border-radius: 50%;\n transition: all 200ms;\n}\n.playbutton:hover:after {\n background-color: darken(#fa183d, 10%);\n}\n.playbutton img {\n position: relative;\n z-index: 3;\n max-width: 100%;\n width: auto;\n height: auto;\n}\n.playbutton span {\n display: block;\n position: relative;\n z-index: 3;\n width: 0;\n height: 0;\n border-left: 22px solid #fff1f1;\n border-top: 15px solid transparent;\n border-bottom: 15px solid transparent;\n}\n\/* animation for the play button *\/\n@keyframes pulse-border {\n 0% {\n transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);\n opacity: 0;\n }\n}\n#song {\n font-weight: normal;\n}\n#umelec {\n font-weight: bold;\n font-size: large;\n}\n#vol-control {\n appearance: slider-horizontal;\n cursor: default;\n border: initial;\n margin: 2px;\n height: 12px;\n background: whitesmoke;\n border-radius: 15px;\n filter: hue-rotate(140deg)brightness(.9);\n}\ni.fa-volume-down {\n margin-right: -8px;\n right: 0;\n margin: 2px;\n font-size: 15px;\n}\n.fa-pause {\n width: 1.20em !important;\n}\n.fa-play {\n width: 1.35em!important;\n}\ni.fa-volume-up {\n margin-right: -8px;\n right: 0;\n margin: 2px;\n font-size: 15px;\n}\n\/* offsets the inner parts of the player *\/\n.controls {\n display: flex;\n padding: 0 4em;\n flex-direction: row;\n margin-top: 3em;\n justify-content: center;\n}\n\/* responsivity *\/\n@media screen and (min-width: 1200px) {\n .flex_1 {\n width: 100%;\n max-width: 100%;\n background: #dbd9d9;\n }\n .iframe_reload {\n width: 458px !important;\n margin: 1.2em;\n background: white;\n height: 80%;\n box-shadow: 0 0 10px 1px grey;\n border-bottom: 5px solid #acacac;\n }\n}\n@media screen and (max-width: 900px) {\n .flex_1 {\n max-width: 100%;\n }\n .iframe_reload {\n max-width: 100%\n }\n}\n#nojs_message {\n background: #726f6f;\n color: white;\n font-weight: bolder;\n line-height: 1.5em;\n padding: 1em;\n}\n@media screen and (max-width: 1200px) {\n button {\n margin-bottom: 1em!important;\n line-height: 2.25;\n \/* border-radius: 500px; *\/\n }\n .flex_1 {\n max-width: 450px;\n box-shadow: 0 0 10px 1px #918e8e;\n }\n .iframe_reload {\n width: 100%!important;\n max-width: 450px;\n box-shadow: 0 0 10px 1px #bababa;\n }\n}\ninput[type=\"checkbox\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-tap-highlight-color: transparent;\n cursor: pointer;\n}\ninput[type=\"checkbox\"]:focus {\n outline: 0;\n}\n.toggle {\n height: 28px;\n width: 48px;\n border-radius: 16px;\n display: inline-block;\n position: relative;\n margin: 1em .3em;\n border: 2px solid #a2a2a4;\n background: linear-gradient(180deg, #494A50 0%, #29292B 100%);\n transition: all 0.2s ease;\n}\n.toggle:after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: white;\n box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);\n transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);\n}\n.toggle:checked {\n \/*! border-color: #B22B2B; *\/\n background: #b22c25;\n margin: 1em .3em;\n}\n.toggle:checked:after {\n transform: translatex(20px);\n}\n.pressed {\n display: block;\n position: relative;\n z-index: 3;\n background: #fff1f1;\n width: 22px!important;\n height: 22px!important;\n border-left: 0px solid #fff1f1!important;\n border-top: 0px solid transparent!important;\n border-bottom: 0px solid transparent!important;\n}\n.on {\n color: white;\n z-index: 100;\n display: block;\n visibility: visible;\n position: inherit;\n font-size: 32px!important;\n border: none;\n}\n.loader {\n border: 3px solid #eae7e7;\n \/* border-top-color: rgb(255 255 255); *\/\n border-top-style: solid;\n border-top-width: 5px;\n -webkit-animation: spin 1s linear infinite;\n animation: spin 1.4s ease-out infinite;\n \/*! border-top: 5px solid #be2c2c; *\/\n border-radius: 50%;\n width: 100px;\n height: 75px;\n background: #c74d47;\n}\n\/* Safari *\/\n@-webkit-keyframes spin {\n 0% {\n -webkit-transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n }\n}\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.quality {\n display: flex;\n flex-direction: row;\n margin-top: 5em;\n padding-top: .25em;\n justify-content: center;\n border-top: 1px solid #c8c8c8;\n}\n\/* optional dark mode support. If not desired remove all code until from here until the end *\/\n@media (prefers-color-scheme: dark) {\n #umelec {\n margin-top: 2em\n }\n .ics-calendar h4 {\n background: #232323;\n color: white;\n }\n .ics-calendar h4:hover {\n background: #232323;\n color: white;\n }\n .right {\n background: #181a1b;\n box-shadow: none;\n border-bottom: 7px solid #8c1e18;\n }\n .flex_1 {\n background: #232323;\n box-shadow: none;\n }\n .iframe_reload {\n box-shadow: none;\n }\n .iconify {\n color: whitesmoke !important;\n }\n .loader {\n border: 3px solid #181a1b;\n }\n @media screen and (min-width: 1200px) {\n .flex_1 {\n background: #121212;\n }\n .right {\n margin-top: 0;\n padding-top: 3em\n }\n }\n}\n <\/style>\n<p><\/head><br \/>\n<body><br \/>\n <!-- if JS is not enabled --><br \/>\n <noscript><\/p>\n<p>In order for this audio player to function, you need to have javascript enabled. If for any reason you do not wish to use javascript, here is an <ahref=\"stream.mp3\">alternative link to an audio stream<\/a>.<\/p>\n<p> <\/noscript><br \/>\n <!-- main flex container --><br \/>\n <center><br \/>\n <a target=\"_blank\" href=\"#\" title=\"A custom link\" rel=\"noopener\"><\/a><br \/>\n <audio preload=\"metadata\" id=\"audio\">Your browser lacks javascript support, please make use of this alternative link https:\/\/audio.mp3><\/audio><\/p>\n<p id=\"umelec\" title=\"Current playing artist\">Current playing artist<\/p>\n<p id=\"song\" title=\"Current playing artist\">Current playing song<\/p>\n<h4 id=\"loader\" style=\"visibility: hidden;\n position: absolute;\n display: block;\n margin: auto;\n overflow: visible;\"\/><br \/>\n <!-- wraps the play button and for js to listen to on click --><br \/>\n <\/h4>\n<p> <a><br \/>\n <\/a><br \/>\n ><\/i><br \/>\n <input type=\"checkbox\" onclick=\"check()\" id=\"quality\" checked><br \/>\n <!-- volume an quality controls--><br \/>\n <input title=\"Volume\" id=\"vol-control\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value=\"100\" oninput=\"SetVolume(this.value)\" onchange=\"SetVolume(this.value)\"><\/input><br \/>\n <!-- The audio player code --><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Simple js player In order for this audio player to function, you need to have javascript enabled. If for any reason you do not wish to use javascript, here is an alternative link to an audio stream. Your browser lacks javascript support, please make use of this alternative link https:\/\/audio.mp3> Current playing artist Current playing […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-394","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hellotech.id\/index.php\/wp-json\/wp\/v2\/pages\/394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellotech.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hellotech.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hellotech.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hellotech.id\/index.php\/wp-json\/wp\/v2\/comments?post=394"}],"version-history":[{"count":20,"href":"https:\/\/hellotech.id\/index.php\/wp-json\/wp\/v2\/pages\/394\/revisions"}],"predecessor-version":[{"id":416,"href":"https:\/\/hellotech.id\/index.php\/wp-json\/wp\/v2\/pages\/394\/revisions\/416"}],"wp:attachment":[{"href":"https:\/\/hellotech.id\/index.php\/wp-json\/wp\/v2\/media?parent=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}