iVampireSP.com
我们一直都在为梦想而努力着。
iVampireSP的物语
JavaScript 朗读文本,播放声音

前言

由于网页设计大赛的事,想要搞点高级货,但是这周五就要交稿了,所以折腾一点没那么难的却很酷炫的功能。

设定文本

你可以预先设定待会要被播放的文本。

使用浏览器合成声音

这里一个除了IE以外的主流浏览器可以使用的功能

var sound = window.speechSynthesis; // 定义局部变量
var read_text = new SpeechSynthesisUtterance(text); // 实例化
sound.speak(read_text); // 朗读

其中将text改成你所需要朗读的文本,或者取变量里面的值。

使用JQuery 做个示例

var sound = window.speechSynthesis;
var read_text = new SpeechSynthesisUtterance($("#textarea").text());
sound.speak(read_text);

但是这样你会发现一个问题:播放时浏览器并不会提示,甚至可能无法方便的暂停。
但是也不是没有好处的,因为这不需要白嫖API接口,就是兼容性有些差。

使用百度TTS播放自定义文本语音

所以我们可以白嫖百度TTS接口啊(滑稽)

audio = document.createElement('audio'); // 声明audio全局变量并创建元素
source = document.createElement('source'); // 声明source全局变量并创建元素
source.type = "audio/mpeg"; // source类型
source.src = 'https://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=8&text=' + $('#textarea').text(); // 拼接URL并读取要朗读的内容,设定src地址
source.autoplay = "autoplay"; // 自动播放
source.controls = "controls"; // 显示控件(其实没必要)
audio.appendChild(source); // 作为source的父元素
audio.play(); // 播放

使用jQuery做个示例

audio = document.createElement('audio');
source = document.createElement('source');
source.type = "audio/mpeg";
source.src = 'https://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=8&text=' + $('#textarea').text();
source.autoplay = "autoplay";
audio.appendChild(source);
audio.play();

优点:使用audio标签,可控音频播放。
缺点:需要联网。

iVampireSP.com

文章作者

即使有些奇怪,那也是你的可爱之处。

发表评论

textsms
account_circle
email

iVampireSP的物语

JavaScript 朗读文本,播放声音
酷吗?或许的确有点酷。
扫描二维码继续阅读
2020-11-17