From b9aa030a35ea39bed71a5de08b2169696c69ac3c Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Sat, 6 Dec 2025 14:56:14 -0500 Subject: [PATCH] Add Listen/Stop toggle to all resource page audio buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updated all Listen buttons across resource pages to toggle between Listen and Stop states when audio is playing. The button changes its icon and text to indicate current state, and clicking Stop halts the text-to-speech playback. Templates updated: - biblical_prophets.html - fruits_of_spirit.html - names_of_god.html - parables.html - resource_detail.html - resource_index.html - story_kids.html - topic_detail.html - twelve_apostles.html - women_of_the_bible.html 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- kjvstudy_org/templates/biblical_prophets.html | 9 +++++++++ kjvstudy_org/templates/fruits_of_spirit.html | 9 +++++++++ kjvstudy_org/templates/names_of_god.html | 9 +++++++++ kjvstudy_org/templates/parables.html | 9 +++++++++ kjvstudy_org/templates/resource_detail.html | 9 +++++++++ kjvstudy_org/templates/resource_index.html | 9 +++++++++ kjvstudy_org/templates/story_kids.html | 9 +++++++++ kjvstudy_org/templates/topic_detail.html | 9 +++++++++ kjvstudy_org/templates/twelve_apostles.html | 9 +++++++++ kjvstudy_org/templates/women_of_the_bible.html | 9 +++++++++ 10 files changed, 90 insertions(+) diff --git a/kjvstudy_org/templates/biblical_prophets.html b/kjvstudy_org/templates/biblical_prophets.html index 2fab080..9a4b68d 100644 --- a/kjvstudy_org/templates/biblical_prophets.html +++ b/kjvstudy_org/templates/biblical_prophets.html @@ -295,14 +295,23 @@ document.body.dataset.resourceReader = 'true'; document.addEventListener('DOMContentLoaded', function() { // Listen button handler var listenBtn = document.getElementById('listen-btn'); + var isListening = false; if (listenBtn) { listenBtn.addEventListener('click', function() { + if (isListening) { + if (window.KJVSpeech) window.KJVSpeech.stop(); + listenBtn.innerHTML = ' Listen'; + isListening = false; + return; + } var paragraphs = document.querySelectorAll('.intro-text, .prophet-description p, .verse-text'); var text = Array.from(paragraphs).map(function(p) { return p.textContent.trim(); }).join(' '); if (window.KJVSpeech && text) { window.KJVSpeech.speak(text); + listenBtn.innerHTML = ' Stop'; + isListening = true; } }); } diff --git a/kjvstudy_org/templates/fruits_of_spirit.html b/kjvstudy_org/templates/fruits_of_spirit.html index 7e10c5b..de563df 100644 --- a/kjvstudy_org/templates/fruits_of_spirit.html +++ b/kjvstudy_org/templates/fruits_of_spirit.html @@ -295,14 +295,23 @@ document.body.dataset.resourceReader = 'true'; document.addEventListener('DOMContentLoaded', function() { // Listen button handler var listenBtn = document.getElementById('listen-btn'); + var isListening = false; if (listenBtn) { listenBtn.addEventListener('click', function() { + if (isListening) { + if (window.KJVSpeech) window.KJVSpeech.stop(); + listenBtn.innerHTML = ' Listen'; + isListening = false; + return; + } var paragraphs = document.querySelectorAll('.intro-text, .fruit-description p, .verse-text'); var text = Array.from(paragraphs).map(function(p) { return p.textContent.trim(); }).join(' '); if (window.KJVSpeech && text) { window.KJVSpeech.speak(text); + listenBtn.innerHTML = ' Stop'; + isListening = true; } }); } diff --git a/kjvstudy_org/templates/names_of_god.html b/kjvstudy_org/templates/names_of_god.html index f8dad16..f2a4320 100644 --- a/kjvstudy_org/templates/names_of_god.html +++ b/kjvstudy_org/templates/names_of_god.html @@ -291,14 +291,23 @@ document.addEventListener('DOMContentLoaded', function() { // Listen button handler var listenBtn = document.getElementById('listen-btn'); + var isListening = false; if (listenBtn) { listenBtn.addEventListener('click', function() { + if (isListening) { + if (window.KJVSpeech) window.KJVSpeech.stop(); + listenBtn.innerHTML = ' Listen'; + isListening = false; + return; + } var paragraphs = document.querySelectorAll('.intro-text, .name-description p, .verse-text'); var text = Array.from(paragraphs).map(function(p) { return p.textContent.trim(); }).join(' '); if (window.KJVSpeech && text) { window.KJVSpeech.speak(text); + listenBtn.innerHTML = ' Stop'; + isListening = true; } }); } diff --git a/kjvstudy_org/templates/parables.html b/kjvstudy_org/templates/parables.html index 722cbfd..0da8c2a 100644 --- a/kjvstudy_org/templates/parables.html +++ b/kjvstudy_org/templates/parables.html @@ -309,14 +309,23 @@ document.body.dataset.resourceReader = 'true'; document.addEventListener('DOMContentLoaded', function() { // Listen button handler var listenBtn = document.getElementById('listen-btn'); + var isListening = false; if (listenBtn) { listenBtn.addEventListener('click', function() { + if (isListening) { + if (window.KJVSpeech) window.KJVSpeech.stop(); + listenBtn.innerHTML = ' Listen'; + isListening = false; + return; + } var paragraphs = document.querySelectorAll('.intro-text, .parable-description p, .verse-text'); var text = Array.from(paragraphs).map(function(p) { return p.textContent.trim(); }).join(' '); if (window.KJVSpeech && text) { window.KJVSpeech.speak(text); + listenBtn.innerHTML = ' Stop'; + isListening = true; } }); } diff --git a/kjvstudy_org/templates/resource_detail.html b/kjvstudy_org/templates/resource_detail.html index eb4f976..28a11a6 100644 --- a/kjvstudy_org/templates/resource_detail.html +++ b/kjvstudy_org/templates/resource_detail.html @@ -198,14 +198,23 @@ document.body.dataset.resourceReader = 'true'; (function() { // Listen button handler var listenBtn = document.getElementById('listen-btn'); + var isListening = false; if (listenBtn) { listenBtn.addEventListener('click', function() { + if (isListening) { + if (window.KJVSpeech) window.KJVSpeech.stop(); + listenBtn.innerHTML = ' Listen'; + isListening = false; + return; + } var paragraphs = document.querySelectorAll('.resource-description p, .verse-text'); var text = Array.from(paragraphs).map(function(p) { return p.textContent.trim(); }).join(' '); if (window.KJVSpeech && text) { window.KJVSpeech.speak(text); + listenBtn.innerHTML = ' Stop'; + isListening = true; } }); } diff --git a/kjvstudy_org/templates/resource_index.html b/kjvstudy_org/templates/resource_index.html index ac393a4..0e9ee65 100644 --- a/kjvstudy_org/templates/resource_index.html +++ b/kjvstudy_org/templates/resource_index.html @@ -318,14 +318,23 @@ document.body.dataset.resourceReader = 'true'; document.addEventListener('DOMContentLoaded', function() { // Listen button handler var listenBtn = document.getElementById('listen-btn'); + var isListening = false; if (listenBtn) { listenBtn.addEventListener('click', function() { + if (isListening) { + if (window.KJVSpeech) window.KJVSpeech.stop(); + listenBtn.innerHTML = ' Listen'; + isListening = false; + return; + } var paragraphs = document.querySelectorAll('.intro-text, .resource-item-description p, .verse-text'); var text = Array.from(paragraphs).map(function(p) { return p.textContent.trim(); }).join(' '); if (window.KJVSpeech && text) { window.KJVSpeech.speak(text); + listenBtn.innerHTML = ' Stop'; + isListening = true; } }); } diff --git a/kjvstudy_org/templates/story_kids.html b/kjvstudy_org/templates/story_kids.html index 94968b5..fef6bcb 100644 --- a/kjvstudy_org/templates/story_kids.html +++ b/kjvstudy_org/templates/story_kids.html @@ -388,14 +388,23 @@ hr.story-divider::before { (function() { // Listen button handler var listenBtn = document.getElementById('story-listen-btn'); + var isListening = false; if (listenBtn) { listenBtn.addEventListener('click', function() { + if (isListening) { + if (window.KJVSpeech) window.KJVSpeech.stop(); + listenBtn.innerHTML = ' Listen'; + isListening = false; + return; + } var paragraphs = document.querySelectorAll('article section p'); var text = Array.from(paragraphs).map(function(p) { return p.textContent.trim(); }).join(' '); if (window.KJVSpeech && text) { window.KJVSpeech.speak(text); + listenBtn.innerHTML = ' Stop'; + isListening = true; } }); } diff --git a/kjvstudy_org/templates/topic_detail.html b/kjvstudy_org/templates/topic_detail.html index b601569..2fd29cb 100644 --- a/kjvstudy_org/templates/topic_detail.html +++ b/kjvstudy_org/templates/topic_detail.html @@ -233,14 +233,23 @@ (function() { // Listen button handler var listenBtn = document.getElementById('listen-btn'); + var isListening = false; if (listenBtn) { listenBtn.addEventListener('click', function() { + if (isListening) { + if (window.KJVSpeech) window.KJVSpeech.stop(); + listenBtn.innerHTML = ' Listen'; + isListening = false; + return; + } var paragraphs = document.querySelectorAll('.topic-overview, .intro-text, .subtopic-description, .verse-note'); var text = Array.from(paragraphs).map(function(p) { return p.textContent.trim(); }).join(' '); if (window.KJVSpeech && text) { window.KJVSpeech.speak(text); + listenBtn.innerHTML = ' Stop'; + isListening = true; } }); } diff --git a/kjvstudy_org/templates/twelve_apostles.html b/kjvstudy_org/templates/twelve_apostles.html index 1c1006c..b0f97a7 100644 --- a/kjvstudy_org/templates/twelve_apostles.html +++ b/kjvstudy_org/templates/twelve_apostles.html @@ -297,14 +297,23 @@ document.addEventListener('DOMContentLoaded', function() { // Listen button handler var listenBtn = document.getElementById('listen-btn'); + var isListening = false; if (listenBtn) { listenBtn.addEventListener('click', function() { + if (isListening) { + if (window.KJVSpeech) window.KJVSpeech.stop(); + listenBtn.innerHTML = ' Listen'; + isListening = false; + return; + } var paragraphs = document.querySelectorAll('.intro-text, .apostle-description p, .verse-text'); var text = Array.from(paragraphs).map(function(p) { return p.textContent.trim(); }).join(' '); if (window.KJVSpeech && text) { window.KJVSpeech.speak(text); + listenBtn.innerHTML = ' Stop'; + isListening = true; } }); } diff --git a/kjvstudy_org/templates/women_of_the_bible.html b/kjvstudy_org/templates/women_of_the_bible.html index 1d98012..469d409 100644 --- a/kjvstudy_org/templates/women_of_the_bible.html +++ b/kjvstudy_org/templates/women_of_the_bible.html @@ -291,14 +291,23 @@ document.body.dataset.resourceReader = 'true'; document.addEventListener('DOMContentLoaded', function() { // Listen button handler var listenBtn = document.getElementById('listen-btn'); + var isListening = false; if (listenBtn) { listenBtn.addEventListener('click', function() { + if (isListening) { + if (window.KJVSpeech) window.KJVSpeech.stop(); + listenBtn.innerHTML = ' Listen'; + isListening = false; + return; + } var paragraphs = document.querySelectorAll('.intro-text, .woman-description p, .verse-text'); var text = Array.from(paragraphs).map(function(p) { return p.textContent.trim(); }).join(' '); if (window.KJVSpeech && text) { window.KJVSpeech.speak(text); + listenBtn.innerHTML = ' Stop'; + isListening = true; } }); }