这个功能是在最百度语音合成的时候涉及到的，这个功能我也是第一次写，毕竟前端的东西不是很擅长。特此记录一下。
需求
页面中加载两个音频文件，通过两个按钮进行播放，一个暂停开关。效果就不给大家做展示了。
HTML代码
代码语言：javascript复制<span class="item openMusic" id="MaleVoice">男声</span>
<span class="item openMusic" id="FemaleVoice">女声</span>
<span class="item openMusic" id="PauseSound">暂停</span>音频代码
代码语言：javascript复制<audio preload="none" controls="controls" hidden src="/music.mp3" id="MaleVoiceAudio"></audio>
<audio preload="none" controls="controls" hidden src="/music.mp3" id="FemaleVoiceAudio"></audio>JS代码
代码语言：javascript复制//男声播放
$("#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区分开；
女声播放的控制代码就不做展示了，原理都是相同的。下面看一下暂停的代码操作；
代码语言：javascript复制//暂停
$("#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("开始");
}
}
});暂停的代码操作使用了状态判断和类判断，在不同的状态下执行相反操作。
这里没有使用图标模式展示，大家可以自行扩展成播放图标。样式会更好看一下。这里再说一下，目前主流浏览器是无法自动播放声音的，防止出现流氓广告的问题。
