html5 微信播放语音,html5的audio实现高仿微信语音播放效果

要实现高仿微信语音播放效果，可以使用HTML5的`audio`标签来实现。下面是一个简单的示例代码：

<audio id="audio" preload="auto">
  <source src="audio.mp3" type="audio/mpeg">
</audio>
<button id="play-btn">播放</button>

<script>
var audio = document.getElementById('audio');
var playBtn = document.getElementById('play-btn');

audio.addEventListener('play', function() {
  playBtn.classList.add('playing');
});

audio.addEventListener('pause', function() {
  playBtn.classList.remove('playing');
});

playBtn.addEventListener('click', function() {
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
});
</script>

<style>
#play-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 0;
  outline: none;
  padding: 0;
}

#play-btn::before {
  content: '\f001';
  font-family: 'FontAwesome';
  font-size: 24px;
}

#play-btn.playing::before {
  content: '\f28c';
}

audio {
  display: none;
}
</style>

在这个示例中，我们创建了一个`audio`标签来加载并播放音频文件。当音频文件开始播放时，我们添加一个`playing`类来切换播放按钮的图标，当音频文件暂停时，我们将这个类移除。在点击播放按钮时，我们检查音频文件的播放状态，如果它已经暂停，我们就开始播放，否则就暂停它。

CSS部分定义了播放按钮和播放状态的样式，这个样式可以根据你的需要进行修改。

你可以将这个示例代码中的`audio.mp3`替换成你自己的音频文件，并将样式代码改为更符合你的需求的样式。