{"id":7237,"date":"2026-09-08T12:44:16","date_gmt":"2026-09-08T04:44:16","guid":{"rendered":"https:\/\/pthqibnusina.com\/?page_id=7237"},"modified":"2026-09-08T12:44:58","modified_gmt":"2026-09-08T04:44:58","slug":"alat-bantu-menghafaz-al-quran","status":"publish","type":"page","link":"https:\/\/pthqibnusina.com\/?page_id=7237","title":{"rendered":"Alat Bantu Menghafaz Al-Quran"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7237\" class=\"elementor elementor-7237\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-efab1e5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"efab1e5\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-37bbb80\" data-id=\"37bbb80\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5b8a9ad elementor-widget elementor-widget-html\" data-id=\"5b8a9ad\" 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 id=\"murajaah-app\">\n  <style>\n    #murajaah-app{\n      max-width:900px;\n      margin:20px auto;\n      font-family:Arial,sans-serif;\n      color:#17342c;\n    }\n    #murajaah-app .box{\n      background:#fff;\n      border:1px solid #ddd;\n      border-radius:16px;\n      padding:18px;\n      margin-bottom:15px;\n      box-shadow:0 4px 15px rgba(0,0,0,.05);\n    }\n    #murajaah-app h2{\n      margin-top:0;\n      color:#0f5b45;\n    }\n    #murajaah-app .grid{\n      display:grid;\n      grid-template-columns:repeat(2,1fr);\n      gap:12px;\n    }\n    #murajaah-app label{\n      display:block;\n      font-weight:bold;\n      margin-bottom:6px;\n      font-size:14px;\n    }\n    #murajaah-app select,\n    #murajaah-app button{\n      width:100%;\n      padding:12px;\n      border-radius:10px;\n      border:1px solid #ccc;\n      font-size:16px;\n    }\n    #murajaah-app button{\n      background:#0f5b45;\n      color:white;\n      border:none;\n      font-weight:bold;\n      cursor:pointer;\n    }\n    #murajaah-app .btn-stop{\n      background:#a33d3d;\n    }\n    #murajaah-app .actions{\n      display:grid;\n      grid-template-columns:2fr 1fr;\n      gap:10px;\n      margin-top:14px;\n    }\n    #murajaah-app .arabic{\n      direction:rtl;\n      text-align:center;\n      font-size:42px;\n      line-height:1.9;\n      margin:20px 0;\n      font-family:\"Traditional Arabic\",\"Amiri\",serif;\n    }\n    #murajaah-app .info{\n      text-align:center;\n      color:#666;\n      font-size:14px;\n    }\n    #murajaah-app .surah-name{\n      text-align:center;\n      font-weight:bold;\n      color:#0f5b45;\n      font-size:18px;\n    }\n    #murajaah-app .progress{\n      height:10px;\n      background:#eee;\n      border-radius:20px;\n      overflow:hidden;\n      margin-top:15px;\n    }\n    #murajaah-app .progress-bar{\n      height:100%;\n      width:0%;\n      background:#0f5b45;\n    }\n    #murajaah-app .controls{\n      display:grid;\n      grid-template-columns:repeat(3,1fr);\n      gap:8px;\n      margin-top:15px;\n    }\n    #murajaah-app .controls button{\n      background:#e8eee9;\n      color:#0f5b45;\n    }\n    @media(max-width:600px){\n      #murajaah-app .grid{\n        grid-template-columns:1fr;\n      }\n      #murajaah-app .actions{\n        grid-template-columns:1fr;\n      }\n      #murajaah-app .arabic{\n        font-size:32px;\n      }\n    }\n  <\/style>\n\n  <div class=\"box\">\n    <h2>\ud83d\udcd6 Murajaah Hafazan Al-Quran<\/h2>\n    <p>\n      Pilih surah dan ayat yang hendak diulang.\n      Sesuai untuk hafazan dan murajaah pelajar.\n    <\/p>\n\n    <div class=\"grid\">\n      <div>\n        <label>Surah Mula<\/label>\n        <select id=\"mh-start-surah\"><\/select>\n      <\/div>\n\n      <div>\n        <label>Ayat Mula<\/label>\n        <select id=\"mh-start-ayah\"><\/select>\n      <\/div>\n\n      <div>\n        <label>Surah Akhir<\/label>\n        <select id=\"mh-end-surah\"><\/select>\n      <\/div>\n\n      <div>\n        <label>Ayat Akhir<\/label>\n        <select id=\"mh-end-ayah\"><\/select>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"box\">\n    <div class=\"grid\">\n      <div>\n        <label>Kaedah Ulangan<\/label>\n        <select id=\"mh-mode\">\n          <option value=\"ayah\">Ulang setiap ayat dahulu<\/option>\n          <option value=\"range\">Ulang semua ayat sebagai satu set<\/option>\n        <\/select>\n      <\/div>\n\n      <div>\n        <label>Bilangan Ulangan<\/label>\n        <select id=\"mh-repeat\">\n          <option value=\"1\">1 kali<\/option>\n          <option value=\"3\">3 kali<\/option>\n          <option value=\"5\" selected>5 kali<\/option>\n          <option value=\"7\">7 kali<\/option>\n          <option value=\"10\">10 kali<\/option>\n          <option value=\"15\">15 kali<\/option>\n          <option value=\"20\">20 kali<\/option>\n        <\/select>\n      <\/div>\n\n      <div>\n        <label>Qari<\/label>\n        <select id=\"mh-reciter\">\n          <option value=\"ar.alafasy\">Mishary Rashid Alafasy<\/option>\n          <option value=\"ar.abdulbasitmurattal\">Abdul Basit<\/option>\n          <option value=\"ar.husary\">Mahmoud Khalil Al-Husary<\/option>\n          <option value=\"ar.minshawi\">Al-Minshawi<\/option>\n        <\/select>\n      <\/div>\n\n      <div>\n        <label>Jeda<\/label>\n        <select id=\"mh-gap\">\n          <option value=\"0\">Tiada<\/option>\n          <option value=\"1000\">1 saat<\/option>\n          <option value=\"2000\" selected>2 saat<\/option>\n          <option value=\"3000\">3 saat<\/option>\n          <option value=\"5000\">5 saat<\/option>\n        <\/select>\n      <\/div>\n    <\/div>\n\n    <div class=\"actions\">\n      <button id=\"mh-start\">\u25b6\ufe0f Mulakan Murajaah<\/button>\n      <button id=\"mh-stop\" class=\"btn-stop\">\u25a0 Berhenti<\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"box\" id=\"mh-player\">\n    <div class=\"surah-name\" id=\"mh-surah-title\">\n      Pilih ayat dan tekan Mulakan Murajaah\n    <\/div>\n\n    <div class=\"arabic\" id=\"mh-arabic\">\n      \u0627\u0644\u0642\u0631\u0622\u0646 \u0627\u0644\u0643\u0631\u064a\u0645\n    <\/div>\n\n    <div class=\"info\" id=\"mh-counter\"><\/div>\n    <div class=\"info\" id=\"mh-status\">Bersedia<\/div>\n\n    <div class=\"progress\">\n      <div class=\"progress-bar\" id=\"mh-progress\"><\/div>\n    <\/div>\n\n    <div class=\"controls\">\n      <button id=\"mh-prev\">\u25c0\ufe0f Ayat<\/button>\n      <button id=\"mh-pause\">\u23f8\ufe0f Jeda<\/button>\n      <button id=\"mh-next\">Ayat \u25b6\ufe0f<\/button>\n    <\/div>\n  <\/div>\n\n  <audio id=\"mh-audio\" preload=\"auto\"><\/audio>\n\n  <script>\n  (function(){\n\n    const API = \"https:\/\/api.alquran.cloud\/v1\";\n\n    const $ = id => document.getElementById(id);\n\n    const startSurah = $(\"mh-start-surah\");\n    const startAyah = $(\"mh-start-ayah\");\n    const endSurah = $(\"mh-end-surah\");\n    const endAyah = $(\"mh-end-ayah\");\n\n    const mode = $(\"mh-mode\");\n    const repeat = $(\"mh-repeat\");\n    const reciter = $(\"mh-reciter\");\n    const gap = $(\"mh-gap\");\n\n    const startBtn = $(\"mh-start\");\n    const stopBtn = $(\"mh-stop\");\n\n    const surahTitle = $(\"mh-surah-title\");\n    const arabic = $(\"mh-arabic\");\n    const counter = $(\"mh-counter\");\n    const status = $(\"mh-status\");\n    const progress = $(\"mh-progress\");\n\n    const audio = $(\"mh-audio\");\n\n    const pauseBtn = $(\"mh-pause\");\n    const prevBtn = $(\"mh-prev\");\n    const nextBtn = $(\"mh-next\");\n\n    let surahs = [];\n    let originalVerses = [];\n    let playlist = [];\n\n    let currentIndex = 0;\n    let stopped = true;\n    let token = 0;\n\n    async function api(url){\n\n      const response = await fetch(url);\n\n      if(!response.ok){\n        throw new Error(\"Gagal mengambil data Al-Quran.\");\n      }\n\n      const json = await response.json();\n\n      return json.data;\n    }\n\n    async function loadSurahs(){\n\n      try{\n\n        surahs = await api(API + \"\/surah\");\n\n        let html = \"\";\n\n        surahs.forEach(function(s){\n\n          html +=\n          '<option value=\"'+s.number+'\">'+\n          s.number+\". \"+s.englishName+\n          \" \u2014 \"+s.name+\n          \"<\/option>\";\n\n        });\n\n        startSurah.innerHTML = html;\n        endSurah.innerHTML = html;\n\n        startSurah.value = 1;\n        endSurah.value = 1;\n\n        loadAyahList(\"start\");\n        loadAyahList(\"end\");\n\n      }catch(e){\n\n        status.innerHTML =\n        \"Tidak dapat memuatkan senarai surah. Sila semak internet.\";\n\n      }\n    }\n\n    function getSurah(number){\n\n      return surahs.find(function(s){\n        return Number(s.number) === Number(number);\n      });\n\n    }\n\n    function loadAyahList(type){\n\n      const surahSelect =\n      type === \"start\" ? startSurah : endSurah;\n\n      const ayahSelect =\n      type === \"start\" ? startAyah : endAyah;\n\n      const surah = getSurah(surahSelect.value);\n\n      if(!surah) return;\n\n      let html = \"\";\n\n      for(let i=1;i<=surah.numberOfAyahs;i++){\n\n        html +=\n        '<option value=\"'+i+'\">'+i+\"<\/option>\";\n\n      }\n\n      ayahSelect.innerHTML = html;\n\n    }\n\n    startSurah.addEventListener(\"change\",function(){\n\n      loadAyahList(\"start\");\n\n    });\n\n    endSurah.addEventListener(\"change\",function(){\n\n      loadAyahList(\"end\");\n\n    });\n\n    async function createVerseRange(){\n\n      let startS = Number(startSurah.value);\n      let startA = Number(startAyah.value);\n\n      let endS = Number(endSurah.value);\n      let endA = Number(endAyah.value);\n\n      if(\n        endS < startS ||\n        (endS === startS && endA < startA)\n      ){\n\n        throw new Error(\n        \"Ayat akhir mesti selepas ayat mula.\"\n        );\n\n      }\n\n      let verses = [];\n\n      for(let s=startS;s<=endS;s++){\n\n        status.innerHTML =\n        \"Memuatkan Surah \"+s+\"...\";\n\n        let url =\n        API+\n        \"\/surah\/\"+\n        s+\n        \"\/editions\/quran-uthmani,\"+\n        encodeURIComponent(reciter.value);\n\n        let data = await api(url);\n\n        let textEdition = data[0];\n        let audioEdition = data[1];\n\n        let from =\n        s === startS ? startA : 1;\n\n        let to =\n        s === endS\n        ? endA\n        : textEdition.ayahs.length;\n\n        for(let a=from;a<=to;a++){\n\n          let textAyah =\n          textEdition.ayahs[a-1];\n\n          let audioAyah =\n          audioEdition.ayahs[a-1];\n\n          verses.push({\n\n            surah:s,\n\n            surahName:\n            textEdition.englishName,\n\n            arabicName:\n            textEdition.name,\n\n            ayah:a,\n\n            text:\n            textAyah.text,\n\n            audio:\n            audioAyah.audio\n\n          });\n\n        }\n\n      }\n\n      return verses;\n    }\n\n    function makePlaylist(verses){\n\n      let totalRepeat =\n      Number(repeat.value);\n\n      let result = [];\n\n      if(mode.value === \"ayah\"){\n\n        verses.forEach(function(v){\n\n          for(let i=1;i<=totalRepeat;i++){\n\n            result.push({\n              ...v,\n              repeatNow:i,\n              repeatMax:totalRepeat\n            });\n\n          }\n\n        });\n\n      }else{\n\n        for(let i=1;i<=totalRepeat;i++){\n\n          verses.forEach(function(v){\n\n            result.push({\n              ...v,\n              repeatNow:i,\n              repeatMax:totalRepeat\n            });\n\n          });\n\n        }\n\n      }\n\n      return result;\n    }\n\n    function displayVerse(v){\n\n      surahTitle.innerHTML =\n      v.arabicName+\n      \" \u2014 \"+\n      v.surahName+\n      \" \u2014 Ayat \"+\n      v.ayah;\n\n      arabic.innerHTML =\n      v.text;\n\n      counter.innerHTML =\n      \"Ulangan \"+\n      v.repeatNow+\n      \" daripada \"+\n      v.repeatMax;\n\n      let percent =\n      ((currentIndex+1)\/\n      playlist.length)*100;\n\n      progress.style.width =\n      percent+\"%\";\n\n    }\n\n    function play(){\n\n      if(\n        stopped ||\n        currentIndex >= playlist.length\n      ){\n\n        if(\n          !stopped &&\n          currentIndex >= playlist.length\n        ){\n\n          status.innerHTML =\n          \"\u2705 Murajaah selesai\";\n\n          progress.style.width =\n          \"100%\";\n\n        }\n\n        return;\n      }\n\n      let verse =\n      playlist[currentIndex];\n\n      displayVerse(verse);\n\n      status.innerHTML =\n      \"\ud83d\udd0a Sedang dimainkan\";\n\n      audio.src =\n      verse.audio;\n\n      audio.play().catch(function(){\n\n        status.innerHTML =\n        \"Tekan Mulakan Murajaah sekali lagi untuk membenarkan audio.\";\n\n      });\n\n    }\n\n    audio.addEventListener(\n    \"ended\",\n    function(){\n\n      if(stopped) return;\n\n      status.innerHTML =\n      \"Menunggu ulangan seterusnya...\";\n\n      let currentToken = token;\n\n      setTimeout(function(){\n\n        if(\n          stopped ||\n          currentToken !== token\n        ) return;\n\n        currentIndex++;\n\n        play();\n\n      },Number(gap.value));\n\n    });\n\n    startBtn.addEventListener(\n    \"click\",\n    async function(){\n\n      token++;\n\n      stopped = true;\n\n      audio.pause();\n\n      currentIndex = 0;\n\n      status.innerHTML =\n      \"Menyediakan murajaah...\";\n\n      try{\n\n        originalVerses =\n        await createVerseRange();\n\n        playlist =\n        makePlaylist(originalVerses);\n\n        stopped = false;\n\n        play();\n\n      }catch(e){\n\n        status.innerHTML =\n        e.message;\n\n      }\n\n    });\n\n    stopBtn.addEventListener(\n    \"click\",\n    function(){\n\n      token++;\n\n      stopped = true;\n\n      audio.pause();\n\n      status.innerHTML =\n      \"Murajaah dihentikan\";\n\n    });\n\n    pauseBtn.addEventListener(\n    \"click\",\n    function(){\n\n      if(stopped) return;\n\n      if(audio.paused){\n\n        audio.play();\n\n        pauseBtn.innerHTML =\n        \"\u23f8\ufe0f Jeda\";\n\n      }else{\n\n        audio.pause();\n\n        pauseBtn.innerHTML =\n        \"\u25b6\ufe0f Sambung\";\n\n      }\n\n    });\n\n    function jumpVerse(direction){\n\n      if(!playlist.length) return;\n\n      let current =\n      playlist[currentIndex];\n\n      let baseIndex =\n      originalVerses.findIndex(\n      function(v){\n\n        return(\n          v.surah === current.surah &&\n          v.ayah === current.ayah\n        );\n\n      });\n\n      let target =\n      baseIndex + direction;\n\n      if(target < 0) target = 0;\n\n      if(target >= originalVerses.length){\n        target =\n        originalVerses.length-1;\n      }\n\n      let verse =\n      originalVerses[target];\n\n      let index =\n      playlist.findIndex(\n      function(v){\n\n        return(\n          v.surah === verse.surah &&\n          v.ayah === verse.ayah\n        );\n\n      });\n\n      if(index >= 0){\n\n        token++;\n\n        audio.pause();\n\n        currentIndex =\n        index;\n\n        stopped =\n        false;\n\n        play();\n\n      }\n\n    }\n\n    prevBtn.addEventListener(\n    \"click\",\n    function(){\n\n      jumpVerse(-1);\n\n    });\n\n    nextBtn.addEventListener(\n    \"click\",\n    function(){\n\n      jumpVerse(1);\n\n    });\n\n    loadSurahs();\n\n  })();\n  <\/script>\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcd6 Murajaah Hafazan Al-Quran Pilih surah dan ayat yang hendak diulang. Sesuai untuk hafazan dan murajaah pelajar. Surah Mula Ayat Mula Surah Akhir Ayat Akhir Kaedah Ulangan Ulang setiap ayat dahuluUlang semua ayat sebagai satu set Bilangan Ulangan 1 kali3 kali5 kali7 kali10 kali15 kali20 kali Qari Mishary Rashid AlafasyAbdul BasitMahmoud Khalil Al-HusaryAl-Minshawi Jeda Tiada1 [&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":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","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":"","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":""},"class_list":["post-7237","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pthqibnusina.com\/index.php?rest_route=\/wp\/v2\/pages\/7237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pthqibnusina.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pthqibnusina.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pthqibnusina.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pthqibnusina.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7237"}],"version-history":[{"count":3,"href":"https:\/\/pthqibnusina.com\/index.php?rest_route=\/wp\/v2\/pages\/7237\/revisions"}],"predecessor-version":[{"id":7240,"href":"https:\/\/pthqibnusina.com\/index.php?rest_route=\/wp\/v2\/pages\/7237\/revisions\/7240"}],"wp:attachment":[{"href":"https:\/\/pthqibnusina.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}