2:30
1:45
CSS样式：
.chat-container {
width:100%;
height:100%;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
padding:20px;
position: relative;
}
.chat-box {
max-width:70%;
display: flex;
flex-direction: column;
}
.chat-message {
margin-bottom:10px;
}
.message-audio {
display: flex;
align-items: center;
}
.audio-play {
display: flex;
align-items: center;
margin:5px;
padding:5px;
border-radius:20px;
background-color: f0f0f0;
cursor: pointer;
}
.audio-play img {
width:20px;
height:20px;
margin-right:5px;
}
.audio-length {
font-size:14px;
}
.voice-recording {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom:20px;
width:100%;
}
.record-button {
padding:10px20px;
border-radius:20px;
background-color: f0f0f0;
cursor: pointer;
color: 333;
}
.recording-indicator {
width:10px;
height:10px;
border-radius:50%;
background-color: red;
margin-left:10px;
display: none;
}
JavaScript功能实现：
// 播放语音消息document.querySelectorAll(".audio-play").forEach(function(audio) {
audio.addEventListener("click", function() {
// 播放语音的逻辑 });
});
// 录制语音消息var recordButton = document.querySelector(".record-button");
var recordingIndicator = document.querySelector(".recording-indicator");
recordButton.addEventListener("mousedown", function() {
// 开始录制语音 recordingIndicator.style.display = "block";
});
recordButton.addEventListener("mouseup", function() {
// 结束录制语音 recordingIndicator.style.display = "none";
// 发送录制的语音});
以上是一个仿微信语音聊天框的样式和功能的实现代码。在该代码中，使用了HTML和CSS来创建了一个简单的聊天界面，其中包含了接收和发送语音消息的样式与布局。同时，通过JavaScript实现了播放和录制语音消息的功能。
从样式上看，聊天框采用了flex布局，使其能够动态适应不同屏幕大小。语音消息部分包含了左右两种不同的小喇叭样式，用以区分接收和发送的语音消息。同时，录制语音按钮也采用了简单的样式，鼠标按住和松开时会显示不同的状态，以提升用户交互体验。
在功能实现上，通过JavaScript监听了语音播放和录制的操作，当用户点击语音消息时，会触发播放语音的逻辑；而当用户按住录制按钮时，会显示录制状态的指示器，并在松开按钮时完成录制并发送语音消息。这些功能的具体实现可能需要配合后端接口和语音处理库，以实现语音的录制、存储和播放等完整功能。
总的来说，以上代码实现了一个仿微信语音聊天框的样式和基本功能，为了实现更完整的功能，可能还需要结合后端的支持和一些第三方库的使用。这个代码可以作为一个基础框架，根据具体需求进行扩展和定制，以实现更符合实际项目需求的语音聊天功能。
