Coder Social home page Coder Social logo

battlefieldduck / html-speaker Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 25 KB

🔈 A custom html element makes Text-To-Speech function easier to use on your website. (With play/pause function)

Home Page: https://tatlead.com/HTML-Speaker/

License: MIT License

CSS 20.35% JavaScript 79.65%
html-speaker tts html-element text-to-speech

html-speaker's Introduction

npm version

HTML-Speaker

npm version composer version Build status Codacy Badge

A custom html element to use Text-To-Speech function easier. Live demo: https://tatlead.com/HTML-Speaker/

npm

npm install html-speaker

Quick start

CSS (Optional)

Copy-paste the stylesheet <link> into your <head>.

<link href="https://cdn.jsdelivr.net/npm/html-speaker@latest/dist/html-speaker.min.css" rel="stylesheet">

JS

Place the following <script> near the end of your pages, right before the closing </body> tag

<script src="https://cdn.jsdelivr.net/npm/html-speaker@latest/dist/html-speaker.min.js"></script>

Basic <html-speaker> template

Place the following template inside </body> tag

<html-speaker for="content" class="speaker speaker-rounded" data-start="PLAY" data-pause="PAUSE"></html-speaker>

<p id="content">
  Back in the old days of TF2 Sandbox, MSTR stood as the biggest center of in-game TF2 roleplaying in the community.
</p>

Examples

Live demo: https://tatlead.com/HTML-Speaker/examples/

Bugs and feature requests

If you find a bug, please report it here on Github.

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.