Last active
September 3, 2025 13:34
-
-
Save ZiTAL/5ca5519c6666cfa709ef0cde8a297b51 to your computer and use it in GitHub Desktop.
itsuki irratia zuzenean:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <title>Itsuki irratia zuzenean</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| html { | |
| overflow: hidden; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| iframe { | |
| max-width: 100%; | |
| } | |
| html { overflow: hidden; } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| iframe { max-width: 100%; } | |
| .itsuki-player{ | |
| --maxw: 520px; | |
| display: grid; | |
| justify-items: center; | |
| gap: 12px; | |
| margin: 0 auto; | |
| width: min(100%, var(--maxw)); | |
| background: transparent; | |
| font-family: Helvetica, Arial, sans-serif; /* Helvetica Regular */ | |
| font-weight: 400; | |
| font-style: normal; | |
| font-synthesis-weight: none; | |
| color: inherit; /* hereda de tu web */ | |
| text-align: center; | |
| } | |
| .itsuki-ctrl{ | |
| width: 100%; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| outline: none; | |
| } | |
| .itsuki-ctrl:focus-visible{ | |
| outline: 3px solid currentColor; | |
| outline-offset: 4px; | |
| border-radius: 12px; | |
| } | |
| /* Caption blanco y discreto */ | |
| .itsuki-fallback{ | |
| margin: 4px 0 0; | |
| font-size: clamp(0.75rem, 1.6vw, 0.85rem); | |
| line-height: 1.3; | |
| letter-spacing: 0.01em; | |
| opacity: 0.9; /* legible en fondo negro */ | |
| color: #fff; /* blanco */ | |
| } | |
| .itsuki-fallback a{ | |
| color: inherit; /* link también en blanco */ | |
| text-decoration: underline; /* subrayado accesible */ | |
| text-underline-offset: 3px; | |
| } | |
| .itsuki-listeners | |
| { | |
| text-align: center; | |
| } | |
| /* Afinado en pantallas pequeñas */ | |
| @media (max-width: 480px){ | |
| .itsuki-fallback{ | |
| font-size: 0.72rem; /* un poco más pequeño en móvil */ | |
| line-height: 1.25; | |
| } | |
| } | |
| @media (max-width: 360px){ | |
| .itsuki-fallback{ | |
| font-size: 0.68rem; /* extra-pequeñas */ | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section class="itsuki-player" role="region" aria-label="Itsuki irratia zuzenean"> | |
| <audio class="itsuki-ctrl" controls="" preload="none" aria-label="Itsuki irratia zuzenean"> | |
| <source src="https://irratia.itsuki.freemyip.com/itsuki.ogg" type="audio/ogg"> | |
| <source src="https://irratia.itsuki.freemyip.com/itsuki.mp3" type="audio/mpeg"> | |
| Zure nabigatzaileak ez du audioa onartzen. | |
| </audio> | |
| <p class="itsuki-fallback"> | |
| Arazoak badituzu, saiatu hemen: | |
| <br> | |
| <a href="https://irratia.itsuki.freemyip.com/itsuki.mp3" target="_blank" rel="noopener">MP3 formatuan (IPHONE)</a> | |
| <br> | |
| <a href="https://irratia.itsuki.freemyip.com/itsuki.ogg" target="_blank" rel="noopener">OGG formatuan (ANDROID)</a> | |
| </p> | |
| </section> | |
| <p class="itsuki-listeners"> | |
| <span>Entzuleak online:</span> | |
| <span class="itsuki-listeners-online"></span> | |
| </p> | |
| <script> | |
| const heightObserver = new ResizeObserver(([{ contentRect }]) => { | |
| window.parent.postMessage({ action: 'iframeHeightUpdated', height: contentRect.height, id: 'zXXs5n' }, '*'); | |
| }); | |
| heightObserver.observe(document.documentElement); | |
| (function() | |
| { | |
| const ilo = document.querySelector('span[class="itsuki-listeners-online"]'); | |
| function empty(item) | |
| { | |
| while(item.hasChildNodes()) | |
| item.removeChild(item.firstChild) | |
| } | |
| function listenersOnline() | |
| { | |
| const url = 'https://irratia.itsuki.freemyip.com/custom/listeners-online.json'; | |
| fetch(url) | |
| .then(response => | |
| { | |
| if (!response.ok) | |
| { | |
| throw new Error("listeners-online error: " + response.statusText); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => | |
| { | |
| empty(ilo) | |
| ilo.appendChild(document.createTextNode(data['listeners-online'])) | |
| }) | |
| .catch(error => | |
| { | |
| console.error("listeners-online error:", error); | |
| }); | |
| } | |
| function canPlayOgg(audio) | |
| { | |
| if(audio.canPlayType('audio/ogg; codecs="vorbis"') !== "probably") | |
| return false; | |
| return true; | |
| } | |
| function removeItem(item) | |
| { | |
| item.parentNode.removeChild(item); | |
| } | |
| function prepareAudio() | |
| { | |
| if(!canPlayOgg) | |
| { | |
| const audio = document.querySelector('audio'); | |
| const ogg = audio.querySelector('source[type="audio/ogg"]'); | |
| removeItem(ogg); | |
| audio.load() | |
| } | |
| } | |
| prepareAudio(); | |
| listenersOnline(); | |
| window.setInterval(function() | |
| { | |
| listenersOnline(); | |
| }, 60 * 1000) | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment