欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

JS 简单调用百度 TTS 接口实现语音朗读

最编程 2024-07-05 12:01:23
...

TTS简介

TTS是Text To Speech的缩写，即“从文本到语音”，是人机对话的一部分，让机器能够说话。网页作为世界之窗，自然是向所有人开放的，所以也就包括视力不好的人群了，而网页语音化并不是什么新技术，HTML语义化在某种层次上也是为了让网页语音化更好的实现。

正文

简单实现语音朗读，要说多简单，直接用别人的接口算不算简单？
我们要做的就是借用百度TTS接口，通过audio标签进行朗读。实现核心如下：

  1. 需要一个audio标签，包括其中的source标签，对audio标签不了解的可以去W3C HTML5音频教程看看
  2. 在audio的子标签source中设置src，具体内容为：src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=8&text="+content (content是要朗读的内容)
    参数：{
    lan:语言，
    ie:编码，
    spd:语速(1-9)，
    text:要朗读的内容
    }
  3. audio标签可自定义controls,autoplay等标签特性，实现控制（可选）
    audio标签主要通过js添加，HTML代码如下
<audio controls autoplay>
    <source id="tts_source" type="audio/mpeg" src="http://tts.baidu.com/text2audio/text2audio?lan=zh&amp;ie=UTF-8&amp;spd=8&amp;text=">
</audio>

JS代码

    var content = "hello"
    var s = docuement.querySelector("#tts_source")
    s.src = s.src + content
    s.parentNode.load()

由于修改了audio的source标签，需要对audio进行刷新重加载，故用s.parentNode.load()方法

总结

该方法灵活性不太好，想要朗读网页内容需要获取不同的标签，而且内容文本不能过大（由于写入的文本是通过Get方式传给百度接口的，传送的文本数量受Get URL 请求的限制,不同的浏览器限制大小不尽相同，且中文占字符数较多）

附文

网页添加以下脚本可实现文本框输入值后进行朗读

  <script>
        //百度TTS地址
        var url = "http://tts.baidu.com/text2audio/text2audio?lan=zh&ie=UTF-8&spd=8&text="
        //添加audio标签
        var f = document.createDocumentFragment()
        var audio = document.createElement("audio")
        audio.controls="controls"
        audio.autoplay="autoplay"
        var source = document.createElement("source")
        source.id = "tts_source"
        source.type="audio/mpeg"
        source.src= url
        audio.appendChild(source)
        f.appendChild(audio)
        document.body.appendChild(f)

        //添加输入框和按钮
        var f1 = document.createDocumentFragment()

        var form = document.createElement("form")
        var textArea = document.createElement("textarea")
        textArea.rows="25"
        textArea.cols="50"
        textArea.name="content"

        var startBtn = document.createElement("input")
        startBtn.type = "button"
        startBtn.value = "Start"
        startBtn.onclick = function(){
            content = document.forms[0]["content"].value
            var sorce = document.querySelector("#tts_source")
            source.src = url + content
            sorce.parentNode.load()
        }
        form.appendChild(textArea)
        form.appendChild(startBtn)
        f1.appendChild(form)
        document.body.appendChild(f1)

   </script>

上一篇： flutter 3.10.x 集成百度地图 SDK（包括定位功能）

下一篇： 什么是 BPDU？

推荐阅读