这段时间一直在攻克查词项目,其中就涉及到了个别单词的语音朗读。网上找了一下JS调用百度语音合成apI的代码,测试了一下发现非常好用,记录下来留着以后备用。

js调用百度语音合成的代码

HTML+js代码:

<div class="btn-audio"><audio id="mp3Btn"><source src="https://tts.baidu.com/text2audio?tex=飞鸟慕鱼博客&cuid=dict&lan=ZH&ctp=2&pdt=11&vol=1&per=4100" type="audio/mpeg" /></audio></div>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
.btn-audio{
    margin: 90px auto;
    width: 186px;
    height: 186px;
    background:url(voice.png) no-repeat center bottom;
    background-size:cover;
}
</style>
<!--JavaScripy:-->
<script type="text/javascript">
    $('.btn-audio').click(function() {
        var audio = document.getElementById('mp3Btn');
        audio.volume = .3;
        if(audio.paused){ //如果当前是暂停状态
            audio.play(); //播放
            return;
        }else{//当前是播放状态
            audio.pause(); //暂停
        }
    });
</script>

注意:

1、以上代码中对 audio 标签的样式做了一些修改,并使用JS来控制播放,自己可以处理成默认样式,

<audio controls>
    <source src="https://tts.baidu.com/text2audio?tex=飞鸟慕鱼博客&cuid=dict&lan=ZH&ctp=2&pdt=11&vol=1&per=4100" type="audio/mpeg" />
</audio>

2、其中百度语音合成的链接如下

https://tts.baidu.com/text2audio?tex=飞鸟慕鱼博客&cuid=dict&lan=ZH&ctp=2&pdt=11&vol=1&per=4100