仿微信语音播放效果代码
时间: 2023-07-23 18:05:30 浏览: 142
以下是一个简单的仿微信语音播放效果的代码示例:
HTML:
```html
<div class="voice-message">
<div class="voice-icon">
<i class="fa fa-play"></i>
</div>
<div class="voice-progress">
<div class="progress-bar"></div>
</div>
<audio src="voice-message.mp3"></audio>
</div>
```
CSS:
```css
.voice-message {
display: flex;
align-items: center;
}
.voice-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #48c9b0;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.voice-icon i {
color: #fff;
}
.voice-progress {
flex: 1;
height: 4px;
border-radius: 2px;
background-color: #f2f2f2;
position: relative;
}
.progress-bar {
height: 100%;
border-radius: 2px;
background-color: #48c9b0;
width: 0;
position: absolute;
top: 0;
left: 0;
}
```
JavaScript:
```javascript
const audio = document.querySelector('audio');
const voiceIcon = document.querySelector('.voice-icon');
const progressBar = document.querySelector('.progress-bar');
let isPlaying = false;
voiceIcon.addEventListener('click', () => {
if (isPlaying) {
audio.pause();
voiceIcon.innerHTML = '<i class="fa fa-play"></i>';
isPlaying = false;
} else {
audio.play();
voiceIcon.innerHTML = '<i class="fa fa-pause"></i>';
isPlaying = true;
}
});
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = `${progress}%`;
});
audio.addEventListener('ended', () => {
voiceIcon.innerHTML = '<i class="fa fa-play"></i>';
progressBar.style.width = '0';
isPlaying = false;
});
```
解释:
1. HTML 中包含一个播放语音的 audio 元素,以及一个用于显示播放进度的进度条元素。
2. CSS 中定义了播放按钮和进度条的样式。
3. JavaScript 中添加了点击播放按钮时的事件监听器,根据播放状态进行切换,并实时更新进度条的宽度。同时,当播放结束时,重置播放状态和进度条宽度。