GithubHelp home page GithubHelp logo

vivek-nexus / listen Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 6.4 MB

A world-class multilingual reading companion that helps you listen to any written material (instead of reading on your screen), in a variety of languages

Home Page: http://www.vivek.nexus/listen/

JavaScript 0.29% TypeScript 95.25% CSS 4.46%
nextjs pwa text-to-speech webspeech-api cld3 mozilla-readability multi-lingual webapp

listen's Introduction

Listen

Your world-class reading companion

A web app that helps you listen to any written material (instead of reading on your screen), in a variety of languages.

  • You can use it to listen to news pages or blog pages, as if they were podcasts
  • You can use it to proof-read, or should we say, proof-listen to your writing
  • You can use it to record voice-overs
  • and much more...

View the app at https://www.vivek.nexus/listen.

Older versions of this project: v4 | v3 | v2




Integrating Listen on your blog

Allow your readers to instantly listen to your pages

[Option 1] Load Listen as an iframe (code method)

  • On your blog pages, load Listen as an iframe in a suitable way. Make sure the iframe size is at least 360px by 780px for optimal UI experience.
  • Make sure to allow cross origin requests (CORS) on your website server from https://www.vivek.nexus origin, so that Listen can fetch article HTML from your server.
    • If you use no-code hosting methods, consult your hosting provider's documentation to enable CORS
    • If you control the code on your server, see https://www.w3.org/wiki/CORS_Enabled for instructions
  • Send your article through URL parameters. See below section for details.
  • You can also first check if user has at least one voice of a specific langauge, with my simple helper function. The result of this function can be then used to condiitionally determine if Listen should be offered for that user.

[Option 2] Open Listen in a new tab (no-code method)

  • On your blog page, add a button or text such as Listen to this article
  • Hyperlink the text or the button, to open Listen in a new tab. Send your article through URL parameters. See below section for details.



Send article through URL parameters

Passing article link

Pass the link as a URL parameter

Example: https://www.vivek.nexus/listen/app?url=https://ideas.ted.com/how-to-handle-anxiety-lionel

Passing article text

Pass the article text as a URL parameter. URL encode the text for sanity.

Example: https://www.vivek.nexus/listen/app?text=This%20is%20the%20first%20line%20of%20the%20article.%0A%0AThis%20is%20the%20second%20line.%20Make%20sure%20to%20URL%20encode%20the%20text%20before%20passing




For nerds

  1. To detect language of article: Google compact langauge detector v3 via cld3-asm (https://github.com/kwonoj/cld3-asm)
  2. To extract article text from HTML: Mozilla Readability (https://github.com/mozilla/readability)



Help

For help with anything on the app or to report a bug, create an issue here https://github.com/vivek-nexus/listen/issues

listen's People

Contributors

vivek-nexus avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.