H5-Merchant/emChat/emChatContainer/emMessageListContainer/messagesItem/audioMsgItem/index.css

.audio_msg_container {
  width: 125px;
  height: 36px;
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  align-items: center;
}
.audio_msg_container_mine {
  color: #f9fafa;
  background: #009eff;
  border-radius: 16px 12px 4px 16px;
}
.audio_msg_container_other {
  flex-direction: row-reverse;
  color: #171a1c;
  background: #e5f5ff;
  border-radius: 12px 16px 16px 4px;
}
.audio_msg_play_icon {
  width: 16px;
  height: 15px;
}
/* mine */
.audio_msg_play_icon_mine {
  background: url('~@/static/images/new_ui/message/audio/mine_playing_icon.png')
    no-repeat;
  background-size: 100% 100%;
}

@keyframes mine_play_icon {
  0% {
    background: url('~@/static/images/new_ui/message/audio/mine_playing2_icon.png')
      no-repeat;

    background-size: 100% 100%;
  }
  50% {
    background: url('~@/static/images/new_ui/message/audio/mine_playing_icon.png')
      no-repeat;
    background-size: 100% 100%;
  }
  100% {
    background: url('~@/static/images/new_ui/message/audio/mine_playing2_icon.png')
      no-repeat;
    background-size: 100% 100%;
  }
}
.start_mine_play_audio {
  animation: mine_play_icon 2s;
  animation-iteration-count: infinite;
}
/* other */
.audio_msg_play_icon_other {
  background: url('~@/static/images/new_ui/message/audio/other_playing_icon.png')
    no-repeat;
  background-size: 100% 100%;
}
@keyframes other_play_icon {
  0% {
    background: url('~@/static/images/new_ui/message/audio/other_playing2_icon.png')
      no-repeat;

    background-size: 100% 100%;
  }
  50% {
    background: url('~@/static/images/new_ui/message/audio/other_playing_icon.png')
      no-repeat;
    background-size: 100% 100%;
  }
  100% {
    background: url('~@/static/images/new_ui/message/audio/other_playing2_icon.png')
      no-repeat;
    background-size: 100% 100%;
  }
}
.start_other_play_audio {
  animation: other_play_icon 2s;
  animation-iteration-count: infinite;
}