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

要实现高仿微信语音播放效果，可以使用HTML5的audio标签。

首先，你需要准备好两个不同状态下的语音图标，一个表示未播放状态，一个表示播放状态。可以使用CSS设置这些图标，并使用JavaScript来切换它们的显示。

然后，在HTML中，你需要为每个语音条添加一个audio元素，设置它的src属性为对应的音频文件路径，以及其他属性如controls、preload等。

接下来，你需要为每个语音条添加一个点击事件监听器，在点击时播放对应的音频。你可以使用audio元素的play()方法来播放音频，同时切换语音图标状态。

最后，如果需要，你可以使用JavaScript监听audio元素的ended事件，在音频播放完毕后自动切换回未播放状态的语音图标。

下面是一个简单的示例代码：

HTML部分：

<div class="voice">
  <img src="voice-icon.png" class="voice-icon" data-src="audio.mp3">
  <audio src="audio.mp3"></audio>
</div>

CSS部分：

.voice-icon {
  width: 20px;
  height: 20px;
  background-image: url('voice-icon.png');
  background-size: cover;
}

.voice-icon.playing {
  background-image: url('voice-icon-playing.png');
}

JavaScript部分：

document.querySelectorAll('.voice').forEach(function(voice) {
  var audio = voice.querySelector('audio');
  var icon = voice.querySelector('.voice-icon');

  voice.addEventListener('click', function() {
    if (audio.paused) {
      audio.play();
      icon.classList.add('playing');
    } else {
      audio.pause();
      icon.classList.remove('playing');
    }
  });

  audio.addEventListener('ended', function() {
    icon.classList.remove('playing');
  });
});