JS 超简单实现语音合成

1. 概念介绍

语音合成，即文字转语音；相应的还有语音识别，即语音转文字。今天主要来介绍一下几种实现语音合成的简单方法。

2. 方法实现

1). audio + 接口

使用现成的文本转语音的接口作为 audio.src 属性值,利用 audio 音频进行播放即可实现.

1. new Audio(url).play( )
   使用 Audio( ) 构造器创建并返回一个 HTMLAudioElement，HTMLAudioElement 接口提供对 元素的属性访问及一系列操控它的方法，HTMLAudioElement 基于并从 HTMLMediaElement 接口继承属性和方法。 将接口作为 url 参数传入 new Audio( ) 当中。

   play() 是 Audio 对象上的一个方法，开始播放音频

	<textarea  cols="20" rows="5"></textarea> 
    <button>点击播放</button> // vertical-align: top; 让文本框和按钮向上对齐
    
    <script>
        let txt = document.querySelector('textarea')
        let btn = document.querySelector('button');

        btn.addEventListener('click', function() {
    
    
            let words = txt.value;
            
            if (txt.value.length == 0) {
    
    
                words = '请输入有效字符!';
            } 
            
            // new Audio('https://fanyi.sogou.com/reventondc/synthesis?text='+ words +'&speed=1&lang=zh-CHS&from=translateweb&speaker=6').play(); // 搜狐
            new Audio('http://tts.youdao.com/fanyivoice?word='+ words +'&le=zh&keyfrom=speaker-target').play(); // 网易
        })
    </script>

2. audio 标签 + autoplay
   在页面添加 <audio autoplay src=' '> 自动播放音频，不添加 controls 属性，不展示 audio 音频控件

	<textarea  cols="20" rows="5"></textarea>
    <audio src="" autoplay></audio>
    <button>点击播放</button>
    <script>
        let txt = document.querySelector('textarea')
        let btn = document.querySelector('button');
        let au = document.querySelector('audio');

        btn.addEventListener('click', function() {
    
    
            let words = txt.value;
            
            if (txt.value.length == 0) {
    
    
                words = '请输入有效字符!';
            } 
            
            //au.src = 'https://fanyi.sogou.com/reventondc/synthesis?text='+ words +'&speed=1&lang=zh-CHS&from=translateweb&speaker=6'; //搜狐
            au.src = 'http://tts.youdao.com/fanyivoice?word='+ words +'&le=zh&keyfrom=speaker-target'; //网易
            
        })
    </script>

搜狗接口

"https://fanyi.sogou.com/reventondc/synthesis?text=待转语音的文字&speed=1&lang=zh-CHS&from=translateweb&speaker=6"

网易接口

 "http://tts.youdao.com/fanyivoice?word=待转语音的文字&le=zh&keyfrom=speaker-target"

2). SpeechSynthesisUtterance

SpeechSynthesisUtterance 是 html5 新增的一个 API ，可以实现文字合成。

1. 通过构造器 SpeechSynthesisUtterance 来创建一个 msg 实例；
2. 修改 msg 的配置项，如待合成文本，倍速，音量等；
3. 通过 speak() 方法将实例 msg 添加到 speechSynthesis 语音队列中；

	<textarea cols="20" rows="5"></textarea>
    <button>点击播放</button>
    
    <script>
        let txt = document.querySelector('textarea');
        let btn = document.querySelectorAll('button');

		btn.addEventListener('click',function() {
    
    
            let msg = new SpeechSynthesisUtterance();
            msg.text = txt.value; // 待合成文字
            msg.rate = 1;  // 播放倍速
            msg.volume = 1; // 音量
            speechSynthesis.speak(msg);
        })

3. 参考资料

1. MDN 教程；
2. W3C 参考手册；
3. 文本转语音的接口；
4. SpeechSynthesisUtterance 介绍；

4. 悄悄话

语音合成不仅可以用来文字转语音，还可以用于翻译发音哦 ~~ 进行英文发音学习！