Skip to content

Commit b9aa030

Browse files
kennethreitzclaude
kennethreitz
and
claude
committed
Add Listen/Stop toggle to all resource page audio buttons
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 <noreply@anthropic.com>
1 parent c3867fc commit b9aa030

File tree

10 files changed

+90
-0
lines changed

10 files changed

+90
-0
lines changed

‎kjvstudy_org/templates/biblical_prophets.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,14 +295,23 @@ <h2>The Prophetic Office</h2>
295295
document.addEventListener('DOMContentLoaded', function() {
296296
// Listen button handler
297297
var listenBtn = document.getElementById('listen-btn');
298+
var isListening = false;
298299
if (listenBtn) {
299300
listenBtn.addEventListener('click', function() {
301+
if (isListening) {
302+
if (window.KJVSpeech) window.KJVSpeech.stop();
303+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
304+
isListening = false;
305+
return;
306+
}
300307
var paragraphs = document.querySelectorAll('.intro-text, .prophet-description p, .verse-text');
301308
var text = Array.from(paragraphs).map(function(p) {
302309
return p.textContent.trim();
303310
}).join(' ');
304311
if (window.KJVSpeech && text) {
305312
window.KJVSpeech.speak(text);
313+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
314+
isListening = true;
306315
}
307316
});
308317
}

‎kjvstudy_org/templates/fruits_of_spirit.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,14 +295,23 @@ <h2>The Spirit's Work in Sanctification</h2>
295295
document.addEventListener('DOMContentLoaded', function() {
296296
// Listen button handler
297297
var listenBtn = document.getElementById('listen-btn');
298+
var isListening = false;
298299
if (listenBtn) {
299300
listenBtn.addEventListener('click', function() {
301+
if (isListening) {
302+
if (window.KJVSpeech) window.KJVSpeech.stop();
303+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
304+
isListening = false;
305+
return;
306+
}
300307
var paragraphs = document.querySelectorAll('.intro-text, .fruit-description p, .verse-text');
301308
var text = Array.from(paragraphs).map(function(p) {
302309
return p.textContent.trim();
303310
}).join(' ');
304311
if (window.KJVSpeech && text) {
305312
window.KJVSpeech.speak(text);
313+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
314+
isListening = true;
306315
}
307316
});
308317
}

‎kjvstudy_org/templates/names_of_god.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,14 +291,23 @@ <h2>The Significance of Divine Names</h2>
291291
document.addEventListener('DOMContentLoaded', function() {
292292
// Listen button handler
293293
var listenBtn = document.getElementById('listen-btn');
294+
var isListening = false;
294295
if (listenBtn) {
295296
listenBtn.addEventListener('click', function() {
297+
if (isListening) {
298+
if (window.KJVSpeech) window.KJVSpeech.stop();
299+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
300+
isListening = false;
301+
return;
302+
}
296303
var paragraphs = document.querySelectorAll('.intro-text, .name-description p, .verse-text');
297304
var text = Array.from(paragraphs).map(function(p) {
298305
return p.textContent.trim();
299306
}).join(' ');
300307
if (window.KJVSpeech && text) {
301308
window.KJVSpeech.speak(text);
309+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
310+
isListening = true;
302311
}
303312
});
304313
}

‎kjvstudy_org/templates/parables.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,14 +309,23 @@ <h2>Principles of Parabolic Interpretation</h2>
309309
document.addEventListener('DOMContentLoaded', function() {
310310
// Listen button handler
311311
var listenBtn = document.getElementById('listen-btn');
312+
var isListening = false;
312313
if (listenBtn) {
313314
listenBtn.addEventListener('click', function() {
315+
if (isListening) {
316+
if (window.KJVSpeech) window.KJVSpeech.stop();
317+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
318+
isListening = false;
319+
return;
320+
}
314321
var paragraphs = document.querySelectorAll('.intro-text, .parable-description p, .verse-text');
315322
var text = Array.from(paragraphs).map(function(p) {
316323
return p.textContent.trim();
317324
}).join(' ');
318325
if (window.KJVSpeech && text) {
319326
window.KJVSpeech.speak(text);
327+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
328+
isListening = true;
320329
}
321330
});
322331
}

‎kjvstudy_org/templates/resource_detail.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,14 +198,23 @@ <h2 id="key-verses-heading">Key Verses</h2>
198198
(function() {
199199
// Listen button handler
200200
var listenBtn = document.getElementById('listen-btn');
201+
var isListening = false;
201202
if (listenBtn) {
202203
listenBtn.addEventListener('click', function() {
204+
if (isListening) {
205+
if (window.KJVSpeech) window.KJVSpeech.stop();
206+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
207+
isListening = false;
208+
return;
209+
}
203210
var paragraphs = document.querySelectorAll('.resource-description p, .verse-text');
204211
var text = Array.from(paragraphs).map(function(p) {
205212
return p.textContent.trim();
206213
}).join(' ');
207214
if (window.KJVSpeech && text) {
208215
window.KJVSpeech.speak(text);
216+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
217+
isListening = true;
209218
}
210219
});
211220
}

‎kjvstudy_org/templates/resource_index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,14 +318,23 @@ <h3 class="resource-name" id="resource-{{ item_name|slugify }}"><a href="{{ base
318318
document.addEventListener('DOMContentLoaded', function() {
319319
// Listen button handler
320320
var listenBtn = document.getElementById('listen-btn');
321+
var isListening = false;
321322
if (listenBtn) {
322323
listenBtn.addEventListener('click', function() {
324+
if (isListening) {
325+
if (window.KJVSpeech) window.KJVSpeech.stop();
326+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
327+
isListening = false;
328+
return;
329+
}
323330
var paragraphs = document.querySelectorAll('.intro-text, .resource-item-description p, .verse-text');
324331
var text = Array.from(paragraphs).map(function(p) {
325332
return p.textContent.trim();
326333
}).join(' ');
327334
if (window.KJVSpeech && text) {
328335
window.KJVSpeech.speak(text);
336+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
337+
isListening = true;
329338
}
330339
});
331340
}

‎kjvstudy_org/templates/story_kids.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -388,14 +388,23 @@ <h1>{{ story.kids_title }}</h1>
388388
(function() {
389389
// Listen button handler
390390
var listenBtn = document.getElementById('story-listen-btn');
391+
var isListening = false;
391392
if (listenBtn) {
392393
listenBtn.addEventListener('click', function() {
394+
if (isListening) {
395+
if (window.KJVSpeech) window.KJVSpeech.stop();
396+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
397+
isListening = false;
398+
return;
399+
}
393400
var paragraphs = document.querySelectorAll('article section p');
394401
var text = Array.from(paragraphs).map(function(p) {
395402
return p.textContent.trim();
396403
}).join(' ');
397404
if (window.KJVSpeech && text) {
398405
window.KJVSpeech.speak(text);
406+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
407+
isListening = true;
399408
}
400409
});
401410
}

‎kjvstudy_org/templates/topic_detail.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,14 +233,23 @@ <h2>Study Guidance</h2>
233233
(function() {
234234
// Listen button handler
235235
var listenBtn = document.getElementById('listen-btn');
236+
var isListening = false;
236237
if (listenBtn) {
237238
listenBtn.addEventListener('click', function() {
239+
if (isListening) {
240+
if (window.KJVSpeech) window.KJVSpeech.stop();
241+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
242+
isListening = false;
243+
return;
244+
}
238245
var paragraphs = document.querySelectorAll('.topic-overview, .intro-text, .subtopic-description, .verse-note');
239246
var text = Array.from(paragraphs).map(function(p) {
240247
return p.textContent.trim();
241248
}).join(' ');
242249
if (window.KJVSpeech && text) {
243250
window.KJVSpeech.speak(text);
251+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
252+
isListening = true;
244253
}
245254
});
246255
}

‎kjvstudy_org/templates/twelve_apostles.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,14 +297,23 @@ <h2>The Apostolic Ministry</h2>
297297
document.addEventListener('DOMContentLoaded', function() {
298298
// Listen button handler
299299
var listenBtn = document.getElementById('listen-btn');
300+
var isListening = false;
300301
if (listenBtn) {
301302
listenBtn.addEventListener('click', function() {
303+
if (isListening) {
304+
if (window.KJVSpeech) window.KJVSpeech.stop();
305+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
306+
isListening = false;
307+
return;
308+
}
302309
var paragraphs = document.querySelectorAll('.intro-text, .apostle-description p, .verse-text');
303310
var text = Array.from(paragraphs).map(function(p) {
304311
return p.textContent.trim();
305312
}).join(' ');
306313
if (window.KJVSpeech && text) {
307314
window.KJVSpeech.speak(text);
315+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
316+
isListening = true;
308317
}
309318
});
310319
}

‎kjvstudy_org/templates/women_of_the_bible.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,14 +291,23 @@ <h2>The Significance of Biblical Women</h2>
291291
document.addEventListener('DOMContentLoaded', function() {
292292
// Listen button handler
293293
var listenBtn = document.getElementById('listen-btn');
294+
var isListening = false;
294295
if (listenBtn) {
295296
listenBtn.addEventListener('click', function() {
297+
if (isListening) {
298+
if (window.KJVSpeech) window.KJVSpeech.stop();
299+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
300+
isListening = false;
301+
return;
302+
}
296303
var paragraphs = document.querySelectorAll('.intro-text, .woman-description p, .verse-text');
297304
var text = Array.from(paragraphs).map(function(p) {
298305
return p.textContent.trim();
299306
}).join(' ');
300307
if (window.KJVSpeech && text) {
301308
window.KJVSpeech.speak(text);
309+
listenBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
310+
isListening = true;
302311
}
303312
});
304313
}

0 commit comments

Comments
 (0)