{"id":4690,"date":"2025-10-05T14:01:11","date_gmt":"2025-10-05T14:01:11","guid":{"rendered":"https:\/\/punjabikidz.com\/home\/?page_id=4690"},"modified":"2025-10-14T12:30:44","modified_gmt":"2025-10-14T12:30:44","slug":"the-fat-beetle-audio-pg-12","status":"publish","type":"page","link":"https:\/\/punjabikidz.com\/home\/the-fat-beetle-audio-pg-12\/","title":{"rendered":"The Fat Beetle Audio \u2013 Pg 12"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"4690\" class=\"elementor elementor-4690\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-81426df e-flex e-con-boxed e-con e-parent\" data-id=\"81426df\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-770f4db e-con-full e-flex e-con e-child\" data-id=\"770f4db\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f54198 elementor-widget elementor-widget-heading\" data-id=\"5f54198\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">The Fat Beetle - &#2606;&#2635;&#2591;&#2622; &#2581;&#2624;&#2652;&#2622; (Listen &amp; Read)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-792a0fa e-con-full e-flex e-con e-child\" data-id=\"792a0fa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bd6db52 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"bd6db52\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-36d8009 e-con-full e-flex e-con e-parent\" data-id=\"36d8009\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-5500224 e-con-full e-flex e-con e-child\" data-id=\"5500224\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ff9d36 elementor-widget elementor-widget-video\" data-id=\"3ff9d36\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings='{\"video_type\":\"hosted\",\"autoplay\":\"yes\",\"loop\":\"yes\",\"controls\":\"yes\"}' data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/punjabikidz.com\/home\/wp-content\/uploads\/2025\/10\/FB-Pg-12.mp4\" autoplay=\"\" loop=\"\" controls=\"\" controlslist=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-576c846 e-con-full e-flex e-con e-child\" data-id=\"576c846\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-24cfa69 e-con-full e-flex e-con e-child\" data-id=\"24cfa69\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-52eaa40 e-con-full e-flex e-con e-child\" data-id=\"52eaa40\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2dde2ac elementor-widget elementor-widget-text-editor\" data-id=\"2dde2ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5 style=\"text-align: center;\"><strong><span style=\"color: #800000;\">Click Play to Listen<\/span><\/strong><\/h5><p><img decoding=\"async\" class=\"wp-image-3326 aligncenter\" src=\"https:\/\/punjabikidz.com\/home\/wp-content\/uploads\/2024\/12\/PunjabiKidz-Favicon.webp\" alt=\"favicon\" width=\"155\" height=\"155\" srcset=\"https:\/\/punjabikidz.com\/home\/wp-content\/uploads\/2024\/12\/PunjabiKidz-Favicon.webp 192w, https:\/\/punjabikidz.com\/home\/wp-content\/uploads\/2024\/12\/PunjabiKidz-Favicon-150x150.png 150w, https:\/\/punjabikidz.com\/home\/wp-content\/uploads\/2024\/12\/PunjabiKidz-Favicon-100x100.webp 100w\" sizes=\"(max-width: 155px) 100vw, 155px\"\/><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27b5558 elementor-widget elementor-widget-text-editor\" data-id=\"27b5558\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 style=\"text-align: center;\"><strong><span style=\"color: #000000;\">The Fat Beetle<\/span><br><span style=\"color: #993300;\">&#2606;&#2635;&#2591;&#2622; &#2581;&#2624;&#2652;&#2622;<\/span><\/strong><\/h3><h4 style=\"text-align: center;\"><span style=\"color: #008000;\"><strong>Page 12<\/strong><\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-97a8f24 e-con-full e-flex e-con e-parent\" data-id=\"97a8f24\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-633425e e-con-full e-flex e-con e-child\" data-id=\"633425e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3118f78 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"3118f78\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2abc54f elementor-widget elementor-widget-html\" data-id=\"2abc54f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\n\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>Punjabi Read-Along &mdash; 21.00s precise (v2.1)<\/title>\n\n<!-- Punjabi (Gurmukhi) fonts -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Gurmukhi:wght@400;700&amp;display=swap\" rel=\"stylesheet\">\n<link href=\"https:\/\/fonts.bunny.net\/css?family=noto-sans-gurmukhi:400,700&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n@font-face{\n  font-family:\"Noto Sans Gurmukhi Fallback\";\n  src:url(\"https:\/\/cdn.jsdelivr.net\/gh\/notofonts\/gurmukhi@main\/fonts\/ttf\/NotoSansGurmukhi\/NotoSansGurmukhi-Regular.ttf\") format(\"truetype\");\n  font-weight:400;font-style:normal;font-display:swap;\n}\n@font-face{\n  font-family:\"Noto Sans Gurmukhi Fallback\";\n  src:url(\"https:\/\/cdn.jsdelivr.net\/gh\/notofonts\/gurmukhi@main\/fonts\/ttf\/NotoSansGurmukhi\/NotoSansGurmukhi-Bold.ttf\") format(\"truetype\");\n  font-weight:700;font-style:normal;font-display:swap;\n}\n\n:root{\n  --accent:#e11d48;\n  --ink:#e7e9ee;\n  --card:#ffffff;\n  --border:#e8eaee;\n  --r:14px;\n\n  --player-bg1:#0c0f16;\n  --player-bg2:#151a24;\n  --player-ring:rgba(255,255,255,.08);\n  --player-track:#242a33;\n\n  --pbtn-red1:#ff3b30;\n  --pbtn-red2:#d91515;\n\n  --hi-bg:#ffe3e8;\n}\n\n*{box-sizing:border-box}\nbody{\n  margin:0; padding:22px; background:#fff; color:#111827;\n  font-family:\"Noto Sans Gurmukhi\",\"Noto Sans Gurmukhi Fallback\",\n              \"Raavi\",\"Nirmala UI\",\"Gurmukhi MN\",\"Gurmukhi MT\",\"Gurmukhi Sangam MN\",\n              \"Lohit Gurmukhi\",\"Saab\", Arial, sans-serif;\n  line-height:1.75;\n}\n.container{max-width:900px;margin:0 auto}\n#msg{max-width:800px;margin:0 auto 10px;color:#6b7280;font:13px\/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial}\n#msg.error{color:#b91c1c}\n\n\/* Player (450px wide, centered) *\/\n.player-wrap{ width:450px; max-width:100%; margin:0 auto 10px; }\n.player{\n  background:\n    radial-gradient(120% 160% at 10% -20%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 60%),\n    linear-gradient(180deg, var(--player-bg1), var(--player-bg2));\n  border:1px solid var(--player-ring);\n  border-radius:var(--r);\n  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.25);\n  padding:14px 16px; color:var(--ink);\n}\n.row{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; }\n\n\/* Red play\/pause button *\/\n.pbtn{\n  width:60px; height:60px; border-radius:999px;\n  background:\n    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),\n    linear-gradient(180deg,var(--pbtn-red1),var(--pbtn-red2));\n  border:1px solid rgba(255,255,255,.18);\n  display:flex; align-items:center; justify-content:center;\n  cursor:pointer;\n  box-shadow:0 12px 24px rgba(217,21,21,.38), inset 0 1px 0 rgba(255,255,255,.28);\n  transition:transform .08s ease, filter .2s ease, box-shadow .2s ease;\n  line-height:0; padding:0; margin:0;\n}\n.pbtn:hover{ filter:brightness(1.05) }\n.pbtn:active{ transform:scale(.98) }\n.pbtn svg{ width:28px; height:28px; display:block; fill:#fff }\n.pbtn svg #pauseIcon{ display:none }\n.pbtn.playing svg #playIcon{ display:none }\n.pbtn.playing svg #pauseIcon{ display:block }\n\n\/* Seek bar *\/\n.seek{\n  --percent:0%;\n  appearance:none; -webkit-appearance:none; width:100%; height:8px;\n  background:linear-gradient(to right, var(--pbtn-red1) 0 var(--percent), var(--player-track) var(--percent) 100%);\n  border:1px solid rgba(255,255,255,.10);\n  border-radius:999px; outline:none;\n  box-shadow: inset 0 2px 6px rgba(0,0,0,.35);\n  transition: background 80ms linear;\n}\n.seek[disabled]{ opacity:.6; cursor:not-allowed; pointer-events:none; }\n.seek::-webkit-slider-thumb{\n  -webkit-appearance:none; appearance:none;\n  width:16px;height:16px;border-radius:999px;background:#fff;border:2px solid var(--pbtn-red2);\n  box-shadow:0 4px 10px rgba(0,0,0,.3); cursor:pointer;\n}\n.seek::-moz-range-thumb{\n  width:16px;height:16px;border-radius:999px;background:#fff;border:2px solid var(--pbtn-red2);\n  box-shadow:0 4px 10px rgba(0,0,0,.3); cursor:pointer;\n}\n.seek::-moz-range-track{ background:transparent }\n.timebar{ display:flex; justify-content:flex-end; font-size:12px; color:#9aa3b2; margin-top:8px; }\n\n\/* Punjabi text *\/\n.text{\n  font-size:1.7rem; line-height:2.1;\n  background:var(--card); border:1px solid var(--border); border-radius:var(--r);\n  padding:18px; max-width:800px; margin:12px auto 18px;\n  text-align:left; text-indent:1.5em;\n  word-spacing:normal; letter-spacing:normal;\n  font-family:\"Noto Sans Gurmukhi\",\"Noto Sans Gurmukhi Fallback\",\n              \"Raavi\",\"Nirmala UI\",\"Gurmukhi MN\",\"Gurmukhi MT\",\"Gurmukhi Sangam MN\",\n              \"Lohit Gurmukhi\",\"Saab\", Arial, sans-serif !important;\n}\n.word{\n  display:inline; cursor:pointer;\n  border-radius:6px; padding:0 .12em;\n  transition: background .06s linear, box-shadow .12s ease;\n}\n.word:hover{ background:#fff5f7 }\n.text .word.active{\n  color:var(--accent) !important;\n  background:var(--hi-bg);\n  box-shadow:0 0 0 0.14em rgba(255,227,232,0.9);\n  font-weight:400;\n  text-shadow:\n    0   0   0   var(--accent),\n    0.015em 0   0 var(--accent),\n   -0.015em 0   0 var(--accent),\n    0   0.015em 0 var(--accent),\n    0  -0.015em 0 var(--accent);\n}\n\n\/* Hide native audio UI *\/\naudio{ display:none }\n<\/style>\n\n\n<div class=\"container\">\n\n  <div id=\"msg\">Click any word to jump there. Playback continues from that point.<\/div>\n\n  <audio id=\"player\" preload=\"none\" playsinline><\/audio>\n\n  <div class=\"player-wrap\">\n    <div class=\"player\" role=\"region\" aria-label=\"Audio player\">\n      <div class=\"row\">\n        <button id=\"playbtn\" class=\"pbtn\" aria-label=\"Play\" title=\"Play\">\n          <svg viewbox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\">\n            <g id=\"playIcon\"><polygon points=\"35,25 75,50 35,75\"><\/polygon><\/g>\n            <g id=\"pauseIcon\"><rect x=\"32\" y=\"24\" width=\"14\" height=\"52\" rx=\"3\"><\/rect><rect x=\"54\" y=\"24\" width=\"14\" height=\"52\" rx=\"3\"><\/rect><\/g>\n          <\/svg>\n        <\/button>\n        <input id=\"seek\" class=\"seek\" type=\"range\" min=\"0\" max=\"0\" step=\"0.01\" value=\"0\" aria-label=\"Seek\" disabled>\n      <\/div>\n      <div class=\"timebar\"><span id=\"time\">0:00 \/ --:--<\/span><\/div>\n    <\/div>\n  <\/div>\n\n  <div id=\"readbox\" class=\"text\" lang=\"pa\" dir=\"ltr\" aria-live=\"polite\">\n    &#2597;&#2635;&#2652;&#2631; &#2616;&#2606;&#2631;&#2562; &#2581;&#2635;&#2616;&#2620;&#2623;&#2616;&#2620; &#2581;&#2608;&#2600; &#2596;&#2635;&#2562; &#2604;&#2622;&#2565;&#2598;, &#2583;&#2623;&#2672;&#2600;&#2624; &#2600;&#2626;&#2672; &#2604;&#2617;&#2625;&#2596; &#2597;&#2581;&#2622;&#2613;&#2591; &#2606;&#2617;&#2623;&#2616;&#2626;&#2616; &#2617;&#2635;&#2568;&#2404; &#2583;&#2623;&#2672;&#2600;&#2624; &#2600;&#2631; &#2588;&#2620;&#2606;&#2624;&#2600; &#2596;&#2631; &#2593;&#2623;&#2673;&#2583;&#2598;&#2623;&#2566;&#2562; &#2581;&#2623;&#2617;&#2622;, &quot;&#2606;&#2631;&#2608;&#2631; &#2581;&#2635;&#2610; &#2617;&#2625;&#2595; &#2617;&#2635;&#2608; &#2596;&#2622;&#2581;&#2596; &#2600;&#2617;&#2624;&#2562; &#2617;&#2632;, &#2606;&#2632;&#2600;&#2626;&#2672; &#2606;&#2598;&#2598; &#2610;&#2568; &#2581;&#2623;&#2616;&#2631; &#2617;&#2635;&#2608; &#2600;&#2626;&#2672; &#2604;&#2625;&#2610;&#2622;&#2569;&#2595;&#2622; &#2602;&#2575;&#2583;&#2622;&#2404;&quot;\n  <\/div>\n<\/div>\n\n<script>\n\/* ======= Precise timing configuration ======= *\/\nvar TIMING = {\n  \/** Modes:\n   *  - \"durations\": per-token durations (seconds)\n   *  - \"starts\": absolute start times (seconds)\n   *\/\n  mode: \"durations\",\n  durations: [\n    0.90, 0.45, 0.60, 0.30, 0.25, 0.60, \n    0.90, 0.35, 0.60, 0.70, 0.80, 1.70,\n    0.60, 0.30, 0.60, 0.30, 0.70, 0.65, \n    1.10, 0.30, 0.25, 0.30, 0.40, 0.40,\n    0.45, 0.90, 0.30, 0.40, 0.40, 0.30, 0.40, 0.50, 0.85\n  ],\n  starts: null,\n  TARGET_DURATION: 21.00,\n  normalizeToTarget: true,\n  lockToAudioDuration: true,\n  \/**\n   * OVERRIDES let you tweak timing of specific words without shifting others\n   * outside the same pinned region.\n   * - Set `overrides.durations` as a map: { index: seconds, ... }\n   * - Define `pins` as word indexes that act as segment boundaries.\n   *   Use 0 for the first word and \"END\" to pin the final boundary.\n   *   Edits only re-distribute time inside each segment; outside segments stay the same length.\n   *\/\n  overrides: {\n    durations: {\n      \/\/ Example: 5: 0.95, 6: 1.10\n    }\n  },\n  pins: [0, \"END\"]\n};\n\nvar ALIGN = {\n  offset: 0.00,\n  clickInside: 0.02, \/\/ seek a bit inside a segment when clicking a word\n  eps: 0.010\n};\n\n(function(){\n  var AUDIO_SRC = \"https:\/\/punjabikidz.com\/audio_files\/fat_beetle\/pg12\/fat_beetle_audio_pg12.mp3\";\n\n  var audio   = document.getElementById('player');\n  var btn     = document.getElementById('playbtn');\n  var seek    = document.getElementById('seek');\n  var timeEl  = document.getElementById('time');\n  var textEl  = document.getElementById('readbox');\n  var msgEl   = document.getElementById('msg');\n\n  var words=[], spans=[];\n  var starts=[], ends=[], timingsReady=false;\n  var lastActive=-1, rafId=null, userSeeking=false;\n  var srcSet=false, firstPlayJumped=false;\n  var lastIdxHint=0; \/\/ speeds up activeIndex by starting near previous\n\n  function setMsg(txt, isError){ msgEl.textContent = txt||''; msgEl.className = isError ? 'error' : ''; }\n  function fmtClock(s){ s=Math.max(0,Math.floor(s||0)); var m=Math.floor(s\/60), ss=String(s%60).padStart(2,'0'); return m+':'+ss; }\n  function dur(){ var d=audio.duration; return (isFinite(d)&&d>0&&d!==Infinity)?d:0; }\n\n  \/\/ Tokenize while preserving punctuation with the preceding word\n  function tokenize(str){\n    var clean = String(str||\"\")\n      .replace(\/[\\u200B\\u200C\\u200D]\/g,\"\")\n      .replace(\/[\\s\\u00A0]+\/g,\" \")\n      .trim();\n    if (!clean) return [];\n    return clean.split(\" \");\n  }\n\n  function renderWords(){\n    var src=(textEl.textContent||\"\").trim();\n    words = tokenize(src);\n    textEl.innerHTML=\"\";\n    spans = [];\n    words.forEach(function(w,i){\n      var s=document.createElement('span');\n      s.className='word';\n      s.textContent = w + (i < words.length-1 ? \" \" : \"\");\n      s.addEventListener('click', function(){ onWordClick(i); });\n      textEl.appendChild(s);\n      spans.push(s);\n    });\n    setActive(-1);\n  }\n\n  function setActive(idx){\n    if (idx===lastActive) return;\n    if (lastActive>=0 && spans[lastActive]) spans[lastActive].classList.remove('active');\n    if (idx>=0 && spans[idx]) spans[idx].classList.add('active');\n    lastActive=idx; lastIdxHint = Math.max(0, idx-1);\n  }\n\n  \/\/ Build timings from TIMING config. Will refit to audio duration if needed.\n  function buildTimings(){\n    var N = words.length;\n    if (!N) return false;\n\n    var dA = dur();\n    var useAudioFit = (TIMING.lockToAudioDuration && dA>0 && Math.abs((TIMING.TARGET_DURATION||0) - dA) > 0.05);\n\n    \/\/ Helper to ensure pins array is normalized to numeric indices [0..N]\n    function getPins(){\n      var raw = Array.isArray(TIMING.pins) ? TIMING.pins.slice() : [];\n      \/\/ Always include start and end pins\n      if (!raw.some(function(p){return p===0;})) raw.unshift(0);\n      if (!raw.some(function(p){return p===\"END\" || p===N;})) raw.push(\"END\");\n      var resolved = raw.map(function(p){ return (p===\"END\"? N : Math.min(Math.max(0, +p||0), N)); });\n      \/\/ Unique + sorted\n      resolved = Array.from(new Set(resolved)).sort(function(a,b){return a-b;});\n      if (resolved[0] !== 0) resolved.unshift(0);\n      if (resolved[resolved.length-1] !== N) resolved.push(N);\n      return resolved;\n    }\n\n    if (TIMING.mode === 'starts'){\n      if (!Array.isArray(TIMING.starts) || TIMING.starts.length!==N){\n        setMsg(\"Timing mismatch: \"+(TIMING.starts?TIMING.starts.length:0)+\" starts for \"+N+\" tokens. Update TIMING.starts.\", true);\n        return false;\n      }\n      \/\/ Copy and apply offset; no per-word override support in starts-mode.\n      starts = TIMING.starts.map(function(t){ return Math.max(0, (+t||0) + (ALIGN.offset||0)); });\n      ends = starts.slice(1).concat([ (useAudioFit? dA : (TIMING.TARGET_DURATION||starts[N-1])) ]);\n      for (var i=1;i<N;i++){ if (ends[i-1] > starts[i]) starts[i] = ends[i-1]; }\n    } else { \/\/ durations mode with segment-safe overrides\n      if (!Array.isArray(TIMING.durations) || TIMING.durations.length!==N){\n        setMsg(\"Timing mismatch: \"+(TIMING.durations?TIMING.durations.length:0)+\" durations for \"+N+\" tokens. Update TIMING.durations.\", true);\n        return false;\n      }\n      var base = TIMING.durations.map(function(x){ x=+x; return (isFinite(x)&&x>0)?x:0.05; });\n      var sumBase = base.reduce(function(a,b){return a+b;},0);\n      var targetTotal = (useAudioFit ? dA : (TIMING.normalizeToTarget ? (TIMING.TARGET_DURATION||sumBase) : sumBase));\n      var k = (sumBase>0 ? targetTotal\/sumBase : 1);\n      if (!isFinite(k) || k<=0) k=1;\n      var durs = base.map(function(v){ return v*k; }); \/\/ normalized to target (or audio)\n\n      \/\/ Apply segment-bounded overrides that keep each segment's total length unchanged\n      var pins = getPins();\n      var over = (TIMING.overrides && TIMING.overrides.durations) ? TIMING.overrides.durations : {};\n\n      for (var pi=0; pi<pins.length-1; pi++){\n        var a = pins[pi], b = pins[pi+1]; \/\/ segment is [a, b)\n        if (b<=a) continue;\n        var segIdx = [];\n        for (var ii=a; ii<b; ii++) segIdx.push(ii);\n        var Lseg = segIdx.reduce(function(acc,i){ return acc + durs[i]; }, 0);\n\n        \/\/ Separate overridden vs non-overridden within the segment\n        var overridden = [], nonOver = [];\n        segIdx.forEach(function(i){ (over.hasOwnProperty(i)) ? overridden.push(i) : nonOver.push(i); });\n\n        \/\/ Apply new durations to overridden indices (clamped to small minimum)\n        var sumOver = 0;\n        overridden.forEach(function(i){ var nv = Math.max(0.02, +over[i]||0); durs[i] = nv; sumOver += nv; });\n\n        var remaining = Math.max(0, Lseg - sumOver);\n        if (nonOver.length){\n          var baseNonSum = nonOver.reduce(function(acc,i){ return acc + durs[i]; }, 0); \/\/ current durs reflect normalized base here\n          if (baseNonSum <= 0){\n            \/\/ distribute evenly if all zeros\n            var even = remaining \/ nonOver.length;\n            nonOver.forEach(function(i){ durs[i] = even; });\n          } else {\n            \/\/ distribute proportionally to their current (normalized base) values\n            nonOver.forEach(function(i){ durs[i] = remaining * (durs[i]\/baseNonSum); });\n          }\n        } else if (sumOver > Lseg) {\n          \/\/ If overrides exceed the segment budget, scale them down to fit\n          var scale = Lseg \/ sumOver;\n          overridden.forEach(function(i){ durs[i] = durs[i] * scale; });\n        }\n      }\n\n      \/\/ Build starts\/ends from final durs\n      starts = new Array(N); ends = new Array(N);\n      var t = Math.max(0, +ALIGN.offset || 0);\n      for (var i=0;i<N;i++){ starts[i]=t; t+=durs[i]; ends[i]=t; }\n      if (useAudioFit) ends[N-1] = dA;\n    }\n\n    timingsReady = true;\n    return true;\n  }\n\n  function activeIndex(time){\n    time = Math.max(0, time);\n    var n = starts.length;\n    if (!n) return -1;\n    if (time >= ends[n-1] - ALIGN.eps) return n-1;\n\n    var i = lastIdxHint; if (i<0) i=0; if (i>=n) i=n-1;\n    if (time < starts[i]){\n      while (i>0 && time < starts[i]) i--;\n      while (i>0 && time < starts[i-1]) i--; \/\/ safety\n    } else if (time > ends[i]){\n      while (i<n-1 && time > ends[i]) i++;\n    }\n    return i;\n  }\n\n  function updateSeekMax(){\n    var D = dur();\n    if (D>0){ seek.max=D; seek.disabled=false; }\n  }\n  function setSeekFill(){\n    var max = +seek.max || 0, v = +seek.value || 0;\n    var percent = max>0 ? (v\/max)*100 : 0;\n    seek.style.setProperty(\"--percent\", percent+\"%\");\n  }\n\n  function tick(){\n    var t=audio.currentTime||0;\n    if (!userSeeking){ seek.value=t; setSeekFill(); }\n    var D=dur();\n    timeEl.textContent = D ? (fmtClock(t)+\" \/ \"+fmtClock(D)) : \"0:00 \/ --:--\";\n\n    var idx = activeIndex(t);\n    setActive(idx);\n\n    requestNextFrame();\n  }\n\n  function requestNextFrame(){\n    if (rafId) cancelAnimationFrame(rafId);\n    rafId = requestAnimationFrame(tick);\n  }\n\n  \/* Loading helpers *\/\n  function setRemoteSrcIfNeeded(){\n    if (srcSet) return;\n    var url = AUDIO_SRC + (AUDIO_SRC.indexOf('?')>-1 ? '&' : '?') + 'v=' + Date.now();\n    audio.src = url;\n    try{ audio.load(); }catch(e){}\n    srcSet = true;\n  }\n  function ensureMetadata(){\n    return new Promise(function(resolve){\n      if (dur()>0){ resolve(true); return; }\n      function once(){ audio.removeEventListener('loadedmetadata', once); resolve(true); }\n      audio.addEventListener('loadedmetadata', once);\n      try{ audio.load(); }catch(e){}\n      setTimeout(function(){ if (dur()>0){ try{ audio.removeEventListener('loadedmetadata', once);}catch(_){} resolve(true); } }, 3000);\n    });\n  }\n\n  \/* CLICK \u2192 jump to word and CONTINUE playback normally *\/\n  function onWordClick(i){\n    setRemoteSrcIfNeeded();\n    ensureMetadata().then(function(){\n      if (!timingsReady){ if (!buildTimings()) return; }\n      var s = starts[i], e = ends[i];\n      var inside = Math.min(ALIGN.clickInside, Math.max(0, (e - s)\/10));\n      var start = Math.min(Math.max(0, s + inside), Math.max(0, e - inside));\n      audio.pause();\n      audio.currentTime = Math.max(0.001, start);\n      setActive(i);\n      audio.play().catch(function(err){\n        setMsg(\"Playback blocked: \"+(err && (err.name||err.message) || \"unknown\")+\". Tap the red button again or check device mute\/volume.\", true);\n      });\n    });\n  }\n\n  \/* Main controls *\/\n  function syncBtnState(){\n    var playing = !audio.paused && !audio.ended;\n    if (playing) btn.classList.add('playing'); else btn.classList.remove('playing');\n    btn.setAttribute('aria-label', playing ? 'Pause' : 'Play');\n    btn.title = playing ? 'Pause' : 'Play';\n  }\n  function playPause(){\n    setRemoteSrcIfNeeded();\n    ensureMetadata().then(function(){\n      if (!timingsReady){ if (!buildTimings()) return; }\n      if (!firstPlayJumped && starts.length){\n        audio.currentTime = Math.max(0.001, starts[0] + Math.min(0.01, (ends[0]-starts[0])\/4));\n        firstPlayJumped = true;\n      }\n      if (audio.paused){\n        audio.play().catch(function(err){\n          setMsg(\"Playback blocked: \"+(err && (err.name||err.message) || \"unknown\")+\". Tap the red button again or check device mute\/volume.\", true);\n        });\n      } else {\n        audio.pause();\n      }\n    });\n  }\n\n  btn.addEventListener('click', playPause);\n  window.addEventListener('keydown', function(e){\n    if (e.code==='Space' && !\/input|textarea\/i.test(e.target.tagName)) { e.preventDefault(); playPause(); }\n  });\n\n  seek.addEventListener('input', function(){ userSeeking=true; setSeekFill(); if (timingsReady) setActive(activeIndex(+seek.value)); });\n  seek.addEventListener('change', function(){ audio.currentTime=+seek.value; userSeeking=false; });\n\n  audio.addEventListener('play',  function(){ syncBtnState(); requestNextFrame(); });\n  audio.addEventListener('pause', function(){ syncBtnState(); if (rafId){ cancelAnimationFrame(rafId); rafId=null; } });\n  audio.addEventListener('ended', function(){ syncBtnState(); if (rafId){ cancelAnimationFrame(rafId); rafId=null; } });\n\n  audio.addEventListener('loadedmetadata', function(){ updateSeekMax(); });\n  audio.addEventListener('durationchange', function(){ updateSeekMax(); });\n\n  audio.addEventListener('error', function(){\n    var err = audio.error; var code = err ? err.code : '';\n    setMsg('Audio error'+(code?(' (code '+code+')'):'')+'. Please verify the MP3 URL and HTTPS.', true);\n  });\n\n  function init(){\n    renderWords();\n    seek.disabled = true; seek.value = 0; seek.max = 0; setSeekFill();\n    setRemoteSrcIfNeeded();\n    ensureMetadata().then(function(){\n      if (TIMING.lockToAudioDuration){ timingsReady=false; }\n      if (!timingsReady){ buildTimings(); }\n      updateSeekMax();\n      setMsg('');\n      requestNextFrame();\n    });\n    syncBtnState();\n  }\n\n  if (document.readyState===\"loading\") document.addEventListener(\"DOMContentLoaded\", init);\n  else init();\n})();\n<\/script>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f82c256 e-con-full e-flex e-con e-parent\" data-id=\"f82c256\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-08b0daa e-con-full e-flex e-con e-child\" data-id=\"08b0daa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db4e816 elementor-widget elementor-widget-image\" data-id=\"db4e816\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/punjabikidz.com\/the-fat-beetle-audio-pg-11\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/punjabikidz.com\/home\/wp-content\/uploads\/elementor\/thumbs\/Previous-rafx0z3r71eru75oar12r5l6smvt83wa16e9q90h0g.webp\" title=\"Previous\" alt=\"Previous button\" loading=\"lazy\"\/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6070152 e-con-full e-flex e-con e-child\" data-id=\"6070152\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d6e740c elementor-widget elementor-widget-image\" data-id=\"d6e740c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/punjabikidz.com\/the-fat-beetle-audio-pg-13\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/punjabikidz.com\/home\/wp-content\/uploads\/elementor\/thumbs\/Next-ra79qgw89qjr6n8df6dg1kt0jobodnufm4gglr0e8w.webp\" title=\"Next\" alt=\"Next Button\" loading=\"lazy\"\/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f45c72f e-flex e-con-boxed e-con e-parent\" data-id=\"f45c72f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-250665b elementor-widget elementor-widget-html\" data-id=\"250665b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-3139934624092739\"\n     crossorigin=\"anonymous\"><\/script>\n<!-- Horizontal Responsive -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-3139934624092739\" data-ad-slot=\"5337999693\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The Fat Beetle &ndash; &#2606;&#2635;&#2591;&#2622; &#2581;&#2624;&#2652;&#2622; (Listen &amp; Read) https:\/\/punjabikidz.com\/home\/wp-content\/uploads\/2025\/10\/FB-Pg-12.mp4 Click Play to Listen The Fat Beetle&#2606;&#2635;&#2591;&#2622; &#2581;&#2624;&#2652;&#2622; Page 12 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"normal-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"wf_page_folders":[46],"class_list":["post-4690","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/pages\/4690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/comments?post=4690"}],"version-history":[{"count":50,"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/pages\/4690\/revisions"}],"predecessor-version":[{"id":4831,"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/pages\/4690\/revisions\/4831"}],"wp:attachment":[{"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/media?parent=4690"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/wf_page_folders?post=4690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}