js实现语音播报+html自动播放音频

-

1. js生成语音源（利用百度的TTS）:

let str = "测试测试测试测试测试测试测试123测试测试测试测试测试测试123435";
let make_mp3 = "https://tts.baidu.com/text2audio?cuid=baike&lan=zh&ctp=1&pdt=301&vol=9&rate=32&per=0&tex=" + encodeURI(str);

2. js实现自动播放音乐：

Audio标签由于浏览器不允许自动play()，因此，为了实现该功能，只能用AudioContext来实现。参考：https://blog.csdn.net/wo240/article/details/82748474。

另外，Chrome或Safari里面如果还不能正常播放，就得用Edge浏览器（或Edge谷歌内核版）、火狐浏览器等。

以下是自动播放部分的代码：

（mplayer.js下载：备1：https://download.csdn.net/download/weixin_41827162/12447011  备2：https://cdnaliyun.oss-cn-hangzhou.aliyuncs.com/js/mplayer.js）

    // 开源文档https://github.com/haima16/MPlayer
    // 需先引入mplayer.js依赖文件
    let player = new MPlayer(make_mp3, {
        loop: false,
        volume: 1,
        auto: true,
        index: 1,
        analyser: {
            size: 1024,
        }
    });
    player.onload = function() {
        console.log("=开始播放=");
        this.play()
    };
    player.onended = function() {
        console.log("=播放完成=");

    };

-

百度语音：

tex 必填 合成的文本，使用UTF-8编码。小于2048个中文字或者英文数字。（文本在百度服务器内转换为GBK后，长度必须小于4096字节）

tok 必填 开放平台获取到的开发者access_token（见上面的“鉴权认证机制”段落）

cuid 必填 用户唯一标识，用来计算UV值。建议填写能区分用户的机器 MAC 地址或 IMEI 码，长度为60字符以内 ctp 必填 客户端类型选择，web端填写固定值1 lan 必填 固定值zh。语言选择,目前只有中英文混合模式，填写固定值zh spd 选填 语速，取值0-15，默认为5中语速 pit 选填 音调，取值0-15，默认为5中语调

vol 选填 音量，取值0-15，默认为5中音量

per（基础音库） 选填 度小宇=1，度小美=0，度逍遥=3，度丫丫=4 per（精品音库） 选填 度博文=106，度小童=110，度小萌=111，度米朵=103，度小娇=5 aue 选填 3为mp3格式(默认)； 4为pcm-16k；5为pcm-8k；6为wav（内容同pcm-16k）; 注意aue=4或者6是语音识别要求的格式，但是音频内容不是语音识别要求的自然人发音，所以识别效果会受影响。 tex字段2次urlencode 由于urlencode有两个标准 RFC 1738和RFC 3986. 百度为了更好地兼容，支持1次及2次urlencode， 其中2次urlencode可以覆盖全部的特殊字符。因而推荐传递tex 参数时做2次urlencode编码。

-

API：

属性 props

• duration 获取音频总时长number
• state 获取当前音频的状态，running | suspend
• volume 获取当前音量number
• loop 获取音频是否循环boolean
• auto 是否自动播放boolean

方法 methods

• on(type, fn) 绑定事件，type可选值（load | ended），fn回调函数
• off(type, fn) 解绑事件，type可选值（load | ended），fn回调函数
• emit(type) 手动触发监听事件
• getData 获取分析的音频数据，类型Uint8Array，需要开启analyser选项
• play 播放音频
• pause 暂停播放
• toggle 音频状态切换
• playPrev 播放上一首
• playNext 播放下一首
• start(offset) 设置音频开始播放的时刻，offset的范围为0~duration
• setLoop(bool) 设置音频是否循环播放
• setVolume(val) 设置音频音量，0 ~ 1.0
• getCurrentTime 获取当前播放的时长
• setOptions(options) 可以统一设置，如：{ loop: true, volume: 0.5 }

事件 events

• onload：音频解析完成时触发

• onended：音频播放完触发

-