dwd-projects
/
barta-india.in
generated from dwd/boilarplate-astro-tailwind
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add listening options

b4
dev sp 2024-01-19 07:57:07 +00:00
parent d4043d1678
commit 78d9081f87
10 changed files with 314 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/pages/[id].astro
View File

@ -35,8 +35,8 @@ const items = data.data[idx];
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<div class=""><button onclick="textSpeech();" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
@ -51,21 +51,39 @@ const items = data.data[idx];
<a href=`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}` onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div>
</div>
<p id="" class="text-justify text-red-700 mt-4" set:html={items.content}></p>
<p id="message3" class="text-justify text-red-700 mt-4" set:html={items.content}></p>
</div>
</section>
</main>
</Layout>
<script is:inline>
function textSpeech(){
let message1 = document.getElementById('message1').innerHTML;
console.log(message1);
let message2 = document.getElementById('message2').innerHTML;
// let message3 = document.getElementById('message3').innerHTML;
let allSpeechText = message1 + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
window.speechSynthesis.speak(speechText);
}
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
</script>
<style>
section > div > p > p {

41
src/pages/bn/[id].astro
View File

@ -34,8 +34,9 @@ const items = data.data[idx];
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 class="text-xl py-2">{items.title}</h2>
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
</div>
@ -53,6 +54,42 @@ const items = data.data[idx];
</section>
</main>
</LayoutBN>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechText.lang = 'bn'; // Set language to Bengali
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
// if(window.location.reload()){
// isListening = false;
// }
</script>
<style>
section > div > p > p {
text-align: justify;

40
src/pages/bn/local/[id].astro
View File

@ -34,8 +34,9 @@ const items = data.data[idx];
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 class="text-xl py-2">{items.title}</h2>
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
</div>
@ -53,6 +54,41 @@ const items = data.data[idx];
</section>
</main>
</LayoutBN>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechText.lang = 'bn'; // Set language to Bengali
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
// if(window.location.reload()){
// isListening = false;
// }
</script>
<style>
section > div > p > p {
text-align: justify;

40
src/pages/bn/national/[id].astro
View File

@ -34,8 +34,9 @@ const items = data.data[idx];
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 class="text-xl py-2">{items.title}</h2>
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
</div>
@ -53,6 +54,41 @@ const items = data.data[idx];
</section>
</main>
</LayoutBN>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechText.lang = 'bn'; // Set language to Bengali
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
// if(window.location.reload()){
// isListening = false;
// }
</script>
<style>
section > div > p > p {
text-align: justify;

40
src/pages/bn/politics/[id].astro
View File

@ -34,8 +34,9 @@ const items = data.data[idx];
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 class="text-xl py-2">{items.title}</h2>
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
</div>
@ -53,6 +54,41 @@ const items = data.data[idx];
</section>
</main>
</LayoutBN>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechText.lang = 'bn'; // Set language to Bengali
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
// if(window.location.reload()){
// isListening = false;
// }
</script>
<style>
/* section > div > p > p {
text-align: justify;

5
src/pages/bn/technology/[id].astro
View File

@ -34,8 +34,9 @@ const items = data.data[idx];
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 class="text-xl py-2">{items.title}</h2>
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
</div>

34
src/pages/local/[id].astro
View File

@ -34,8 +34,9 @@ const items = data.data[idx];
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 class="text-xl py-2">{items.title}</h2>
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
</div>
@ -53,6 +54,35 @@ const items = data.data[idx];
</section>
</main>
</Layout>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
</script>
<style>
section > div > p > p {
text-align: justify;

34
src/pages/national/[id].astro
View File

@ -35,8 +35,9 @@ const items = data.data[idx];
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 class="text-xl py-2">{items.title}</h2>
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
</div>
@ -54,6 +55,35 @@ const items = data.data[idx];
</section>
</main>
</Layout>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
</script>
<style>
section > div > p > p {
text-align: justify;

34
src/pages/politics/[id].astro
View File

@ -35,8 +35,9 @@ const items = data.data[idx];
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 class="text-xl py-2">{items.title}</h2>
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
</div>
@ -54,6 +55,35 @@ const items = data.data[idx];
</section>
</main>
</Layout>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
</script>
<style>
/* section > div > p > p {
text-align: justify;

34
src/pages/technology/[id].astro
View File

@ -34,8 +34,9 @@ const items = data.data[idx];
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 class="text-xl py-2">{items.title}</h2>
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
</div>
@ -53,6 +54,35 @@ const items = data.data[idx];
</section>
</main>
</Layout>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
</script>
<style>
section > div > p > p {
text-align: justify;