{"id":3873,"date":"2025-08-11T06:31:25","date_gmt":"2025-08-11T06:31:25","guid":{"rendered":"https:\/\/punjabikidz.com\/home\/?page_id=3873"},"modified":"2025-09-11T13:24:54","modified_gmt":"2025-09-11T13:24:54","slug":"the-fat-beetle-audio-pg-1","status":"publish","type":"page","link":"https:\/\/punjabikidz.com\/home\/the-fat-beetle-audio-pg-1\/","title":{"rendered":"The Fat Beetle Audio \u2013 Pg 1"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"3873\" class=\"elementor elementor-3873\" 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-0ba4739 elementor-widget elementor-widget-image\" data-id=\"0ba4739\" 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<img fetchpriority=\"high\" decoding=\"async\" width=\"544\" height=\"362\" src=\"https:\/\/punjabikidz.com\/home\/wp-content\/uploads\/2025\/08\/Fat-Beetle-Pg-1a.gif\" class=\"attachment-large size-large wp-image-4400\" alt=\"\"\/>\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-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\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 1<\/strong><\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\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>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a852ab1 e-flex e-con-boxed e-con e-parent\" data-id=\"a852ab1\" 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-a428ac7 elementor-widget elementor-widget-html\" data-id=\"a428ac7\" 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; 21s spaced<\/title>\n\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:root{\n  --accent:#e11d48; --hi-bg:#ffe3e8; --ink:#e7e9ee; --border:#e8eaee; --r:16px;\n  --grad1:#0b0f1a; --grad2:#131a26; --ring:rgba(255,255,255,.10); --track:#243040; --tick:rgba(255,255,255,.08);\n  --pbtn1:#ff3b30; --pbtn2:#cf0f21;\n}\n*{box-sizing:border-box}\nhtml,body{height:100%}\nbody{\n  margin:0; padding:28px; background:\n    radial-gradient(1600px 900px at 10% -10%, #eaf2ff 0%, transparent 60%),\n    radial-gradient(1200px 700px at 90% 120%, #ffe9ef 0%, transparent 60%),\n    #ffffff;\n  color:#0f172a;\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:980px;margin:0 auto}\n#msg{max-width:800px;margin:0 auto 12px;color:#64748b;font:13px\/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial}\n#msg.error{color:#b91c1c}\n\n\/* Player *\/\n.player-wrap{ width:450px; max-width:100%; margin:6px auto 18px; }\n.player{\n  position:relative;\n  background:\n    radial-gradient(120% 160% at 10% -20%, rgba(255,255,255,.12) 0, rgba(255,255,255,0) 60%),\n    linear-gradient(180deg, var(--grad1), var(--grad2));\n  border-radius: var(--r);\n  padding: 16px 16px 12px;\n  color: var(--ink);\n  border:1px solid var(--ring);\n  box-shadow: 0 30px 60px rgba(16,24,40,.25), 0 8px 20px rgba(16,24,40,.18), inset 0 1px 0 rgba(255,255,255,.12);\n  overflow: hidden; backdrop-filter: blur(6px);\n}\n.player::before{\n  content:\"\"; position:absolute; inset:-1px; border-radius:inherit; padding:1px;\n  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,0) 35%, rgba(225,29,72,.35) 65%, rgba(255,255,255,.15));\n  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;\n}\n.row{ display:grid; grid-template-columns: 72px 1fr; gap:12px; align-items:center; }\n\n\/* Play\/Pause *\/\n.pbtn{\n  width:64px; height:64px; border-radius:999px;\n  background:\n    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.24) 0, rgba(255,255,255,0) 60%),\n    linear-gradient(180deg,var(--pbtn1),var(--pbtn2));\n  border:1px solid rgba(255,255,255,.25);\n  display:flex; align-items:center; justify-content:center; cursor:pointer;\n  box-shadow: 0 14px 28px rgba(207,15,33,.38), inset 0 1px 0 rgba(255,255,255,.40);\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.06) }\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 *\/\n.seek{\n  --percent:0%; appearance:none; -webkit-appearance:none; width:100%; height:10px;\n  border-radius:999px; outline:none; border:1px solid rgba(255,255,255,.18);\n  background:\n    repeating-linear-gradient(90deg, var(--tick), var(--tick) 2px, transparent 2px, transparent 8px),\n    linear-gradient(to right, #ff5861 0 var(--percent), var(--track) var(--percent) 100%);\n  box-shadow: inset 0 2px 8px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.05);\n}\n.seek[disabled]{ opacity:.5; cursor:not-allowed; pointer-events:none; }\n.seek::-webkit-slider-thumb,\n.seek::-moz-range-thumb{\n  width:18px;height:18px;border-radius:999px;background:#fff;border:2px solid #cf0f21;\n  box-shadow:0 6px 14px rgba(0,0,0,.35), 0 0 0 4px rgba(207,15,33,.20); cursor:pointer;\n}\n.seek::-moz-range-track{ background:transparent }\n.timebar{ display:flex; justify-content:space-between; gap:12px; font-size:12px; color:#9fb0c7; margin-top:8px;\n  font-family: ui-monospace, Menlo, Consolas, monospace; }\n\n\/* Text *\/\n.text{\n  font-size:1.8rem; line-height:2.25;\n  background:linear-gradient(180deg,#ffffff, #fbfdff);\n  border:1px solid var(--border); border-radius:20px;\n  padding:22px 22px 24px; max-width:900px; margin:18px auto;\n  text-align:left; text-indent:0;\n  box-shadow: 0 14px 34px rgba(15,23,42,.06), 0 3px 10px rgba(15,23,42,.04);\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.text .title-line{ text-align:center; font-weight:700; font-size:1.65rem; line-height:1.25; margin:0 0 8px; }\n.text .body{ text-indent:1.5em; }\n.word{ display:inline; cursor:pointer; border-radius:12px; transition: background .06s linear, box-shadow .2s ease; }\n.word:hover{ background:#fff5f7 }\n.text .word.active{ color:var(--accent) !important; background:linear-gradient(to bottom, var(--hi-bg), var(--hi-bg)); box-shadow:0 0 0 0.16em rgba(255,227,232,.95); }\n\n\/* Single player only *\/\naudio{ display:none }\n\n@media (max-width:520px){\n  .player-wrap{ width:100% }\n  .row{ grid-template-columns:64px 1fr }\n  .text{ font-size:1.55rem; line-height:2.05; padding:18px }\n}\n<\/style>\n\n\n<div class=\"container\">\n\n  <div id=\"msg\"><\/div>\n\n  <audio id=\"player\" preload=\"metadata\" playsinline type=\"audio\/mpeg\" src=\"https:\/\/punjabikidz.com\/audio_files\/fat_beetle\/pg1\/fat_beetle_audio_pg1.mp3\"><\/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=\"timeCur\">0:00<\/span><span id=\"timeTot\">--:--<\/span><\/div>\n    <\/div>\n  <\/div>\n\n  <div id=\"readbox\" class=\"text\" lang=\"pa\" dir=\"ltr\" aria-live=\"polite\">\n    <div class=\"title-line\">&#2606;&#2635;&#2591;&#2622; &#2581;&#2624;&#2652;&#2622;<\/div>\n    <div class=\"body\">\n      &#2567;&#2673;&#2581; &#2613;&#2622;&#2608; &#2598;&#2624; &#2583;&#2673;&#2610; &#2617;&#2632;, &#2567;&#2673;&#2581; &#2587;&#2635;&#2591;&#2631; &#2588;&#2623;&#2617;&#2631; &#2582;&#2631;&#2596; &#2613;&#2623;&#2673;&#2586; &#2581;&#2568; &#2596;&#2608;&#2637;&#2617;&#2622;&#2562; &#2598;&#2631; <a class=\"glossaryLink\" aria-describedby=\"tt\" data-cmtooltip=\"&lt;div class=glossaryItemTitle&gt;&#2603;&#2625;&#2673;&#2610;&lt;\/div&gt;&lt;div class=glossaryItemBody&gt;&amp;lt;!-- wp:paragraph --&amp;gt;Meaning: &amp;lt;span class=&amp;quot;has-inline-color has-vivid-cyan-blue-color&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;Flower&amp;lt;\/strong&amp;gt;&amp;lt;\/span&amp;gt;&amp;lt;br&amp;gt;Pronunciation: &amp;lt;span class=&amp;quot;has-inline-color has-vivid-red-color&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;Phull&amp;lt;\/strong&amp;gt;&amp;lt;\/span&amp;gt;&amp;lt;br\/&amp;gt;&amp;lt;!-- \/wp:paragraph --&amp;gt;&amp;lt;!-- wp:paragraph --&amp;gt;&amp;lt;br\/&amp;gt;&amp;lt;!-- \/wp:paragraph --&amp;gt;&amp;lt;!-- wp:columns --&amp;gt;&amp;lt;div class=&amp;quot;wp-block-columns&amp;quot;&amp;gt;&amp;lt;!-- wp:column --&amp;gt;&amp;lt;div class=&amp;quot;wp-block-column&amp;quot;&amp;gt;&amp;lt;!-- wp:audio {&amp;quot;id&amp;quot;:5324} --&amp;gt;&amp;lt;figure class=&amp;quot;wp-block-audio&amp;quot;&amp;gt;&amp;lt;\/figure&amp;gt;&amp;lt;!-- \/wp:audio --&amp;gt;&amp;lt;!-- wp:image {&amp;quot;id&amp;quot;:553,&amp;quot;sizeSlug&amp;quot;:&amp;quot;large&amp;quot;,&amp;quot;linkDestination&amp;quot;:&amp;quot;custom&amp;quot;} --&amp;gt;&amp;lt;figure class=&amp;quot;wp-block-image size-large&amp;quot;&amp;gt;&amp;lt;\/figure&amp;gt;&amp;lt;!-- \/wp:image --&amp;gt;&amp;lt;!-- wp:paragraph --&amp;gt;&amp;lt;br\/&amp;gt;&amp;lt;!-- \/wp:paragraph --&amp;gt;&amp;lt;\/div&amp;gt;&amp;lt;!-- \/wp:column --&amp;gt;&amp;lt;!-- wp:column --&amp;gt;&amp;lt;div class=&amp;quot;wp-block-column&amp;quot;&amp;gt;&amp;lt;!-- wp:image {&amp;quot;align&amp;quot;:&amp;quot;center&amp;quot;,&amp;quot;id&amp;quot;:1752,&amp;quot;width&amp;quot;:134,&amp;quot;height&amp;quot;:207,&amp;quot;sizeSlug&amp;quot;:&amp;quot;full&amp;quot;,&amp;quot;linkDestination&amp;quot;:&amp;quot;none&amp;quot;} --&amp;gt;&amp;lt;figure class=&amp;quot;wp-block-image aligncenter size-full is-resized&amp;quot;&amp;gt;&amp;lt;\/figure&amp;gt;&amp;lt;!-- \/wp:image --&amp;gt;&amp;lt;!-- wp:paragraph --&amp;gt;&amp;lt;br\/&amp;gt;&amp;lt;!-- \/wp:paragraph --&amp;gt;&amp;lt;\/div&amp;gt;&amp;lt;!-- \/wp:column --&amp;gt;&amp;lt;\/div&amp;gt;&amp;lt;!-- \/wp:columns --&amp;gt;&amp;lt;!-- wp:embed {&amp;quot;url&amp;quot;:&amp;quot;https:\/\/youtu.be\/Y9ab4kLIbPY&amp;quot;,&amp;quot;type&amp;quot;:&amp;quot;video&amp;quot;,&amp;quot;providerNameSlug&amp;quot;:&amp;quot;youtube&amp;quot;,&amp;quot;responsive&amp;quot;:true,&amp;quot;align&amp;quot;:&amp;quot;center&amp;quot;,&amp;quot;className&amp;quot;:&amp;quot;wp-embed-aspect-16-9 wp-has-aspect-ratio&amp;quot;} --&amp;gt;&amp;lt;figure class=&amp;quot;wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio&amp;quot;&amp;gt;&amp;lt;div class=&amp;quot;wp-block-embed__wrapper&amp;quot;&amp;gt;https:\/\/youtu.be\/Y9ab4kLIbPY&amp;lt;\/div&amp;gt;&amp;lt;\/figure&amp;gt;&amp;lt;!-- \/wp:embed --&amp;gt;&amp;lt;!-- wp:paragraph --&amp;gt;&amp;lt;br\/&amp;gt;&amp;lt;!-- \/wp:paragraph --&amp;gt;&lt;\/div&gt;\" href=\"https:\/\/punjabikidz.com\/home\/glossary\/%e0%a8%ab%e0%a9%81%e0%a9%b1%e0%a8%b2\/\" data-gt-translate-attributes='[{\"attribute\":\"data-cmtooltip\", \"format\":\"html\"}]' tabindex=\"0\" role=\"link\">&#2603;&#2625;&#2673;&#2610;<\/a>, &#2604;&#2626;&#2591;&#2631;, &#2602;&#2636;&#2598;&#2631; &#2565;&#2596;&#2631; &#2598;&#2608;&#2673;&#2582;&#2596; &#2569;&#2583;&#2631; &#2617;&#2635;&#2575; &#2616;&#2600;&#2404; &#2582;&#2631;&#2596; &#2604;&#2617;&#2625;&#2596; &#2616;&#2625;&#2672;&#2598;&#2608; &#2565;&#2596;&#2631; &#2617;&#2608;&#2623;&#2566;&#2610;&#2624; &#2600;&#2622;&#2610; &#2605;&#2608;&#2623;&#2566; &#2617;&#2635;&#2567;&#2566; &#2616;&#2624;&#2404;\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n\/* ===== Manual word-start timings spaced to ~21s total =====\n   32 tokens total (2 title + 30 body).\n   - Title: 0.00, 2.00\n   - Body: punctuation-aware pacing from 3.00s to 20.40s.\n*\/\nvar TITLE_TOKEN_COUNT = 2;\nvar TIMING = {\n  mode: \"starts\",\n  normalizeToAudio: false,\n  pad: { pre: 0.00, post: 0.03 },\n  starts: [\n    \/* Title (2 words) *\/\n    0.00, 2.00,\n\n    \/* Body (30 words) \u2014 punctuation-aware, ends ~21.00s *\/\n    3.00, 3.5, 4, 4.5, 5, 5.50, 6, 6.5, 7, 7.5,\n    8.0, 8.5, 9.0, 9.5, 11.28, 11.92, 12.50, 13.08, 13.66, 14.24,\n    14.82, 15.70, 16.28, 16.86, 17.44, 18.02, 18.60, 19.18, 19.76, 20.40\n  ]\n};\n\nvar CLICK_INDEX_SHIFT = 0;\nvar READ_TO_END_ON_CLICK = true;\n\n(function(){\n  var audio   = document.getElementById('player');\n  var btn     = document.getElementById('playbtn');\n  var seek    = document.getElementById('seek');\n  var timeCur = document.getElementById('timeCur');\n  var timeTot = document.getElementById('timeTot');\n  var textEl  = document.getElementById('readbox');\n  var msgEl   = document.getElementById('msg');\n\n  var words=[], spans=[], wordTimings=[];\n  var lastActive=-1, rafId=null, userSeeking=false;\n\n  var segmentPlaying=false, segmentEnd=0, segmentTimer=null;\n  var selectedTimer=null;\n\n  var EPS = 0.008, INSIDE = EPS + 0.004;\n\n  function setMsg(txt, isError){ msgEl.textContent = txt||''; msgEl.className = isError ? 'error' : ''; }\n  function fmt(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 getDurationSafe(){ var d=audio.duration; return (isFinite(d)&&d>0&&d!==Infinity)?d:0; }\n\n  function tokenize(str){\n    var clean = String(str||\"\").replace(\/[\\u200B\\u200C\\u200D]\/g,\"\").replace(\/[\\s\\u00A0]+\/g,\" \").trim();\n    return clean ? clean.split(\" \") : [];\n  }\n\n  function renderWords(){\n    var src=(textEl.textContent||\"\").trim();\n    var tokens = tokenize(src);\n\n    if (Array.isArray(TIMING.starts) && TIMING.starts.length !== tokens.length){\n      setMsg(\"Note: starts array has \"+TIMING.starts.length+\" entries but text has \"+tokens.length+\" words. Adjust as needed.\", true);\n    }\n\n    textEl.innerHTML=\"\"; spans = [];\n\n    var tdiv=document.createElement('div'); tdiv.className='title-line';\n    for (var i=0;i<Math.min(TITLE_TOKEN_COUNT, tokens.length);i++){\n      var st=document.createElement('span'); st.className='word';\n      st.textContent=tokens[i] + ' ';\n      st.dataset.index = String(i);\n      st.addEventListener('click', onWordClick);\n      tdiv.appendChild(st); spans.push(st);\n    }\n    textEl.appendChild(tdiv);\n\n    var bdiv=document.createElement('div'); bdiv.className='body';\n    for (var j=TITLE_TOKEN_COUNT;j<tokens.length;j++){\n      var sb=document.createElement('span'); sb.className='word';\n      sb.textContent=tokens[j] + (j<tokens.length-1 ? ' ' : '');\n      sb.dataset.index = String(j);\n      sb.addEventListener('click', onWordClick);\n      bdiv.appendChild(sb); spans.push(sb);\n    }\n    textEl.appendChild(bdiv);\n\n    words = tokens;\n    setActive(0);\n  }\n\n  function markSelected(i){\n    if (selectedTimer) { clearTimeout(selectedTimer); selectedTimer=null; }\n    spans.forEach(function(el){ el.classList.remove('selected'); });\n    if (spans[i]) {\n      spans[i].classList.add('selected');\n      selectedTimer = setTimeout(function(){ if (spans[i]) spans[i].classList.remove('selected'); }, 650);\n    }\n  }\n\n  function onWordClick(e){\n    var i = Number(e.currentTarget.dataset.index || 0);\n    markSelected(i);\n    var j = Math.max(0, Math.min(words.length-1, i + CLICK_INDEX_SHIFT));\n    if (READ_TO_END_ON_CLICK){ playFromWordContinuous(j); }\n    else                      { playSingleWord(j); }\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;\n  }\n\n  function startsToTimings(starts, totalDur){\n    var out=[];\n    for (var i=0;i<starts.length;i++){\n      var s=+starts[i]; if (!isFinite(s)) s=0;\n      var e = (i<starts.length-1) ? +starts[i+1] : (isFinite(totalDur)&&totalDur>0? totalDur : s+0.4);\n      if (!isFinite(e) || e<=s) e = s + 0.3;\n      out.push({start:Math.max(0,s), end:Math.max(s,e)});\n    }\n    return out;\n  }\n  function computeWordTimings(){\n    var d = getDurationSafe();\n    if (Array.isArray(TIMING.starts)) return startsToTimings(TIMING.starts, d);\n    return [];\n  }\n  function indexForTime(t){\n    for (var i=0;i<wordTimings.length;i++){\n      var seg=wordTimings[i];\n      if (t >= seg.start + EPS && t < seg.end - EPS) return i;\n    }\n    if (wordTimings.length && t >= (wordTimings[wordTimings.length-1].end - EPS)) return wordTimings.length-1;\n    return -1;\n  }\n\n  function updateSeekMax(){\n    var d=getDurationSafe();\n    if (d>0){ seek.max=d; seek.disabled=false; timeTot.textContent = fmt(d); }\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=getDurationSafe();\n    timeCur.textContent = fmt(t);\n    if (d && timeTot.textContent===\"--:--\") timeTot.textContent = fmt(d);\n    setActive(indexForTime(t));\n    rafId = requestAnimationFrame(tick);\n  }\n\n  async function playFromWordContinuous(i){\n    if (!wordTimings.length) return;\n    var seg = wordTimings[i]; if (!seg) return;\n    clearTimeout(segmentTimer); segmentPlaying = false;\n    var start  = Math.min(Math.max(0, seg.start + 0.012), Math.max(0, seg.end - 0.012));\n    audio.currentTime = start;\n    try{ await audio.play(); setMsg(''); setActive(i); }\n    catch(_){ setMsg(\"Playback blocked. Click again or check mute\/volume.\", true); }\n  }\n\n  function playSingleWord(segIndex){\n    if (!wordTimings.length) return;\n    var seg = wordTimings[segIndex]; if (!seg) return;\n    var d   = getDurationSafe();\n    var nxt = wordTimings[segIndex+1];\n    var start  = Math.min(Math.max(0, seg.start + 0.012), Math.max(0, seg.end - 0.012));\n    var end    = nxt ? Math.max(start + 0.02, nxt.start - 0.010)\n                     : Math.min(d || (seg.end + 0.04), seg.end + 0.03);\n    clearTimeout(segmentTimer);\n    segmentPlaying = true; segmentEnd = end;\n    audio.currentTime = start;\n    audio.play().then(function(){\n      setActive(segIndex);\n      var ms = Math.max(20, Math.round((end - start)*1000));\n      segmentTimer = setTimeout(stopSegment, ms);\n    }).catch(function(){ setMsg(\"Playback blocked. Click again or check mute\/volume.\", true); });\n  }\n\n  function stopSegment(){\n    if (!segmentPlaying) return;\n    segmentPlaying=false;\n    clearTimeout(segmentTimer);\n    audio.pause();\n    if (isFinite(segmentEnd)) audio.currentTime = segmentEnd;\n  }\n\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    if (segmentPlaying) { stopSegment(); return; }\n    if (audio.paused){ audio.play().catch(function(){ setMsg(\"Playback blocked. Click again or check mute\/volume.\", true); }); }\n    else { audio.pause(); }\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(); setActive(indexForTime(+seek.value)); });\n  seek.addEventListener('change', function(){ audio.currentTime=+seek.value; userSeeking=false; });\n\n  audio.addEventListener('play',  function(){ syncBtnState(); if (!rafId) rafId=requestAnimationFrame(tick); });\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(){\n    updateSeekMax();\n    renderWords();\n    wordTimings = computeWordTimings();\n    setMsg('');\n    if (!rafId) rafId=requestAnimationFrame(tick);\n  });\n  audio.addEventListener('durationchange', function(){\n    updateSeekMax();\n    wordTimings = computeWordTimings();\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  if (document.readyState===\"loading\") document.addEventListener(\"DOMContentLoaded\", init);\n  else init();\n  function init(){\n    setMsg('');\n    seek.disabled = true; seek.value = 0; seek.max = 0; setSeekFill();\n    syncBtnState();\n  }\n})();\n<\/script>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d18c00e elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"d18c00e\" 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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-958a609 e-flex e-con-boxed e-con e-parent\" data-id=\"958a609\" 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-ee2e9f4 e-con-full e-flex e-con e-child\" data-id=\"ee2e9f4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-12f7624 e-con-full e-flex e-con e-child\" data-id=\"12f7624\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-df049fe e-con-full e-flex e-con e-child\" data-id=\"df049fe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d59c1c6 elementor-widget elementor-widget-image\" data-id=\"d59c1c6\" 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-2\/\">\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\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<div class=\"elementor-element elementor-element-a430d94 elementor-widget elementor-widget-spacer\" data-id=\"a430d94\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\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) The Fat Beetle&#2606;&#2635;&#2591;&#2622; &#2581;&#2624;&#2652;&#2622; Page 1 Click Play to Listen Punjabi [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","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-3873","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/pages\/3873","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=3873"}],"version-history":[{"count":65,"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/pages\/3873\/revisions"}],"predecessor-version":[{"id":4908,"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/pages\/3873\/revisions\/4908"}],"wp:attachment":[{"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/media?parent=3873"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/punjabikidz.com\/home\/wp-json\/wp\/v2\/wf_page_folders?post=3873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}