How to convert your Text into AudioBook using JavaScript

  • HTML
  • CSS
  • Basics of JavaScript
  • Use of any Code Editor
  • index.html -which will includes the boilerplate along with some scripts and div to display the clicked images.
  • script.js -in which we will write the logic of making the uploaded image readable.
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8"><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1.0"><title>Document</title><script defer src=’https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script><script src=”script.js” defer></script></head><body><video width=”720" height=”560" autoplay muted></video><pre data-text style=”font-size: 2rem; font-family: inherit; width: 100%; white-space: pre-wrap;”></pre></body></html>
const video = document.querySelector("video")const textElem = document.querySelector("[data-text]")async function setup() {const stream = await navigator.mediaDevices.getUserMedia({ video: true })video.srcObject = stream
video.addEventListener("playing", async () => {const worker = Tesseract.createWorker()await worker.load()await worker.loadLanguage("eng")await worker.initialize("eng")
const canvas = document.createElement("canvas")canvas.width = video.widthcanvas.height = video.height
document.addEventListener("keypress", async e => {if (e.code !== "Space") returncanvas.getContext("2d").drawImage(video, 0, 0, video.width, video.height)const { data: { text },} = await worker.recognize(canvas)
speechSynthesis.speak(new SpeechSynthesisUtterance(text.replace(/\s/g, " ")))textElem.textContent = text})})}setup();
async function setup() {const stream = await navigator.mediaDevices.getUserMedia({ video: true })video.srcObject = stream}
async function setup() {const stream = await navigator.mediaDevices.getUserMedia({ video: true })video.srcObject = streamvideo.addEventListener("playing", async () => {const worker = Tesseract.createWorker()await worker.load()await worker.loadLanguage("eng")await worker.initialize("eng")const canvas = document.createElement("canvas")canvas.width = video.widthcanvas.height = video.height})}
await worker.load()await worker.loadLanguage("eng")await worker.initialize("eng")
const canvas = document.createElement("canvas")canvas.width = video.widthcanvas.height = video.height
document.addEventListener("keypress", async e => {if (e.code !== "Space") returncanvas.getContext("2d").drawImage(video, 0, 0, video.width, video.height)const { data: { text },} = await worker.recognize(canvas)speechSynthesis.speak(new SpeechSynthesisUtterance(text.replace(/\s/g, " ")))textElem.textContent = text
  1. The actual video
  2. Starting co-ordinate of the image
  3. Starting co-ordinate of the image
  4. Ending co-ordinate of the image
  5. Ending co-ordinate of the image
speechSynthesis.speak(new SpeechSynthesisUtterance(text.replace(/\s/g, " ")))
textElem.textContent = text

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store