文本自动转换成语音

最新推荐文章于 2024-02-28 09:31:22 发布

一个博客

最新推荐文章于 2024-02-28 09:31:22 发布

阅读量872

点赞数

本文链接：https://blog.csdn.net/weixin_45784582/article/details/109621593

版权

一、SpeechSynthesisUtterance 构建语音合成

SpeechSynthesisUtterance主要用来构建语音合成实例，speechSynthesis大概用来触发浏览器语音模块，让浏览器把内容读出来。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>语音测试</title>
        <script type="text/javascript">
            var speaker = new window.SpeechSynthesisUtterance();
            var speakTimer,
            stopTimer;
            // 开始朗读
            function speakText() {
                var context = document.getElementById('ttsText');
                clearTimeout(speakTimer);
                window.speechSynthesis.cancel();
                speakTimer = setTimeout(function () {
                    speaker.volume = 0.9
                    speaker.text = context.innerHTML;
                    window.speechSynthesis.speak(speaker);
                }, 200);
            }
            // 停止朗读
            function stopSpeak() {
                clearTimeout(stopTimer);
                clearTimeout(speakTimer);
                stopTimer = setTimeout(function () {
                    window.speechSynthesis.cancel();
                }, 20);
            }
        </script>
    </head>
    <body>
        <p id="ttsText">
			我即使互通一千条短信，也只能拉近一厘米的距离。
		</p>
        <div>
            <input type="button" id="start_btn" onclick="speakText()" value="播放">
            <input type="button" id="cancel_btn" onclick="stopSpeak()" value="取消">
        </div>
        
    </body>
</html>

二、audio 标签和百度语音接口

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度语音测试</title>
    <script type="text/javascript">
        // lan = zh： 语言是中文， 如果改为lan = en， 则语言是英文。
        // ie = UTF - 8： 文字格式。
        function doTTS() {
            var ttsDiv = document.getElementById('bdtts_div_id');
            var ttsAudio = document.getElementById('tts_autio_id');
            var ttsText = document.getElementById('ttsText').value;

            // 这样就可实现播放内容的替换了
            ttsDiv.removeChild(ttsAudio);
            var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
            //这个接口突然不能用了
            /* var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=' + ttsText + '" type="audio/mpeg">';*/
            var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=' + ttsText + '" type="audio/mpeg">';
            var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
            var au2 = '</audio>';
            ttsDiv.innerHTML = au1 + sss + eee + au2;

            ttsAudio = document.getElementById('tts_autio_id');

            ttsAudio.play();
        }
    </script>
</head>
<body>
    <div>
        <input type="text" id="ttsText">
        <input type="button" id="tts_btn" onclick="doTTS()" value="播放">
    </div>
    <div id="bdtts_div_id">
        <audio id="tts_autio_id" autoplay="autoplay">
            <source id="tts_source_id" src="http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=播报内容" type="audio/mpeg">
            <embed id="tts_embed_id" height="0" width="0" src="">
        </audio>
    </div>
</body>
</html>