【存货系列】JS文字转语音方案设计及实现

JS文字转语音方案设计及实现

写在前面的话

在日常的开发中，经常会接到一些定制需求，需要做声音报警，但是目前支持的方式是播放一个mp3文件（比较简陋），无法满足用户需要根据报警文字内容实时播报报警语音的需求。

作为一个业余的前端选手，搜罗了一些网上的资料，简单的封装了一个文字转语音播放工具，用来实现文字实时转换语音的需求，目前已经实现支持IE，Chrome及Safari浏览器。

但是代码实现的较为简单粗暴，各位专业前端同事，切勿取笑~

设计思路

总体逻辑设计

定义一个HiSounder对象，主要由init，options，sounder三个内部方法，以及speak，pause，resume，stop四个对外接口构成，用于实现基本的功能。

另外IeSounder和OtherSounder是对HiSounder的具体实现，用于兼容不同的浏览器。

核心接口设计

interface HiSounder{
    function init();//初始化
    function speak();//开始朗读
    function pause();//暂停
    function resume();//继续
    function stop();//停止朗读
}

代码实现

废话少说，上代码~

可配置对象

/**
 * 语音播放参数
 */
var sounderOption = {
    flags: {
        ASYNC_SPEAK: 1,
        SYNC_SPEAK: 2,
        PURGE_BEFORE_SPEAK: 3
    },
    volume: {
        LOW: "low",
        MIDDLE: "middle ",
        HIGHT: "hight"
    },
    rate: {
        SLOW: "slow",
        NORMAL: "normal ",
        FAST: "fast"
    }
}

初始化函数

var HiSounder;
HiSounder = function HiSounder(options) {
    if (window.__$sounder__) {
        throw new Error('当前页面只能初始化一个Sounder对象');
    }
    //默认配置参数
    this.options = {
        //音量
        volume: sounderOption.volume.HIGHT,
        //讲话速率
        rate: sounderOption.rate.NORMAL,
        //播放的模式
        flags: sounderOption.flags.PURGE_BEFORE_SPEAK
    };
    this.__this = this;
    this.__sounder = null;

    this.extend(options, this.options);

    // 初始化参数
    if (!this.isEffective(this.options)) {
        throw new Error('不是有效的参数对象');
    } 
    //这里判断浏览器的类型的，切换调用不同的sounder对象
    var myBrower = this.myBrowser();
    if (myBrower == "IE") {
        this.__sounder = new IeSounder(this.options);
    } else if (myBrower == "Chrome" || myBrower == "Safari") {
        this.__sounder = new OtherSounder(this.options);
    } else {
        throw new Error('Sorry！该浏览器还在适配开发中~');
    }

    this.__sounder.init();
    window.__$sounder__ = this.__sounder;
}

/**
 * 对外接口初始化
 */
HiSounder.prototype.speak = function (message) {
    if (!this.isString(message)) {
        return;
    }
    this.__sounder.speak(message);
};

HiSounder.prototype.pause = function () {
    this.__sounder.pause();
};

HiSounder.prototype.resume = function () {
    this.__sounder.resume();
};

HiSounder.prototype.stop = function () {
    this.__sounder.stop();
};

IE浏览器实现

采用WIN自带你的Sapi.SpVoice播放库进行语音播报。

参考文档：https://www.cnblogs.com/jasondan/archive/2011/04/06/2095985.html

function IeSounder(options) {
    this.sounder = null;
    this.init = function () {
        this.sounder = new ActiveXObject("Sapi.SpVoice");
        this.sounder.volume = options.volume == sounderOption.volume.LOW ? 20 : (options.volume == sounderOption.volume.HIGHT ? 100 : 50);
        this.sounder.rate = options.rate == sounderOption.rate.SLOW ? -5 : (options.rate == sounderOption.rate.FAST ? 5 : 0);
    };
    this.speak = function (message) {
        var flags = options.flags == sounderOption.flags.ASYNC_SPEAK ? 1 : (options.flags == sounderOption.flags.SYNC_SPEAK ? 2 : 3);
        this.sounder.Speak(message, flags);
    };
    this.pause = function () {
        this.sounder.Pause();
    };
    this.resume = function () {
        this.sounder.Resume();
    };
    this.stop = function () {
        this.sounder.Speak("", sounderOption.flags.PURGE_BEFORE_SPEAK);
    }
}

Chrome/Safari浏览器实现

使用SpeechSynthesisUtterance对象进行实现。

SpeechSynthesisUtterance是HTML5中新增的API，用于将指定文字合成为对应的语音。

参考文档：https://blog.csdn.net/qq_40571631/article/details/89738575

function OtherSounder(options) {
    this.sounder = null;
    this.init = function () {
        this.sounder = new SpeechSynthesisUtterance();
        this.sounder.volume = options.volume == sounderOption.volume.LOW ? 0.2 : (options.volume == sounderOption.volume.HIGHT ? 1 : 0.5);
        this.sounder.rate = options.rate == sounderOption.rate.SLOW ? 0.1 : (options.rate == sounderOption.rate.FAST ? 5 : 1);
    };
    this.speak = function (message) {
        this.sounder.text = message;
        window.speechSynthesis.speak(this.sounder);
    };
    this.pause = function () {
        window.speechSynthesis.pause();
    };
    this.resume = function () {
        window.speechSynthesis.resume();
    };
    this.stop = function () {
        window.speechSynthesis.cancel();
    }
}

使用方式

引入js文件

<script type="text/javascript" src="hik.sounder.min.js"></script>

对象初始化

<script type="text/javascript">
    /**
     * 配置参数
     */
    var options = {
        //音量(LOW，MIDDLE，HIGHT)
        volume: sounderOption.volume.HIGHT,
        //讲话速率(SLOW，NORMAL，FAST)
        rate: sounderOption.rate.NORMAL,
        //播放的模式(ASYNC_SPEAK:异步播放方式；SYNC_SPEAK：同步播放；PURGE_BEFORE_SPEAK：抢占式播放)
        flags: sounderOption.flags.PURGE_BEFORE_SPEAK
    };
    /**
     * 对象初始化（options非必输）
     */
    var hiSounder = new HiSounder(options);
</script>

方法调用

<script type="text/javascript">
    /**
     * 播放语音
     */
    function speak() {
        hiSounder.speak("你好，袁小猴~你真是一个大SB！哈哈哈~~~");
    }
    /**
     * 暂停播放
     */
    function speak() {
        hiSounder.pause();
    }
    /**
     * 继续播放
     */
    function speak() {
        hiSounder.resume();
    }
    /**
     * 停止播放
     */
    function stop() {
        hiSounder.stop();
    }
</script>

注意事项

• 在IE浏览器下使用，目前仅支持WIN7，假如WIN10需要支持，需要自行安装TTS语音播放库（参考文档：https://blog.csdn.net/trustguan/article/details/51212544）；
• 一个页面只能初始化new一个Sounder对象；
• 在IE浏览器下面使用该插件，需要设置浏览器允许支持ActiveX控件；
• Chrome下语音播放暂不支持播放模式的设置，目前默认仅支持异步方式（其余方式暂未实现）；

总结

引入一个极小的js文件（仅3KB），简单的初始化以及调用，却能够轻松实现文字转语音的骚操作，确实不赖。

假如你恰好在项目上需要实现此类文字转语音的需求，而且你又恰好看到这篇文章，那么希望这篇经验案例能够带给你一些帮助或者是启示。

Hi Sounder~~~

created by 袁志鹏 on 十月 14,2020

last edited by 袁志鹏 on 十月 23,2020