{"id":1533,"date":"2026-08-17T07:14:39","date_gmt":"2026-08-17T07:14:39","guid":{"rendered":"https:\/\/n0uval.online\/?page_id=1533"},"modified":"2026-08-18T09:47:23","modified_gmt":"2026-08-18T09:47:23","slug":"home","status":"publish","type":"page","link":"https:\/\/n0uval.online\/","title":{"rendered":"Home"},"content":{"rendered":"<p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1300px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><section class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_2 1_2 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-post-slider fusion-flexslider fusion-flexslider-loading flexslider-posts-with-excerpt\"><ul class=\"slides\"><li><a href=\"https:\/\/n0uval.online\/?p=1526\" aria-label=\"Technology and music\"><img decoding=\"async\" width=\"2000\" height=\"1000\" class=\"lazyload wp-image-1165\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272000%27%20height%3D%271000%27%20viewBox%3D%270%200%202000%201000%27%3E%3Crect%20width%3D%272000%27%20height%3D%271000%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/n0uval.online\/wp-content\/uploads\/2017\/06\/blog_music_techo.jpg\" alt=\"Audio Mixing Console\" \/><\/a><div class=\"slide-excerpt\"><div class=\"excerpt-container\"><h2><a href=\"https:\/\/n0uval.online\/?p=1526\">Technology and music<\/a><\/h2><p>Sed sit amet sem turpis. Curabitur cursus lacinia est at interdum risus id condimentum.<\/p><\/div><\/div><\/li><\/ul><\/div><\/div><\/section><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_2 1_2 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-post-slider fusion-flexslider fusion-flexslider-loading flexslider-posts-with-excerpt\"><ul class=\"slides\"><li><a href=\"https:\/\/n0uval.online\/?p=1526\" aria-label=\"Technology and music\"><img decoding=\"async\" width=\"2000\" height=\"1000\" class=\"lazyload wp-image-1165\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%272000%27%20height%3D%271000%27%20viewBox%3D%270%200%202000%201000%27%3E%3Crect%20width%3D%272000%27%20height%3D%271000%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/n0uval.online\/wp-content\/uploads\/2017\/06\/blog_music_techo.jpg\" alt=\"Audio Mixing Console\" \/><\/a><div class=\"slide-excerpt\"><div class=\"excerpt-container\"><h2><a href=\"https:\/\/n0uval.online\/?p=1526\">Technology and music<\/a><\/h2><p>Sed sit amet sem turpis. Curabitur cursus lacinia est at interdum risus id condimentum.<\/p><\/div><\/div><\/li><\/ul><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1300px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"rp-widget\" id=\"rpWidget\">\n  <div class=\"rp-player\">\n    <div class=\"rp-dial\">\n      <svg viewBox=\"0 0 64 64\">\n        <circle cx=\"32\" cy=\"32\" r=\"29\" fill=\"none\" stroke=\"#223530\" stroke-width=\"1.5\"\/>\n        <circle cx=\"32\" cy=\"32\" r=\"29\" fill=\"none\" stroke=\"#e3a94c\" stroke-width=\"1.5\" stroke-dasharray=\"4 6\" opacity=\"0.5\"\/>\n        <g class=\"rp-needle\" id=\"rpNeedle\">\n          <line x1=\"32\" y1=\"32\" x2=\"32\" y2=\"6\" stroke=\"#e3a94c\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n        <\/g>\n      <\/svg>\n      <img decoding=\"async\" class=\"lazyload rp-cover\" id=\"rpCover\" alt=\"Cover\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\">\n    <\/div>\n\n    <div class=\"rp-info\">\n      <p class=\"rp-eyebrow\">Now playing <span class=\"rp-live\"><span class=\"rp-dot\" id=\"rpLiveDot\"><\/span><span id=\"rpLiveText\">Offline<\/span><\/span><\/p>\n      <div class=\"rp-marqueeBox\" id=\"rpMarqueeBox\">\n        <p class=\"rp-title\" id=\"rpTitle\">Memuat judul...<\/p>\n      <\/div>\n      <p class=\"rp-status\" id=\"rpStatus\">Siap diputar<\/p>\n    <\/div>\n\n    <div class=\"rp-controls\">\n      <button class=\"rp-playBtn\" id=\"rpPlayBtn\" aria-label=\"Play\">\n        <svg id=\"rpPlayIcon\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n      <\/button>\n      <div class=\"rp-volWrap\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M3 10v4h4l5 5V5L7 10H3z\"\/><\/svg>\n        <input type=\"range\" id=\"rpVolume\" min=\"0\" max=\"1\" step=\"0.05\" value=\"1\" aria-label=\"Volume\">\n      <\/div>\n    <\/div>\n  <\/div>\n  <audio id=\"rpAudio\" src=\"https:\/\/i.klikhost.com:8030\/stream\" preload=\"none\"><\/audio>\n<\/div>\n\n<style>\n  .rp-widget, .rp-widget *{ box-sizing:border-box; }\n  .rp-widget{\n    --rp-bg:#172726;\n    --rp-bg2:#1e332f;\n    --rp-amber:#e3a94c;\n    --rp-text:#f1ece1;\n    --rp-muted:#8ea39c;\n    --rp-ring:#2a3f3a;\n    position:fixed;\n    left:0;\n    right:0;\n    bottom:0;\n    z-index:999999;\n    font-family:'Inter',sans-serif;\n    color:var(--rp-text);\n    padding:10px 14px;\n    padding-bottom:calc(10px + env(safe-area-inset-bottom));\n    background:var(--rp-bg);\n    border-top:1px solid #24352f;\n    box-shadow:0 -6px 24px rgba(0,0,0,0.35);\n  }\n  .rp-player{\n    width:100%;\n    max-width:720px;\n    margin:0 auto;\n    position:relative;\n    display:flex;\n    align-items:center;\n    gap:16px;\n    flex-wrap:wrap;\n    min-width:0;\n  }\n  .rp-live{ display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--rp-amber); flex-shrink:0; }\n  .rp-dot{ width:6px; height:6px; border-radius:50%; background:var(--rp-amber); }\n  .rp-dot.on{ animation:rp-pulse 1.6s infinite ease-in-out; }\n  @keyframes rp-pulse{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }\n  .rp-dial{ position:relative; width:48px; height:48px; flex-shrink:0; }\n  .rp-dial svg{ position:absolute; inset:0; width:100%; height:100%; }\n  .rp-needle{ transform-origin:32px 32px; transition:transform 0.4s ease; }\n  .rp-needle.spin{ animation:rp-sweep 6s linear infinite; }\n  @keyframes rp-sweep{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }\n  .rp-cover{ position:absolute; top:5px; left:5px; width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--rp-bg2); border:1px solid #2a3f3a; }\n  .rp-info{ flex:1; min-width:140px; }\n  .rp-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--rp-muted); letter-spacing:0.08em; text-transform:uppercase; margin:0 0 2px; display:flex; align-items:center; gap:8px; }\n  .rp-marqueeBox{ overflow:hidden; white-space:nowrap; position:relative; }\n  .rp-title{ font-family:'Fraunces',serif; font-weight:600; font-size:14px; line-height:1.2; margin:0; display:inline-block; white-space:nowrap; }\n  .rp-title.rp-scroll{ padding-left:100%; animation:rp-marquee linear infinite; }\n  @keyframes rp-marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-100%); } }\n  .rp-status{ font-size:11px; color:var(--rp-muted); margin:0; display:none; }\n  .rp-controls{ display:flex; align-items:center; gap:10px; flex-shrink:0; }\n  .rp-playBtn{ width:38px; height:38px; border-radius:50%; background:var(--rp-amber); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:transform 0.15s ease, background 0.15s ease; }\n  .rp-playBtn:hover{ background:#eab766; }\n  .rp-playBtn:active{ transform:scale(0.94); }\n  .rp-playBtn svg{ width:14px; height:14px; fill:#101c1b; }\n  .rp-volWrap{ display:flex; align-items:center; gap:6px; width:90px; }\n  .rp-volWrap svg{ width:13px; height:13px; fill:var(--rp-muted); flex-shrink:0; }\n  .rp-widget input[type=\"range\"]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px; background:var(--rp-ring); outline:none; }\n  .rp-widget input[type=\"range\"]::-webkit-slider-thumb{ -webkit-appearance:none; width:11px; height:11px; border-radius:50%; background:var(--rp-amber); cursor:pointer; }\n  .rp-widget input[type=\"range\"]::-moz-range-thumb{ width:11px; height:11px; border-radius:50%; background:var(--rp-amber); border:none; cursor:pointer; }\n\n  @media (max-width:480px){\n    .rp-widget{ padding:8px 10px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }\n    .rp-dial{ width:40px; height:40px; }\n    .rp-cover{ width:30px; height:30px; }\n    .rp-title{ font-size:13px; }\n    .rp-volWrap{ width:70px; }\n  }\n<\/style>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n\n<script>\n(function(){\n  const audio = document.getElementById('rpAudio');\n  const playBtn = document.getElementById('rpPlayBtn');\n  const playIcon = document.getElementById('rpPlayIcon');\n  const status = document.getElementById('rpStatus');\n  const volume = document.getElementById('rpVolume');\n  const titleEl = document.getElementById('rpTitle');\n  const marqueeBox = document.getElementById('rpMarqueeBox');\n  const cover = document.getElementById('rpCover');\n  const needle = document.getElementById('rpNeedle');\n  const liveDot = document.getElementById('rpLiveDot');\n  const liveText = document.getElementById('rpLiveText');\n\n  let playing = false;\n  let lastTitle = '';\n  let triedFallback = false;\n\n  const STREAM_HTTPS = 'https:\/\/i.klikhost.com:8030\/stream';\n  const STREAM_HTTP = 'http:\/\/i.klikhost.com:8030\/stream';\n  const STATUS_HTTPS = 'https:\/\/i.klikhost.com:8030\/status-json.xsl';\n  const STATUS_HTTP = 'http:\/\/i.klikhost.com:8030\/status-json.xsl';\n  let statusUrl = STATUS_HTTPS;\n\n  const PAUSE_PATH = 'M6 5h4v14H6zM14 5h4v14h-4z';\n  const PLAY_PATH = 'M8 5v14l11-7z';\n\n  function setPlayingUI(){\n    playing = true;\n    playIcon.querySelector('path').setAttribute('d', PAUSE_PATH);\n    playBtn.setAttribute('aria-label', 'Pause');\n    status.textContent = 'Sedang diputar';\n    needle.classList.add('spin');\n  }\n  function setPausedUI(msg){\n    playing = false;\n    playIcon.querySelector('path').setAttribute('d', PLAY_PATH);\n    playBtn.setAttribute('aria-label', 'Play');\n    status.textContent = msg || 'Dijeda';\n    needle.classList.remove('spin');\n  }\n  function disconnectStream(){\n    \/\/ pause() saja TIDAK memutus koneksi ke server \u2014 harus kosongkan src + load()\n    \/\/ supaya Icecast benar-benar mencatat listener ini disconnect, bukan cuma diam.\n    audio.pause();\n    audio.removeAttribute('src');\n    audio.load();\n  }\n  function attemptPlay(){\n    status.textContent = 'Menghubungkan...';\n    audio.src = STREAM_HTTPS;\n    audio.play().then(() => { triedFallback = false; setPlayingUI(); })\n    .catch(() => {\n      if (!triedFallback){\n        triedFallback = true;\n        audio.src = STREAM_HTTP;\n        audio.play().then(() => { setPlayingUI(); }).catch(() => {\n          setPausedUI('Gagal memutar stream.');\n        });\n      } else {\n        setPausedUI('Gagal memutar stream.');\n      }\n    });\n  }\n  playBtn.addEventListener('click', () => { playing ? (disconnectStream(), setPausedUI()) : attemptPlay(); });\n  volume.addEventListener('input', () => { audio.volume = parseFloat(volume.value); });\n  audio.addEventListener('waiting', () => { if (playing) status.textContent = 'Buffering...'; });\n  audio.addEventListener('playing', () => { status.textContent = 'Sedang diputar'; });\n  audio.addEventListener('error', () => { status.textContent = 'Gagal memuat stream'; });\n  window.addEventListener('pagehide', disconnectStream);\n  window.addEventListener('beforeunload', disconnectStream);\n\n  function applyMarquee(text){\n    titleEl.classList.remove('rp-scroll');\n    titleEl.style.animationDuration = '';\n    titleEl.textContent = text;\n    requestAnimationFrame(() => {\n      const overflow = titleEl.scrollWidth > marqueeBox.clientWidth;\n      if (overflow){\n        const duration = Math.max(6, titleEl.scrollWidth \/ 40);\n        titleEl.style.animationDuration = duration + 's';\n        titleEl.classList.add('rp-scroll');\n      }\n    });\n  }\n\n  function extractSource(json){\n    let src = json.icestats && json.icestats.source;\n    if (!src) return null;\n    const list = Array.isArray(src) ? src : [src];\n    return list[0] || null;\n  }\n\n  async function updateCover(term){\n    try{\n      const res = await fetch('https:\/\/itunes.apple.com\/search?term=' + encodeURIComponent(term) + '&entity=song&limit=1');\n      const data = await res.json();\n      if (data.results && data.results[0] && data.results[0].artworkUrl100){\n        cover.src = data.results[0].artworkUrl100.replace('100x100','300x300');\n      }\n    }catch(e){}\n  }\n\n  async function pollNowPlaying(){\n    try{\n      const res = await fetch(statusUrl, {cache:'no-store'});\n      const json = await res.json();\n      const src = extractSource(json);\n      liveDot.classList.add('on');\n      liveText.textContent = 'Live';\n      if (src){\n        const song = src.yp_currently_playing || src.title;\n        if (song && song !== lastTitle){\n          lastTitle = song;\n          applyMarquee(song);\n          updateCover(song);\n        }\n      }\n    }catch(e){\n      statusUrl = (statusUrl === STATUS_HTTPS) ? STATUS_HTTP : STATUS_HTTPS;\n      liveDot.classList.remove('on');\n      liveText.textContent = 'Offline';\n    }\n  }\n\n  pollNowPlaying();\n  setInterval(pollNowPlaying, 15000);\n})();\n<\/script>\n<\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1533","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/n0uval.online\/index.php?rest_route=\/wp\/v2\/pages\/1533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/n0uval.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/n0uval.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/n0uval.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/n0uval.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1533"}],"version-history":[{"count":11,"href":"https:\/\/n0uval.online\/index.php?rest_route=\/wp\/v2\/pages\/1533\/revisions"}],"predecessor-version":[{"id":1552,"href":"https:\/\/n0uval.online\/index.php?rest_route=\/wp\/v2\/pages\/1533\/revisions\/1552"}],"wp:attachment":[{"href":"https:\/\/n0uval.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}