masbudikusuma/edukarsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(a11y): integrasi variabel teks tombol whatsapp dan web speech synthesizer audio reader

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 23:54:54 +07:00
parent 3b8d105623
commit 0d680b2fa5
3 changed files with 118 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
footer.php
+79 -4
View File
@@ -11,6 +11,9 @@ $wa_clean = preg_replace( '/[^0-9]/', '', $raw_telp );
if ( substr( $wa_clean, 0, 1 ) === '0' ) {
$wa_clean = '62' . substr( $wa_clean, 1 );
}
$wa_btn_label = get_option( 'edukarsa_wa_btn_text', 'Tanya PMB' );
$wa_def_msg = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, saya ingin bertanya informasi lebih lanjut.' );
?>
<!-- MAIN FOOTER -->
@@ -136,7 +139,7 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
</div>
</footer>
<!-- WIDGET AKSESIBILITAS DISABILITAS NATIVE -->
<!-- WIDGET AKSESIBILITAS DISABILITAS & PEMBACA SUARA (WCAG TOOLBAR) -->
<?php if ( get_option( 'edukarsa_tampil_accessibility', 1 ) == 1 ) : ?>
<div class="edukarsa-a11y-wrapper" id="a11y-wrapper">
<button type="button" class="edukarsa-a11y-trigger" id="a11y-trigger" aria-label="Buka Menu Aksesibilitas" title="Aksesibilitas Disabilitas">
@@ -149,6 +152,15 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
<button type="button" class="a11y-close-btn" id="a11y-close">&times;</button>
</div>
<div class="a11y-panel-body">
<!-- Fitur Pembaca Suara -->
<div class="a11y-group">
<span class="a11y-label">Pembaca Suara (Audio)</span>
<div class="a11y-btn-grid">
<button type="button" class="a11y-btn" id="a11y-speak-play">🔊 Baca</button>
<button type="button" class="a11y-btn" id="a11y-speak-stop">⏹ Berhenti</button>
</div>
</div>
<div class="a11y-group">
<span class="a11y-label">Ukuran Teks</span>
<div class="a11y-btn-grid">
@@ -178,11 +190,11 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
</div>
<?php endif; ?>
<!-- FLOATING WHATSAPP -->
<!-- FLOATING WHATSAPP (LABEL & PESAN DINAMIS) -->
<?php if ( ! empty( $wa_clean ) ) : ?>
<a href="https://wa.me/<?php echo esc_attr( $wa_clean ); ?>?text=Halo%20Admin%20EduKarsa,%20saya%20ingin%20bertanya%20mengenai%20pendaftaran." target="_blank" rel="noopener" class="edukarsa-wa-float" title="Chat WhatsApp Panitia PMB">
<a href="https://wa.me/<?php echo esc_attr( $wa_clean ); ?>?text=<?php echo rawurlencode( $wa_def_msg ); ?>" target="_blank" rel="noopener" class="edukarsa-wa-float" title="<?php echo esc_attr( $wa_btn_label ); ?>">
<svg width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.711 2.598 2.664-.699c.971.53 1.777.82 2.796.82h.005c3.18 0 5.767-2.586 5.768-5.766 0-3.18-2.587-5.806-5.773-5.806zm3.376 8.214c-.149.42-.767.781-1.072.829-.304.048-.687.069-2.203-.559-1.933-.801-3.178-2.775-3.275-2.905-.095-.129-.778-1.036-.778-1.975 0-.94.492-1.401.667-1.593.175-.192.383-.24.512-.24.129 0 .258.006.371.012.12.006.279-.045.436.334.164.397.558 1.365.607 1.465.049.099.082.217.017.348-.065.131-.098.212-.195.328-.098.115-.205.258-.293.346-.098.098-.201.205-.087.401.115.196.512.846 1.099 1.368.756.673 1.393.882 1.59.98.196.098.312.082.426-.049.115-.131.492-.573.623-.77.131-.196.262-.164.442-.098.18.065 1.147.541 1.344.639.196.098.328.147.377.229.049.082.049.475-.1.895z"/></svg>
<span>Tanya PMB</span>
<span><?php echo esc_html( $wa_btn_label ); ?></span>
</a>
<?php endif; ?>
@@ -302,7 +314,70 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
localStorage.removeItem('edukarsa_a11y_grayscale');
localStorage.removeItem('edukarsa_a11y_links');
applyA11y();
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const pBtn = document.getElementById("a11y-speak-play");
if (pBtn) { pBtn.classList.remove('speaking'); pBtn.innerText = "🔊 Baca"; }
}
});
// 4. Fitur Suara Text-to-Speech (Web Speech API Native)
const speakPlayBtn = document.getElementById("a11y-speak-play");
const speakStopBtn = document.getElementById("a11y-speak-stop");
if ('speechSynthesis' in window && speakPlayBtn) {
const synth = window.speechSynthesis;
speakPlayBtn.addEventListener("click", function() {
if (synth.speaking) {
synth.cancel();
}
// Ambil konten teks utama artikel atau bodi halaman
const contentEl = document.querySelector("article .entry-content") || document.getElementById("primary") || document.body;
const textToRead = contentEl.innerText.replace(/\s+/g, ' ').trim();
if (!textToRead) return;
const utterance = new SpeechSynthesisUtterance(textToRead);
// Deteksi bahasa yang sedang aktif
const match = document.cookie.match(/googtrans=\/id\/([a-zA-Z\-]+)/i);
const activeLang = match ? match[1].toLowerCase() : 'id';
if (activeLang === 'en') {
utterance.lang = 'en-US';
} else if (activeLang === 'ar') {
utterance.lang = 'ar-SA';
} else {
utterance.lang = 'id-ID';
}
utterance.rate = 0.95; // Kecepatan baca ideal untuk artikulasi jelas
utterance.onstart = function() {
speakPlayBtn.classList.add('speaking');
speakPlayBtn.innerText = "🔊 Membaca...";
};
utterance.onend = utterance.onerror = function() {
speakPlayBtn.classList.remove('speaking');
speakPlayBtn.innerText = "🔊 Baca";
};
synth.speak(utterance);
});
speakStopBtn?.addEventListener("click", function() {
if (synth.speaking) {
synth.cancel();
speakPlayBtn.classList.remove('speaking');
speakPlayBtn.innerText = "🔊 Baca";
}
});
} else if (speakPlayBtn) {
speakPlayBtn.style.display = 'none';
if (speakStopBtn) speakStopBtn.style.display = 'none';
}
}
});
</script>