JavaScirpt 调用百度翻译接口朗读单词

发表于 更新于 分类于 ， Waline： 本文字数： 2.4k 阅读时长 ≈ 2 分钟

百度翻译音频的下载链接格式

1
https://fanyi.baidu.com/gettts?lan=en&text=单词&spd=5&source=web

其中spd表示速度,数值越大朗读越快.

示例

1
2
3
4
5
6
7
8
9
10
点击播放(omega):<i class="fa fa-play" aria-hidden="true" onclick="play('audioID5JswJWS3')"></i>

<audio src="https://fanyi.baidu.com/gettts?lan=en&text=omega&spd=5&source=web" id="audioID5JswJWS3"></audio>
<script>
  function play(id){
    if(id!=null){
    var audio=document.getElementById(id);audio.play();
    }
  }
</script>

点击播放(omega):

升级

为了使用方便,我封装成如下JS方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function sst(text) {
    // 创建<audio></audio>元素
    var audio = document.createElement("audio");
    // 设置音频地址
    audio.src = "https://fanyi.baidu.com/gettts?lan=en&text=" + text + "&spd=5&source=web";
    // audio.src = "https://fanyi.baidu.com/gettts?lan=en&text=omega&spd=5&source=web";
    // 添加到body元素中
    document.body.appendChild(audio);
    console.log(audio.src);
    audio.loop = false;
    // 播放
    audio.play();
    // 监听播放结束
    audio.addEventListener('ended', function () {
        // alert('play ended');
        // 从body元素中移除掉,以便下次使用
        document.body.removeChild(audio);
    }, false);
}

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<button onclick="sst('omega')">omega</button><button onclick="sst('audio')">audio</button>
<script>
    function sst(text) {
        // 创建<audio></audio>元素
        var audio = document.createElement("audio");
        // 设置音频地址
        audio.src = "https://fanyi.baidu.com/gettts?lan=en&text=" + text + "&spd=5&source=web";
        // audio.src = "https://fanyi.baidu.com/gettts?lan=en&text=omega&spd=5&source=web";
        // 添加到body元素中
        document.body.appendChild(audio);
        // console.log(audio.src);
        audio.loop = false;
        // 播放
        audio.play();
        // 监听播放结束
        audio.addEventListener('ended', function () {
            // alert('play ended');
            // 从body元素中移除掉,以便下次使用
            document.body.removeChild(audio);
        }, false);
    }
</script>