Enhancing story narrating experience by introducing audio in story books

activities/EbookReader.activity/css/activity.css

@@ -349,3 +349,23 @@ body {
 	box-shadow: 0 0 0 0rem rgba(158, 158, 158, .5);
 	border: 0px;
 }
+
+#read-button {
+	background-image: url("../icons/read.svg"); 
+	background-size: contain;
+	background-repeat: no-repeat;
+	width: 47px;  
+	height: 47px; 
+	border: none;
+	outline: none;
+}
+
+#read-play {
+	background-image: url("../icons/read-play.svg");
+	background-size: contain;
+	background-repeat: no-repeat;
+	width: 47px;
+	height: 47px;
+	border: none;
+	outline: none;
+  }

activities/EbookReader.activity/js/activity.js

@@ -15,7 +15,10 @@ var app = new Vue({
 		currentEpub: null,
 		currentView: LibraryViewer,
 		currentLibrary: {database: []},
-		timer: null
+		timer: null,
+		isSpeaking: false,
+		isPaused: false,
+	    utterance: null
 	},
 
 	created: function() {
@@ -59,6 +62,8 @@ var app = new Vue({
 			});
 		});
 
+		this.$refs.toolbar.$on("read-aloud-clicked", this.toggleReadAloud);
+
 		// Handle resize
 		window.addEventListener("resize", function() {
 			vm.onResize();
@@ -235,6 +240,64 @@ var app = new Vue({
 			}
 		},
 
+		toggleReadAloud: function() {
+
+			if (!('speechSynthesis' in window)) {
+			  alert("Text-to-Speech is not supported in your browser.");
+			  return;
+			}
+
+
+			if (!this.utterance) {
+
+			  let iframe = document.querySelector("#area iframe");
+			  if (!iframe || !iframe.contentDocument) {
+				alert("Content not available for reading.");
+				return;
+			  }
+
+
+			  let storyText = iframe.contentDocument.body.innerText;
+			  console.log("Extracted full iframe text:", storyText);
+
+			  if (!storyText || storyText.trim() === "") {
+				alert("No text available for narration.");
+				return;
+			  }
+
+			  this.utterance = new SpeechSynthesisUtterance(storyText);
+			  this.utterance.rate = 1.0;
+			  this.utterance.pitch = 1.0;
+			  this.utterance.onend = () => {
+
+				this.isSpeaking = false;
+				this.isPaused = false;
+				this.utterance = null; 
+			  };
+			}
+
+
+			if (!this.isSpeaking && !this.isPaused) {
+
+			  window.speechSynthesis.speak(this.utterance);
+			  this.isSpeaking = true;
+			  this.isPaused = false;
+			  console.log("Speech started from the beginning");
+			} else if (this.isSpeaking && !this.isPaused) {
+
+			  window.speechSynthesis.pause();
+			  this.isSpeaking = false;
+			  this.isPaused = true;
+			  console.log("Speech paused");
+			} else if (!this.isSpeaking && this.isPaused) {
+
+			  window.speechSynthesis.resume();
+			  this.isSpeaking = true;
+			  this.isPaused = false;
+			  console.log("Speech resumed from paused position");
+			}
+		  },
+
 		onHelp: function() {
 			var options = {};
 			options.switchbutton = this.$refs.toolbar.$refs.switchbutton.$el;
@@ -278,7 +341,12 @@ var app = new Vue({
 		},
 
 		onStop: function() {
+
+			window.speechSynthesis.cancel();
+			this.utterance = null;
+			this.isSpeaking = false;
+			this.isPaused = false;
 			this.saveContextToJournal();
-		}
+		  }
 	}
 });

activities/EbookReader.activity/js/toolbar.js

@@ -27,7 +27,10 @@ var Toolbar = {
 			<toolbar-item ref="contentsbutton" v-on:clicked="getApp().showContents()" class="toolbutton" id="contents-button" v-bind:title="l10n.stringContents" v-if="showContentsBtn()"></toolbar-item>
 			<div class="splitbar" v-if="showContentsBtn()"></div>
 			<toolbar-item ref="settings" v-on:clicked="getApp().setLibraryUrl()" class="toolbutton" id="settings-button" v-bind:title="l10n.stringSettings"></toolbar-item>
-
+
+			<div class="splitbar"></div>
+			<toolbar-item :id="readButtonIcon" v-on:clicked="onReadAloud" ref="readAloudButton" v-bind:title="l10n.stringReadAloud"></toolbar-item>
+
 			<toolbar-item v-on:clicked="getApp().onStop()" id="stop-button" title="Stop" toRight="true"></toolbar-item>
 			<toolbar-item ref="fullscreen" v-on:clicked="getApp().fullscreen()" id="fullscreen-button" v-bind:title="l10n.stringFullscreen" toRight="true"></toolbar-item>
 			<toolbar-item v-on:clicked="getApp().onHelp()" id="help-button" v-bind:title="l10n.stringHelp" toRight="true"></toolbar-item>
@@ -43,10 +46,21 @@ var Toolbar = {
 				stringSettings: '',
 				stringHelp: '',
 				stringFullscreen: '',
-				stringContents: ''
+				stringContents: '',
+				stringReadAloud: ''
 			}
 		}
 	},
+
+	computed: {
+		readButtonIcon() {
+		  if (this.$root.isSpeaking && !this.$root.isPaused) {
+			return "read-play";
+		  }
+		  return "read-button";
+		}
+	  },
+
 	methods: {
 		localized: function(localization) {
 			var vm = this;
@@ -66,6 +80,10 @@ var Toolbar = {
 
 		getReader: function() {
 			return EbookReader;
-		}
+		},
+
+		onReadAloud: function() {
+			this.$emit("read-aloud-clicked");
+		},
 	}
 }