5的audio实现高仿微信语音播放效果，需要先明确我们希望实现的效果是怎样的。在微信中，当我们点击语音消息时，会出现一个语音波动的动画效果，同时会播放语音消息。当我们点击另外一个语音消息时，当前语音消息会停止，并播放新的语音消息。因此，我们需要实现以下几个功能：
1. 点击播放：点击语音消息时，播放对应的mp3格式录音；
2. 动画效果：播放语音消息时，显示语音波动的动画效果；
3. 停止播放：点击另外一个语音消息时，停止当前语音消息的播放，并播放新的语音消息。
接下来，我们将逐步实现这些功能。
1. 播放语音消息首先，我们需要使用HTML5的audio标签来实现播放功能。在HTML页面中，可以这样写：
```html
```
这样，我们就创建了一个id为audio1的音频元素，并且指定了音频文件的URL为audio1.mp3。接下来，我们需要使用JavaScript来控制音频的播放和暂停：
```javascriptvar audio1 = document.getElementById('audio1');
// 点击语音消息时，播放对应的录音function playAudio() {
audio1.play();
}
// 停止当前语音消息的播放function stopAudio() {
audio1.pause();
audio1.currentTime =0;
}
```
通过上述代码，我们定义了playAudio()函数来播放语音消息，以及stopAudio()函数来停止当前的语音消息播放。这样一来，点击语音消息时，就可以播放对应的录音，点击另外一个语音消息时，当前语音消息会停止。
2. 动画效果实现动画效果可以使用CSS3的逐帧动画来实现。我们可以通过在样式表中定义一组关键帧来实现语音波动的动画效果：
```css@keyframes voice-wave {
0% { transform: scaleY(1); }
50% { transform: scaleY(1.5); }
100% { transform: scaleY(1); }
}
.voice-wave {
width:10px;
height:30px;
background-color: 58a;
animation: voice-wave1s infinite alternate;
}
```
在这段CSS代码中，我们定义了一个名为voice-wave的逐帧动画效果。在动画中，我们使用了transform属性来控制元素的缩放（scaleY）动画效果。将这组关键帧应用到我们的语音消息元素上，就可以在播放语音消息时，显示语音波动的动画效果：
```html
```
通过在语音消息元素上添加一个名为voice-wave的DIV元素，并在其中设置相关的样式，以及在HTML中调用playAudio()函数来播放语音消息，就可以实现在点击语音消息时，显示语音波动的动画效果。
3. 停止播放最后，当我们点击另外一个语音消息时，需要停止当前语音消息的播放。这个功能已经在前面的JavaScript代码中实现，因此只需要在点击另外一个语音消息时调用stopAudio()函数即可：
```html
```
通过在点击另外一个语音消息时调用stopAudio()函数停止当前语音消息的播放，并且调用playAudio()函数来播放新的语音消息，就可以实现在点击另外一个语音消息时，停止当前语音消息的播放。
综上所述，通过使用HTML5的audio标签来实现语音消息的播放功能，并结合CSS3的逐帧动画来实现语音波动的动画效果，以及使用JavaScript来控制语音消息的播放和停止，就可以实现一个高仿微信语音播放效果。希望本文的内容能够对您有所帮助。
