万网独立主机 怎么做多个网站/网页制作在线生成

这个功能是在最百度语音合成的时候涉及到的，这个功能我也是第一次写，毕竟前端的东西不是很擅长。特此记录一下。

需求

页面中加载两个音频文件，通过两个按钮进行播放，一个暂停开关。效果就不给大家做展示了。

HTML代码

男声女声暂停

音频代码

JS代码

//男声播放$("#MaleVoice").click(function () {    console.log("男声播放");    $("#MaleVoiceAudio").removeClass("open-this");    $("#FemaleVoiceAudio").removeClass("open-this");    $("#MaleVoiceAudio").addClass("open-this");    var myAuto = document.getElementById('MaleVoiceAudio');    var otherAuto = document.getElementById('FemaleVoiceAudio');    if (otherAuto !== null) {        otherAuto.pause();    }    myAuto.play();    $("#PauseSound").html("暂停");});

代码说明：

1、这里面涉及到了一个open-this的类，主要是方便后期在进行暂停操作的时候，区分是男声、女声播放源；

2、获取audio的元素需要使用js来操作，在使用jQ时无法获取到；

3、播放状态使用元素 .paused​，注意和pause区分开；

script

女声播放的控制代码就不做展示了，原理都是相同的。下面看一下暂停的代码操作；

//暂停$("#PauseSound").click(function () {    if ($("#MaleVoiceAudio").hasClass("open-this")) {        //男声        var myAuto = document.getElementById('MaleVoiceAudio');    } else {        //女声        var myAuto = document.getElementById('FemaleVoiceAudio');    }    if (myAuto !== null) {        if (myAuto.paused) {            myAuto.play();            $("#PauseSound").html("暂停");        } else {            myAuto.pause();            $("#PauseSound").html("开始");        }    }});

暂停的代码操作使用了状态判断和类判断，在不同的状态下执行相反操作。

这里没有使用图标模式展示，大家可以自行扩展成播放图标。样式会更好看一下。这里再说一下，目前主流浏览器是无法自动播放声音的，防止出现流氓广告的问题。

​百度AI接口开发文字转语音功能-符号错误