{"id":11016,"date":"2026-07-12T12:54:25","date_gmt":"2026-07-12T09:24:25","guid":{"rendered":"https:\/\/bolandian.ir\/home\/?page_id=11016"},"modified":"2026-07-12T17:28:17","modified_gmt":"2026-07-12T13:58:17","slug":"audio","status":"publish","type":"page","link":"https:\/\/bolandian.ir\/home\/audio\/","title":{"rendered":"\u0635\u0648\u062a\u200c\u0647\u0627"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11016\" class=\"elementor elementor-11016\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-769b1c0 e-flex e-con-boxed e-con e-parent\" data-id=\"769b1c0\" 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-513bd37 elementor-widget elementor-widget-html\" data-id=\"513bd37\" 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<div class=\"voice-archive-wrap\" dir=\"rtl\">\r\n  <div class=\"va-layout\">\r\n\r\n    <!-- Cards -->\r\n    <div class=\"voice-archive-grid\" id=\"voiceArchiveGrid\"><\/div>\r\n\r\n    <!-- Filters -->\r\n    <aside class=\"va-filter-panel\">\r\n      <button class=\"va-filter-btn active\" data-filter=\"audio\" type=\"button\">\r\n        <span class=\"va-filter-icon va-eq\">\r\n          <i><\/i><i><\/i><i><\/i>\r\n        <\/span>\r\n        <span>\u0647\u0645\u0647<\/span>\r\n      <\/button>\r\n\r\n      <button class=\"va-filter-btn\" data-filter=\"podcast\" type=\"button\">\r\n        <span class=\"va-filter-icon va-dot\"><\/span>\r\n        <span>\u067e\u0627\u062f\u06a9\u0633\u062a<\/span>\r\n      <\/button>\r\n\r\n      <button class=\"va-filter-btn\" data-filter=\"speech\" type=\"button\">\r\n        <span class=\"va-filter-icon va-dot\"><\/span>\r\n        <span>\u0628\u06cc\u0627\u0646\u0627\u062a<\/span>\r\n      <\/button>\r\n    <\/aside>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  :root{\r\n    --va-navy:#061f42;\r\n    --va-navy-2:#082a56;\r\n    --va-card:#0a294f;\r\n    --va-gold:#d4bd7d;\r\n    --va-gold-2:#bfa568;\r\n    --va-gold-light:#ead79e;\r\n    --va-white:#ffffff;\r\n    --va-muted:rgba(255,255,255,.72);\r\n    --va-dark-filter:rgba(255,255,255,.10);\r\n    --va-dark-filter-2:rgba(255,255,255,.075);\r\n    --va-radius:12px;\r\n  }\r\n\r\n  .voice-archive-wrap{\r\n    width:100%;\r\n    padding:10px;\r\n    color:#fff;\r\n    font-family:inherit;\r\n    box-sizing:border-box;\r\n    overflow:hidden;\r\n  }\r\n\r\n  .voice-archive-wrap *{\r\n    box-sizing:border-box;\r\n  }\r\n\r\n  .va-layout{\r\n    display:grid;\r\n    grid-template-columns:1fr 170px;\r\n    gap:22px;\r\n    align-items:start;\r\n    direction:ltr;\r\n  }\r\n\r\n  .voice-archive-grid{\r\n    display:grid;\r\n    grid-template-columns:repeat(2,minmax(220px,1fr));\r\n    gap:24px;\r\n    direction:rtl;\r\n  }\r\n\r\n  \/* Filter Panel *\/\r\n  .va-filter-panel{\r\n    direction:rtl;\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:9px;\r\n    width:100%;\r\n  }\r\n\r\n  .va-filter-btn{\r\n    position:relative;\r\n    width:100%;\r\n    height:44px;\r\n    border:0;\r\n    outline:0;\r\n    cursor:pointer;\r\n    border-radius:10px;\r\n    padding:0 16px;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n    background:rgba(255,255,255,.11);\r\n    color:rgba(255,255,255,.65);\r\n    font-size:13px;\r\n    font-weight:700;\r\n    overflow:hidden;\r\n    transition:\r\n      background .28s ease,\r\n      color .28s ease,\r\n      transform .28s ease,\r\n      box-shadow .28s ease;\r\n  }\r\n\r\n  .va-filter-btn::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.16) 45%, transparent 70%);\r\n    transform:translateX(120%);\r\n    transition:.55s ease;\r\n  }\r\n\r\n  .va-filter-btn:hover::before{\r\n    transform:translateX(-120%);\r\n  }\r\n\r\n  .va-filter-btn:hover{\r\n    transform:translateX(-3px);\r\n    background:rgba(255,255,255,.15);\r\n    color:#fff;\r\n  }\r\n\r\n  .va-filter-btn.active{\r\n    background:linear-gradient(135deg,var(--va-gold),var(--va-gold-2));\r\n    color:#fff;\r\n    box-shadow:0 10px 25px rgba(212,189,125,.22);\r\n  }\r\n\r\n  .va-filter-icon{\r\n    width:17px;\r\n    height:17px;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    flex:0 0 auto;\r\n    opacity:.9;\r\n  }\r\n\r\n  .va-dot{\r\n    border:1.7px solid currentColor;\r\n    border-radius:50%;\r\n    width:10px;\r\n    height:10px;\r\n  }\r\n\r\n  .va-eq{\r\n    gap:2px;\r\n  }\r\n\r\n  .va-eq i{\r\n    display:block;\r\n    width:3px;\r\n    height:14px;\r\n    border-radius:4px;\r\n    background:currentColor;\r\n    opacity:.72;\r\n    animation:vaEqualizer 1s ease-in-out infinite;\r\n  }\r\n\r\n  .va-eq i:nth-child(2){\r\n    animation-delay:.15s;\r\n    height:8px;\r\n  }\r\n\r\n  .va-eq i:nth-child(3){\r\n    animation-delay:.3s;\r\n    height:13px;\r\n  }\r\n\r\n  .va-filter-btn:not(.active) .va-eq i{\r\n    animation:none;\r\n  }\r\n\r\n  @keyframes vaEqualizer{\r\n    0%,100%{ transform:scaleY(.45); }\r\n    50%{ transform:scaleY(1); }\r\n  }\r\n\r\n  \/* Card *\/\r\n  .va-card{\r\n    position:relative;\r\n    min-width:0;\r\n    transition:\r\n      opacity .35s ease,\r\n      transform .35s ease,\r\n      filter .35s ease;\r\n    animation:vaCardIn .55s ease both;\r\n  }\r\n\r\n  .va-card.hide{\r\n    display:none !important;\r\n  }\r\n\r\n  @keyframes vaCardIn{\r\n    from{\r\n      opacity:0;\r\n      transform:translateY(18px) scale(.97);\r\n    }\r\n    to{\r\n      opacity:1;\r\n      transform:translateY(0) scale(1);\r\n    }\r\n  }\r\n\r\n  .va-visual{\r\n    position:relative;\r\n    height:406px;\r\n    border-radius:9px;\r\n    overflow:hidden;\r\n    background:#102d54;\r\n    box-shadow:0 18px 34px rgba(0,0,0,.18);\r\n    transform:translateZ(0);\r\n    transition:\r\n      transform .35s ease,\r\n      box-shadow .35s ease,\r\n      filter .35s ease;\r\n  }\r\n\r\n  .va-card:hover .va-visual{\r\n    transform:translateY(-4px);\r\n    box-shadow:0 24px 48px rgba(0,0,0,.28);\r\n  }\r\n\r\n  \/* Blurred big background *\/\r\n  .va-bg{\r\n    position:absolute;\r\n    inset:-18px;\r\n    background-size:cover;\r\n    background-position:center;\r\n    filter:blur(8px) saturate(1.08);\r\n    transform:scale(1.12);\r\n    opacity:.82;\r\n    z-index:1;\r\n  }\r\n\r\n  .va-bg-overlay{\r\n    position:absolute;\r\n    inset:0;\r\n    z-index:2;\r\n    background:\r\n      linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18)),\r\n      radial-gradient(circle at center, rgba(255,255,255,.08), rgba(0,0,0,.28));\r\n  }\r\n\r\n  \/* Center circle image *\/\r\n  .va-avatar-wrap{\r\n    position:absolute;\r\n    z-index:4;\r\n    top:92px;\r\n    left:50%;\r\n    width:122px;\r\n    height:122px;\r\n    transform:translateX(-50%);\r\n    border-radius:50%;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n  }\r\n\r\n  .va-avatar-ring{\r\n    position:absolute;\r\n    inset:-8px;\r\n    border-radius:50%;\r\n    background:\r\n      linear-gradient(135deg, rgba(255,255,255,.25), rgba(212,189,125,.95), rgba(255,255,255,.18));\r\n    box-shadow:\r\n      0 0 0 1px rgba(255,255,255,.18),\r\n      0 0 24px rgba(212,189,125,.34);\r\n    animation:vaRingPulse 2.4s ease-in-out infinite;\r\n  }\r\n\r\n  .va-card.is-playing .va-avatar-ring{\r\n    animation:vaRingPulseFast 1.2s ease-in-out infinite;\r\n  }\r\n\r\n  @keyframes vaRingPulse{\r\n    0%,100%{\r\n      transform:scale(1);\r\n      opacity:.85;\r\n    }\r\n    50%{\r\n      transform:scale(1.045);\r\n      opacity:1;\r\n    }\r\n  }\r\n\r\n  @keyframes vaRingPulseFast{\r\n    0%,100%{\r\n      transform:scale(1);\r\n      box-shadow:\r\n        0 0 0 1px rgba(255,255,255,.18),\r\n        0 0 18px rgba(212,189,125,.32);\r\n    }\r\n    50%{\r\n      transform:scale(1.07);\r\n      box-shadow:\r\n        0 0 0 5px rgba(212,189,125,.10),\r\n        0 0 34px rgba(212,189,125,.55);\r\n    }\r\n  }\r\n\r\n  .va-avatar{\r\n    position:relative;\r\n    z-index:2;\r\n    width:108px;\r\n    height:108px;\r\n    border-radius:50%;\r\n    overflow:hidden;\r\n    background:#ddd;\r\n    box-shadow:0 12px 25px rgba(0,0,0,.24);\r\n  }\r\n\r\n  .va-avatar img{\r\n    width:100%;\r\n    height:100%;\r\n    object-fit:cover;\r\n    display:block;\r\n  }\r\n\r\n  \/* Play + Playerbar *\/\r\n  .va-player-area{\r\n    position:absolute;\r\n    z-index:6;\r\n    top:186px;\r\n    left:50%;\r\n    width:min(88%, 215px);\r\n    transform:translateX(-50%);\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:center;\r\n    gap:10px;\r\n    pointer-events:auto;\r\n  }\r\n\r\n  .va-play{\r\n    position:relative;\r\n    width:58px;\r\n    height:58px;\r\n    border:0;\r\n    outline:0;\r\n    cursor:pointer;\r\n    border-radius:10px;\r\n    background:linear-gradient(135deg,var(--va-gold-light),var(--va-gold-2));\r\n    color:#fff;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    box-shadow:\r\n      0 12px 22px rgba(0,0,0,.22),\r\n      inset 0 1px 0 rgba(255,255,255,.22);\r\n    overflow:hidden;\r\n    transition:\r\n      transform .25s ease,\r\n      box-shadow .25s ease,\r\n      filter .25s ease;\r\n  }\r\n\r\n  .va-play::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:-20%;\r\n    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);\r\n    transform:translateX(95%);\r\n    transition:.6s ease;\r\n  }\r\n\r\n  .va-play:hover::before{\r\n    transform:translateX(-95%);\r\n  }\r\n\r\n  .va-play:hover{\r\n    transform:translateY(-2px) scale(1.04);\r\n    box-shadow:\r\n      0 16px 28px rgba(0,0,0,.27),\r\n      0 0 24px rgba(212,189,125,.23);\r\n  }\r\n\r\n  .va-card.is-playing .va-play{\r\n    animation:vaPlayBeat 1.45s ease-in-out infinite;\r\n  }\r\n\r\n  @keyframes vaPlayBeat{\r\n    0%,100%{ transform:scale(1); }\r\n    50%{ transform:scale(1.055); }\r\n  }\r\n\r\n  .va-play svg{\r\n    position:relative;\r\n    z-index:2;\r\n    width:25px;\r\n    height:25px;\r\n    fill:#fff;\r\n    display:block;\r\n  }\r\n\r\n  .va-icon-play{\r\n    margin-right:-3px;\r\n  }\r\n\r\n  .va-play .va-icon-pause{\r\n    display:none;\r\n  }\r\n\r\n  .va-play.is-playing .va-icon-play{\r\n    display:none;\r\n  }\r\n\r\n  .va-play.is-playing .va-icon-pause{\r\n    display:block;\r\n  }\r\n\r\n  .va-playerbar{\r\n    width:100%;\r\n    direction:ltr;\r\n    padding:9px 10px 10px;\r\n    border-radius:13px;\r\n    background:rgba(4,18,38,.45);\r\n    border:1px solid rgba(255,255,255,.16);\r\n    backdrop-filter:blur(13px);\r\n    -webkit-backdrop-filter:blur(13px);\r\n    box-shadow:0 14px 28px rgba(0,0,0,.22);\r\n    opacity:0;\r\n    visibility:hidden;\r\n    transform:translateY(-8px) scale(.96);\r\n    max-height:0;\r\n    overflow:hidden;\r\n    transition:\r\n      opacity .28s ease,\r\n      visibility .28s ease,\r\n      transform .28s ease,\r\n      max-height .28s ease,\r\n      padding .28s ease;\r\n  }\r\n\r\n  .va-playerbar.show{\r\n    opacity:1;\r\n    visibility:visible;\r\n    transform:translateY(0) scale(1);\r\n    max-height:180px;\r\n  }\r\n\r\n  .va-time-row{\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n    gap:8px;\r\n    color:#fff;\r\n    font-size:11px;\r\n    font-weight:800;\r\n    margin-bottom:7px;\r\n    direction:ltr;\r\n  }\r\n\r\n  .va-progress{\r\n    direction:ltr !important;\r\n    -webkit-appearance:none;\r\n    appearance:none;\r\n    width:100%;\r\n    height:6px;\r\n    border-radius:999px;\r\n    outline:none;\r\n    cursor:pointer;\r\n    background:linear-gradient(\r\n      to right,\r\n      var(--va-gold-light) 0%,\r\n      var(--va-gold-light) 0%,\r\n      rgba(255,255,255,.24) 0%,\r\n      rgba(255,255,255,.24) 100%\r\n    );\r\n  }\r\n\r\n  .va-progress::-webkit-slider-runnable-track{\r\n    height:6px;\r\n    border-radius:999px;\r\n    background:transparent;\r\n  }\r\n\r\n  .va-progress::-webkit-slider-thumb{\r\n    -webkit-appearance:none;\r\n    appearance:none;\r\n    width:15px;\r\n    height:15px;\r\n    margin-top:-4.5px;\r\n    border-radius:50%;\r\n    background:#fff;\r\n    border:3px solid var(--va-gold);\r\n    box-shadow:0 3px 10px rgba(0,0,0,.32);\r\n    transition:transform .18s ease;\r\n  }\r\n\r\n  .va-progress:active::-webkit-slider-thumb{\r\n    transform:scale(1.18);\r\n  }\r\n\r\n  .va-progress::-moz-range-track{\r\n    height:6px;\r\n    border-radius:999px;\r\n    background:transparent;\r\n  }\r\n\r\n  .va-progress::-moz-range-thumb{\r\n    width:15px;\r\n    height:15px;\r\n    border-radius:50%;\r\n    background:#fff;\r\n    border:3px solid var(--va-gold);\r\n    box-shadow:0 3px 10px rgba(0,0,0,.32);\r\n  }\r\n\r\n  .va-seek-row{\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    gap:10px;\r\n    margin-top:8px;\r\n    direction:rtl;\r\n  }\r\n\r\n  .va-seek-btn{\r\n    border:0;\r\n    outline:0;\r\n    cursor:pointer;\r\n    padding:5px 8px;\r\n    border-radius:8px;\r\n    background:rgba(255,255,255,.12);\r\n    color:#fff;\r\n    font-size:10px;\r\n    font-weight:800;\r\n    transition:\r\n      background .22s ease,\r\n      transform .22s ease;\r\n  }\r\n\r\n  .va-seek-btn:hover{\r\n    background:rgba(212,189,125,.28);\r\n    transform:translateY(-1px);\r\n  }\r\n\r\n  \/* Meta under image *\/\r\n  .va-meta{\r\n    position:relative;\r\n    padding:13px 0 0;\r\n    min-height:96px;\r\n    direction:rtl;\r\n  }\r\n\r\n  .va-title-row{\r\n    display:grid;\r\n    grid-template-columns:1fr auto;\r\n    gap:10px;\r\n  }\r\n\r\n  .va-title{\r\n    margin:0;\r\n    color:#fff;\r\n    font-size:13px;\r\n    font-weight:900;\r\n    line-height:1.9;\r\n    text-align:right;\r\n    white-space:normal;\r\n    overflow:visible;\r\n    text-overflow:clip;\r\n    word-break:break-word;\r\n  }\r\n\r\n  .va-badge{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    min-width:82px;\r\n    height:35px;\r\n    padding:0 14px;\r\n    border-radius:999px;\r\n    background:linear-gradient(135deg,var(--va-gold-light),var(--va-gold-2));\r\n    color:#1b2335;\r\n    font-size:12px;\r\n    font-weight:900;\r\n    box-shadow:0 10px 18px rgba(0,0,0,.18);\r\n    white-space:nowrap;\r\n    transform:translateY(-2px);\r\n  }\r\n\r\n  .va-sub{\r\n    display:none;\r\n  }\r\n\r\n  .va-audio{\r\n    display:none;\r\n  }\r\n\r\n  @media (max-width:900px){\r\n    .va-layout{\r\n      grid-template-columns:1fr;\r\n    }\r\n\r\n    .va-filter-panel{\r\n      order:-1;\r\n      display:grid;\r\n      grid-template-columns:repeat(3,1fr);\r\n      gap:8px;\r\n    }\r\n  }\r\n\r\n  @media (max-width:640px){\r\n    .voice-archive-grid{\r\n      grid-template-columns:1fr;\r\n    }\r\n\r\n    .va-visual{\r\n      height:450px;\r\n    }\r\n\r\n    .va-filter-btn{\r\n      font-size:12px;\r\n      padding:0 10px;\r\n    }\r\n\r\n    .va-title-row{\r\n      grid-template-columns:1fr;\r\n    }\r\n\r\n    .va-badge{\r\n      justify-self:center;\r\n      order:-1;\r\n    }\r\n\r\n    .va-title{\r\n      font-size:13px;\r\n    }\r\n  }\r\n\r\n<\/style>\r\n\r\n<script>\r\n  (function(){\r\n    const items = [\r\n      {\r\n        type: \"audio\",\r\n        group: \"speech\",\r\n        badge: \"\u0635\u0648\u062a \u0628\u06cc\u0627\u0646\u0627\u062a\",\r\n        title: \"\u0633\u067e\u0627\u0633 \u0648 \u0642\u062f\u0631\u062f\u0627\u0646\u06cc \u0627\u0632 \u06a9\u0627\u0631\u06a9\u0646\u0627\u0646 \u062e\u062f\u0648\u0645 \u0648\u0632\u0627\u0631\u062a \u06a9\u0634\u0648\u0631 \u0628\u0631\u0627\u06cc \u062d\u0636\u0648\u0631 \u0628\u0627\u0634\u06a9\u0648\u0647 \u062f\u0631 \u0645\u0631\u0627\u0633\u0645 \u062a\u0634\u06cc\u06cc\u0639 \u0634\u0647\u06cc\u062f \u0628\u0632\u0631\u06af\u0648\u0627\u0631\",\r\n        subtitle: \"\u0622\u0631\u0634\u06cc\u0648 \u0635\u062f\u0627\",\r\n        image: \"https:\/\/bolandian.ir\/Images\/finalbg.jpg\",\r\n        audio: \"https:\/\/bolandian.ir\/home\/wp-content\/uploads\/2026\/07\/\u0641\u0627\u06cc\u0644-\u0635\u0648\u062a\u06cc-\u062a\u0634\u06cc\u06cc\u0639-\u0631\u0647\u0628\u0631-\u0634\u0647\u06cc\u062f.m4a\"\r\n      }\r\n    ];\r\n\r\n    const grid = document.getElementById(\"voiceArchiveGrid\");\r\n    if(!grid) return;\r\n\r\n    function formatTime(sec){\r\n      if(!isFinite(sec) || isNaN(sec)) return \"00:00\";\r\n      const m = Math.floor(sec \/ 60);\r\n      const s = Math.floor(sec % 60);\r\n      return String(m).padStart(2, \"0\") + \":\" + String(s).padStart(2, \"0\");\r\n    }\r\n\r\n    function setProgressVisual(range, percent){\r\n      const value = Math.max(0, Math.min(100, Number(percent) || 0));\r\n\r\n      \/*\r\n        \u0646\u06a9\u062a\u0647 \u0645\u0647\u0645:\r\n        \u0686\u0648\u0646 \u06a9\u0644 \u0635\u0641\u062d\u0647 RTL \u0627\u0633\u062a\u060c \u062e\u0648\u062f input \u0631\u0627 LTR \u06a9\u0631\u062f\u06cc\u0645.\r\n        \u067e\u0633 \u0647\u0645 thumb \u0648 \u0647\u0645 \u0631\u0646\u06af \u0646\u0648\u0627\u0631 \u0627\u0632 \u0686\u067e \u0628\u0647 \u0631\u0627\u0633\u062a \u062d\u0631\u06a9\u062a \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.\r\n      *\/\r\n      range.style.background = `\r\n        linear-gradient(\r\n          to right,\r\n          var(--va-gold-light) 0%,\r\n          var(--va-gold-light) ${value}%,\r\n          rgba(255,255,255,.24) ${value}%,\r\n          rgba(255,255,255,.24) 100%\r\n        )\r\n      `;\r\n    }\r\n\r\n    function renderCards(){\r\n      grid.innerHTML = items.map((item) => {\r\n        return `\r\n          <article class=\"va-card\" data-type=\"${item.type}\" data-group=\"${item.group}\">\r\n            <div class=\"va-visual\">\r\n\r\n              <div class=\"va-bg\" style=\"background-image:url('${item.image}')\"><\/div>\r\n              <div class=\"va-bg-overlay\"><\/div>\r\n\r\n              <div class=\"va-avatar-wrap\">\r\n                <div class=\"va-avatar-ring\"><\/div>\r\n                <div class=\"va-avatar\">\r\n                  <img decoding=\"async\" src=\"${item.image}\" alt=\"${item.title}\">\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <div class=\"va-player-area\">\r\n                <button class=\"va-play\" type=\"button\" aria-label=\"\u067e\u062e\u0634 \/ \u062a\u0648\u0642\u0641\">\r\n                  <svg class=\"va-icon-play\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                    <path d=\"M8 5.14v13.72c0 .72.78 1.17 1.4.81l10.2-6.86a.94.94 0 0 0 0-1.62L9.4 4.33A.94.94 0 0 0 8 5.14z\"><\/path>\r\n                  <\/svg>\r\n                  <svg class=\"va-icon-pause\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                    <path d=\"M7 5h3.5v14H7zm6.5 0H17v14h-3.5z\"><\/path>\r\n                  <\/svg>\r\n                <\/button>\r\n\r\n                <div class=\"va-playerbar\">\r\n                  <div class=\"va-time-row\">\r\n                    <span class=\"va-current\">00:00<\/span>\r\n                    <span class=\"va-duration\">00:00<\/span>\r\n                  <\/div>\r\n\r\n                  <input class=\"va-progress\" dir=\"ltr\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"0.1\">\r\n\r\n                  <div class=\"va-seek-row\">\r\n                    <button class=\"va-seek-btn va-backward\" type=\"button\">10- \u062b\u0627\u0646\u06cc\u0647<\/button>\r\n                    <button class=\"va-seek-btn va-forward\" type=\"button\">10+ \u062b\u0627\u0646\u06cc\u0647<\/button>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"va-meta\">\r\n              <div class=\"va-title-row\">\r\n                <h3 class=\"va-title\">${item.title}<\/h3>\r\n                <div class=\"va-badge\">${item.badge}<\/div>\r\n              <\/div>\r\n              <div class=\"va-sub\">${item.subtitle}<\/div>\r\n            <\/div>\r\n\r\n            <audio class=\"va-audio\" preload=\"metadata\" src=\"${item.audio}\"><\/audio>\r\n          <\/article>\r\n        `;\r\n      }).join(\"\");\r\n\r\n      initPlayers();\r\n      initFilters();\r\n    }\r\n\r\n    function closePlayerUI(card, resetProgress = false){\r\n      if(!card) return;\r\n\r\n      const playBtn = card.querySelector(\".va-play\");\r\n      const playerBar = card.querySelector(\".va-playerbar\");\r\n      const progress = card.querySelector(\".va-progress\");\r\n      const current = card.querySelector(\".va-current\");\r\n\r\n      card.classList.remove(\"is-playing\");\r\n\r\n      if(playBtn){\r\n        playBtn.classList.remove(\"is-playing\");\r\n      }\r\n\r\n      \/*\r\n        \u0637\u0628\u0642 \u062f\u0631\u062e\u0648\u0627\u0633\u062a:\r\n        \u0648\u0642\u062a\u06cc Pause \u0634\u062f\u060c \u0646\u0648\u0627\u0631 \u067e\u062e\u0634 \u0645\u062e\u0641\u06cc \u0634\u0648\u062f.\r\n      *\/\r\n      if(playerBar){\r\n        playerBar.classList.remove(\"show\");\r\n      }\r\n\r\n      if(resetProgress && progress){\r\n        progress.value = 0;\r\n        setProgressVisual(progress, 0);\r\n      }\r\n\r\n      if(resetProgress && current){\r\n        current.textContent = \"00:00\";\r\n      }\r\n    }\r\n\r\n    function openPlayerUI(card){\r\n      if(!card) return;\r\n\r\n      const playBtn = card.querySelector(\".va-play\");\r\n      const playerBar = card.querySelector(\".va-playerbar\");\r\n\r\n      card.classList.add(\"is-playing\");\r\n\r\n      if(playBtn){\r\n        playBtn.classList.add(\"is-playing\");\r\n      }\r\n\r\n      if(playerBar){\r\n        playerBar.classList.add(\"show\");\r\n      }\r\n    }\r\n\r\n    function pauseAllExcept(currentAudio){\r\n      document.querySelectorAll(\".va-audio\").forEach(audio => {\r\n        if(audio !== currentAudio){\r\n          audio.pause();\r\n          closePlayerUI(audio.closest(\".va-card\"), false);\r\n        }\r\n      });\r\n    }\r\n\r\n    function initPlayers(){\r\n      const cards = grid.querySelectorAll(\".va-card\");\r\n\r\n      cards.forEach(card => {\r\n        const audio = card.querySelector(\".va-audio\");\r\n        const playBtn = card.querySelector(\".va-play\");\r\n        const playerBar = card.querySelector(\".va-playerbar\");\r\n        const progress = card.querySelector(\".va-progress\");\r\n        const current = card.querySelector(\".va-current\");\r\n        const duration = card.querySelector(\".va-duration\");\r\n        const backBtn = card.querySelector(\".va-backward\");\r\n        const forwardBtn = card.querySelector(\".va-forward\");\r\n\r\n        if(!audio || !playBtn || !progress) return;\r\n\r\n        progress.dir = \"ltr\";\r\n        setProgressVisual(progress, 0);\r\n\r\n        audio.addEventListener(\"loadedmetadata\", () => {\r\n          duration.textContent = formatTime(audio.duration);\r\n        });\r\n\r\n        audio.addEventListener(\"timeupdate\", () => {\r\n          if(audio.duration){\r\n            const percent = (audio.currentTime \/ audio.duration) * 100;\r\n\r\n            progress.value = percent;\r\n            setProgressVisual(progress, percent);\r\n\r\n            current.textContent = formatTime(audio.currentTime);\r\n            duration.textContent = formatTime(audio.duration);\r\n          }\r\n        });\r\n\r\n        audio.addEventListener(\"pause\", () => {\r\n          \/*\r\n            \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 Pause \u06a9\u0646\u062f\u060c \u0646\u0648\u0627\u0631 \u0647\u0645 \u062c\u0645\u0639 \u0645\u06cc\u200c\u0634\u0648\u062f.\r\n            \u0627\u0645\u0627 \u0627\u06af\u0631 \u0641\u0627\u06cc\u0644 \u062a\u0645\u0627\u0645 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f\u060c event ended \u062c\u062f\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u0634\u0648\u062f.\r\n          *\/\r\n          if(!audio.ended){\r\n            closePlayerUI(card, false);\r\n          }\r\n        });\r\n\r\n        audio.addEventListener(\"ended\", () => {\r\n          closePlayerUI(card, true);\r\n          audio.currentTime = 0;\r\n        });\r\n\r\n        playBtn.addEventListener(\"click\", async () => {\r\n          if(audio.paused){\r\n            pauseAllExcept(audio);\r\n\r\n            try{\r\n              await audio.play();\r\n              openPlayerUI(card);\r\n            }catch(e){\r\n              closePlayerUI(card, false);\r\n            }\r\n          }else{\r\n            audio.pause();\r\n            closePlayerUI(card, false);\r\n          }\r\n        });\r\n\r\n        progress.addEventListener(\"input\", () => {\r\n          const percent = parseFloat(progress.value || 0);\r\n          setProgressVisual(progress, percent);\r\n\r\n          if(audio.duration){\r\n            audio.currentTime = (percent \/ 100) * audio.duration;\r\n          }\r\n        });\r\n\r\n        backBtn.addEventListener(\"click\", () => {\r\n          audio.currentTime = Math.max(0, audio.currentTime - 10);\r\n        });\r\n\r\n        forwardBtn.addEventListener(\"click\", () => {\r\n          if(audio.duration){\r\n            audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);\r\n          }else{\r\n            audio.currentTime = audio.currentTime + 10;\r\n          }\r\n        });\r\n\r\n        \/*\r\n          \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u0646\u0648\u0627\u0631 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u062f\u060c \u0646\u0648\u0627\u0631 \u0628\u0627\u0632 \u0628\u0645\u0627\u0646\u062f.\r\n          \u0627\u0645\u0627 \u0627\u06af\u0631 Pause \u0628\u0627\u0634\u062f \u0648 \u0641\u0642\u0637 seek \u06a9\u0646\u062f\u060c \u067e\u062e\u0634 \u0634\u0631\u0648\u0639 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f.\r\n        *\/\r\n        if(playerBar){\r\n          playerBar.addEventListener(\"click\", e => {\r\n            e.stopPropagation();\r\n          });\r\n        }\r\n      });\r\n    }\r\n\r\n    function initFilters(){\r\n      const buttons = document.querySelectorAll(\".va-filter-btn\");\r\n      const cards = grid.querySelectorAll(\".va-card\");\r\n\r\n      buttons.forEach(btn => {\r\n        btn.addEventListener(\"click\", () => {\r\n          buttons.forEach(b => b.classList.remove(\"active\"));\r\n          btn.classList.add(\"active\");\r\n\r\n          const filter = btn.getAttribute(\"data-filter\");\r\n\r\n          cards.forEach(card => {\r\n            const type = card.getAttribute(\"data-type\");\r\n            const group = card.getAttribute(\"data-group\");\r\n            const audio = card.querySelector(\".va-audio\");\r\n\r\n            \/*\r\n              \u0647\u0646\u06af\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0641\u06cc\u0644\u062a\u0631\u060c \u0627\u06af\u0631 \u06a9\u0627\u0631\u062a\u06cc \u0645\u062e\u0641\u06cc \u0634\u062f\u060c\r\n              \u0635\u062f\u0627 \u0647\u0645 \u0642\u0637\u0639 \u0634\u0648\u062f \u0648 \u0646\u0648\u0627\u0631\u0634 \u0628\u0633\u062a\u0647 \u0634\u0648\u062f.\r\n            *\/\r\n            const shouldShow =\r\n              filter === \"all\" ||\r\n              filter === type ||\r\n              filter === group;\r\n\r\n            if(shouldShow){\r\n              card.classList.remove(\"hide\");\r\n            }else{\r\n              if(audio){\r\n                audio.pause();\r\n              }\r\n              closePlayerUI(card, false);\r\n              card.classList.add(\"hide\");\r\n            }\r\n          });\r\n        });\r\n      });\r\n\r\n      const defaultBtn = document.querySelector('.va-filter-btn[data-filter=\"audio\"]');\r\n      if(defaultBtn){\r\n        defaultBtn.click();\r\n      }\r\n    }\r\n\r\n    renderCards();\r\n  })();\r\n<\/script>\r\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0647\u0645\u0647 \u067e\u0627\u062f\u06a9\u0633\u062a \u0628\u06cc\u0627\u0646\u0627\u062a<\/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-11016","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bolandian.ir\/home\/wp-json\/wp\/v2\/pages\/11016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bolandian.ir\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bolandian.ir\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bolandian.ir\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bolandian.ir\/home\/wp-json\/wp\/v2\/comments?post=11016"}],"version-history":[{"count":38,"href":"https:\/\/bolandian.ir\/home\/wp-json\/wp\/v2\/pages\/11016\/revisions"}],"predecessor-version":[{"id":11063,"href":"https:\/\/bolandian.ir\/home\/wp-json\/wp\/v2\/pages\/11016\/revisions\/11063"}],"wp:attachment":[{"href":"https:\/\/bolandian.ir\/home\/wp-json\/wp\/v2\/media?parent=11016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}