javascript实现在线文本文字转语音工具代码

所属分类: 网页特效-实用工具    2023-12-07 11:07:30

javascript实现在线文本文字转语音工具代码 ie兼容6
反馈问题  查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

javascript实现在线文本文字转语音工具代码(共3个文件)

    • index.html

使用方法

const msg = new SpeechSynthesisUtterance();
let voices = [];
const voicesDropdown = document.querySelector('[name="voice"]');
const options = document.querySelectorAll('[type="range"], [name="text"]');
const speakButton = document.querySelector("#speak");
const stopButton = document.querySelector("#stop");

msg.text = document.querySelector('[name="text"]').value;

function populateVoices() {
  voices = this.getVoices();
  voicesDropdown.innerHTML = voices
    /*.filter(voice => voice.lang.includes("en"))*/
    .map(
      voice =>
        '<option value="${voice.name}">${voice.name} (${voice.lang})</option>'
    )
    .join("");
}

function setVoice() {
  msg.voice = voices.find(voice => voice.name === this.value);
}

function toggle(startOver = true) {
  speechSynthesis.cancel();

  if (startOver) {
    speechSynthesis.speak(msg);
  }
}

function setOption() {
  console.log(this.name, this.value);
  msg[this.name] = this.value;
  toggle();
}

speechSynthesis.addEventListener("voiceschanged", populateVoices);
voicesDropdown.addEventListener("change", setVoice);
options.forEach(option => option.addEventListener("change", setOption));
speakButton.addEventListener("click", toggle);
stopButton.addEventListener("click", () => toggle(false));

站长提示:
1. 平台上所有素材资源,需注册登录会员方能正常下载。
2. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励20K币
3. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
4. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 实用工具

javascript支持自定义文本在线条形码生成器工具

基于JsBarcode库来快速生成条形码实用工具,可以是纯文本文字或网址等,都可生成条形码图片,支持下载条形码图片文件。
  实用工具
 126  

jquery构建的响应式平滑动画步骤引导提示插件

一款响应式步骤引导特效,通常运用在网站新增或变更功能模块,增加一个引导提示层告知用户如何操作使用,非常的nice哇。
  实用工具
 145  

jquery拖动DIV区块判断是否跟其它区块重叠触发事件插件

一款拖拽重叠交错触发插件,当一个可移动的DIV区块拖放到另一个DIV区块上时,触发的多种不同的事件。含:重叠次数统计、拖拽物体是否已全部重叠、拖放后回到原位
  实用工具
 198  

原生js表单输入信息计算每日卡路里工具插件

一款每日所需卡路里计算器插件,表单输入你的年龄、性别、身高和体重来确定你每天的热量需求,很实用的一款实用工具。
  实用工具
 250  

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论