客户定制了一个IPV4格式的IP地址在线查询的工具,需要用户在前台输入IPV4格的IP地址,为了防止用户输入的IPV4格式的IP错误,又减少后端的服务器资源的浪费,就想到了先在前台用JS脚本判断一下,
2021-11-06 16:47:14
285
这段时间一直在攻克查词项目,其中就涉及到了个别单词的语音朗读。网上找了一下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
16
2022-09
16
2022-09
13
2022-09
13
2022-09
13
2022-09
03
2022-09