仿微信播放语音效果
时间: 2023-07-04 10:06:30 浏览: 71
要实现仿微信播放语音效果,可以使用 HTML5 的 Audio API 和 JavaScript。具体步骤如下:
1. 创建一个 `audio` 元素
```html
<audio id="audio" preload="metadata">
<source src="audio.mp3" type="audio/mpeg">
</audio>
```
2. 通过 JavaScript 控制播放和暂停
```javascript
const audio = document.getElementById('audio');
const playBtn = document.getElementById('play-btn');
const pauseBtn = document.getElementById('pause-btn');
playBtn.addEventListener('click', () => {
audio.play();
});
pauseBtn.addEventListener('click', () => {
audio.pause();
});
```
3. 添加动画效果
可以使用 CSS 的动画效果来实现仿微信的语音播放动画。具体实现方式可以参考以下示例代码:
```css
.message-audio {
position: relative;
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
background-color: #f5f5f5;
animation: pulse 1s infinite;
}
.message-audio.playing {
animation: pulse 1s infinite;
}
.message-audio .icon {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 6px;
background-image: url(audio-icon.png);
background-size: cover;
}
@keyframes pulse {
0% {
background-color: #f5f5f5;
}
50% {
background-color: #e0e0e0;
}
100% {
background-color: #f5f5f5;
}
}
```
在播放按钮点击事件中,添加 `playing` 类名,动态切换播放状态的 CSS 样式即可。
```javascript
playBtn.addEventListener('click', () => {
audio.play();
messageAudio.classList.add('playing');
});
pauseBtn.addEventListener('click', () => {
audio.pause();
messageAudio.classList.remove('playing');
});
```
这样就可以实现一个简单的仿微信播放语音效果。