我的html结构是这样的
class="app-voice-you" voiceSrc="xxmp3">
class="app-voice-headimg" src="xxpng" />
style="width: 60%;" class="app-voice-state-bg">
class="app-voice-state app-voice-pause">
class="app-voice-time app-voice-unread">
1'6"
id="audio_my" src="">
Your browser does not support the audio tag
核心功能就是语音播放，主要包括了以下几个功能点：
红点表明未听语音，语音听过后，红点会消失;
将“未读”状态的样式独立出来，“已读”的时候，把样式删除就行。结合本地存储处理就搞定了。
//this是点击的语音的document
var app_voice_time = thisgetElementsByClassName("app-voice-time")[0];
if(app_voice_timeclassNameindexOf("app-voice-unread") != -1){
//存在红点时，把红点样式删除
app_voice_timeclassName = app_voice_timeclassNamereplace("app-voice-unread","");
}
第一次听语音，会自动播放下一段语音;
这里主要是使用HTML5的audio控件的“语音播放完”事件
语音播放完，找到下一个语音，播放下一个语音
//语音播放完事件(PAGEaudio是audio控件的document)
PAGEaudioaddEventListener('ended', function () {
//循环获取下一个节点
PAGEpreVoice = PAGEcurrentVoice;
var currentVoice = PAGEcurrentVoice;
while(true){
currentVoice = currentVoicenextElementSibling;//下一个兄弟节点
//已经到达最底部
if(!currentVoice){
PAGEpreVoicegetElementsByClassName("app-voice-state")[0]className = "app-voice-state app-voice-pause";
return false;
}
var voiceSrc = currentVoicegetAttribute("voiceSrc");
if(voiceSrc && voiceSrc != ""){
break;
}
}
if(!PAGEautoNextVoice){
PAGEpreVoicegetElementsByClassName("app-voice-state")[0]className = "app-voice-state app-voice-pause";
return false;
}
PAGEcurrentVoice = currentVoice;
//获取得到下一个语音节点，播放
PAGEaudiosrc = voiceSrc;
PAGEaudioplay();
PAGEEvent_PlayVoice();
}, false);
每段语音可以暂停、继续播放、重新播放;
这个比较简单，但是也是比较多逻辑。需要变换样式告诉用户，怎样是继续播放/重新播放。
播放中的语音有动画，不是播放中的语音则会停止动画。
这里主要是CSS3动画的应用
app-voice-pause,app-voice-play{
height: 18px;
background-repeat: no-repeat;
background-image: url(/img/voicepng);
background-size: 18px auto;
opacity: 05;
}
app-voice-you app-voice-pause{
/从未播放/
background-position: 0px -39px;
}
app-voice-you app-voice-play{
/播放中（不需要过渡动画）/
background-position: 0px -39px;
-webkit-animation: voiceplay 1s infinite step-start;
-moz-animation: voiceplay 1s infinite step-start;
-o-animation: voiceplay 1s infinite step-start;
animation: voiceplay 1s infinite step-start;
}
@-webkit-keyframes voiceplay {
0%,
100% {
background-position: 0px -39px;
}
33333333% {
background-position: 0px -0px;
}
66666666% {
background-position: 0px -197px;
}
}
简单写一下吧，希望你能看懂
UIButton button = ; // 切换按钮UITextField inputTextField = ; // 文字输入文本框
UIButton recordAudioButton = ; // 录音按钮
// 点击button调用
- (void)changeMode
{
if (currentMode == @"TextInput") {
inputTextFieldhidden = NO;
recordAudioButtonhidden = YES;
[button setImage:(1) forState:UIControlStateNormal];
} else {
inputTextFieldhidden = YES;
recordAudioButtonhidden = NO;
[button setImage:(2） forState:UIControlStateNormal];
}
}
微信变声如何做到，直接录制变声语音微信发送
微信聊天太过单调，我们往往希望能发送比较搞笑的声音来逗乐好友，或者整蛊对方，那么急需一款微信变声的APP，在这里有一款安卓变声器/聊天变声器可以轻松实现微信变声功能(QQ变声也是类似的用法哦)
1
打开安卓变声器/聊天变声器，调整声音参数，这个时候最好把循环播放勾选，这样你才有足够的时间去听效果，可以边听边调节声音参数，当你听到你想要的效果后就可以将循环播放勾勾去掉了，接下来开始真正的微信变声。
勾选延时播放时间(默认1秒)、勾选两秒语音倒计时、勾选播放时退到后台
然后点击手机的会桌面键(一般就是手机下面中间那个键)
2
打开微信，进入到和某一个好友聊天的页面，最好是到有“按住说话”按钮的页面做好准备录音的动作
3
从手机顶部的状态栏下拉，可以看到变声器的图标，这时候点击进去回到变声器，在变声器中录制要说的话，然后点击播放，变声器会自动播放两秒语音倒计时，并且跳到刚刚的微信聊天页面，当你听到“嘟嘟”两声后，你就按住“按住说话”按钮，微信就会开始录制变声后的声音了，当录制完整后松开手指，发给好友的就是变声后的声音啦
望采纳，谢谢
语音接听设置是默认的。
微信接听语音的方式，都是系统默认的，不用单独设置，所有人的接听方式都一样，都是按绿键接听。进入个人微信主页，点击下方的我；在新页面中，我们可以点击设置按钮；在设置页面中，选择聊天选项；使用听筒播放语音是处于关闭状态的，点击打开；
现在是处于开启听筒收听语音消息的，只要有语音消息过来，使用听筒就可以听了，而别人是听不到的。
微信语音可以使用微信小程序变声器来实现：
下面我以手机微信8027版本为您演示
1、首先打开微信，然后再找到发现如下图所示：
2、然后再找到小程序如下图所示：
3、然后再找到搜索图标如下图所示：
4、然后在搜索框里输入变声器然后再选择一款变声器小程序，如下图所示：
5、然后选择一个声音，即可，再打微信语音的时候就会变成这个声音了，如下图所示;
