html5 audio 微信语音样式,模仿微信语音条的css样式
随着移动互联网的迅猛发展,语音通讯已成为人们更加便捷、快速的沟通方式之一。而微信也是其中一个应用广泛的社交平台,在愈发成熟的社交体系中,语音留言,语音聊天等以语音为主的沟通方式备受欢迎,在微信聊天窗口中,我们可以发现微信语音样式的展示效果非常直观和流畅。 那么接下来我们就使用html5的audio动态展示一下微信语音条样式。
1.页面结构我们用到的是audio标签,用它来实现语音条功能。我们在html页面中定义一个音频控件。
```html
```
音频的地址采用了一个测试音频,preload=”metadata”属性告诉浏览器只载入音频元数据。
2.样式设计下面是我们实现这个音频细节的样式设计,现据有五个样式类:
```css* {
margin:0;
padding:0;
}
.box {
width:120px;
height:120px;
box-sizing: border-box;
position: relative;
margin:50px auto;
}
.wifi-symbol {
width:50px;
height:50px;
box-sizing: border-box;
position: relative;
margin:20px auto;
}
.iconfont {
font-family: 'iconfont' !important;
font-size:16px!important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variant: normal;
vertical-align: middle;
}
.icon-wifi::before {
content: "e624";
color: rgba(255,255,255,0.6);
text-shadow:006px rgba(0,0,0,0.1);
}
.duration {
font-size:12px;
color: 8F8F8F;
position: absolute;
right:0;
bottom:0;
}
.voice-bar {
width:100%;
height:100%;
position: relative;
border-radius:30px;
background-color: rgba(0,0,0,0.12);
transform: scale(0.8);
background-size:2px8px;
background-repeat: no-repeat;
}
.voice-bar:active:after {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius:50%;
box-shadow:005px10px rgba(0,0,0,0.1);
}
```
(1)全局样式``` css* {
margin:0;
padding:0;
}
```
渲染之前我们必须将传统的结构样式都清空,不受其影响。
(2)外层包裹box样式```css.box {
width:120px;
height:120px;
box-sizing: border-box;
position: relative;
margin:50px auto;
}
```
一个有宽高的盒子,并且居中。
(3)wifi-symbol样式```css.wifi-symbol {
width:50px;
height:50px;
box-sizing: border-box;
position: relative;
margin:20px auto;
}
.iconfont {
font-family: 'iconfont' !important;
font-size:16px!important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variant: normal;
vertical-align: middle;
}
.icon-wifi::before {
content: "e624";
color: rgba(255,255,255,0.6);
text-shadow:006px rgba(0,0,0,0.1);
}
```
wifi——symbol是由五个wifi图标组成的,大小为50*50,垂直居中(4)duration样式```css.duration {
font-size:12px;
color: 8F8F8F;
position: absolute;
right:0;
bottom:0;
}
```
时间持续样式,右下角定位。
(5)voice-bar 样式```css.voice-bar {
width:100%;
height:100%;
position: relative;
border-radius:30px;
background-color: rgba(0,0,0,0.12);
transform: scale(0.8);
background-size:2px8px;
background-repeat: no-repeat;
}
```
voice-bar样式是音频进度条的核心,它具有 border-radius 实现圆角, height 和 width用于设置进度条的宽度, position:relative 实现相对定位, background-color 设置进度条背景, transform : scale(0.8)使其在未激活时有一个缩小效果, background-size用于设置wifi图标间距, background-repeat: no-repeat 防止图片出现重复。
(6)voice-bar active 样式```css.voice-bar:active:after {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius:50%;
box-shadow:005px10px rgba(0,0,0,0.1);
}
```
实现当我们按下时产生波纹效果3. JS交互我们需要监听audio状态,控制进度条等功能。
``` javascriptlet audio = document.querySelector('audio-player');
let voiceBar = document.querySelector('.voice-bar');
let voiceTime = document.querySelector('.duration');
let wifiSymbol = document.querySelector('.wifi-symbol');
let clearSig;
audio.load();
voiceTime.textContent = etime(audio.duration);
function etime(time) { // format friendly time let minute = parseInt(time /60);
let second = parseInt(time %60);
minute = minute >=10 ? minute : '0' + minute;
second = second >=10 ? second : '0' + second;
return minute + ':' + second;
}
voiceBar.addEventListener('touchstart', function(){
let that = this;
if (audio.paused) {
audio.play();
wifiSymbol.classList.add('wifi-animate');
clearSig = setInterval(function() {
voiceTime.textContent = etime(audio.duration - audio.currentTime);
},1000)
} else {
audio.pause();
wifiSymbol.classList.remove('wifi-animate');
clearInterval(clearSig);
}
})
audio.addEventListener('play',function(){ console.log('play')
})
audio.addEventListener('pause',function(){ console.log('pause')})
audio.addEventListener('timeupdate',function(){ let value = Math.round(audio.currentTime/audio.duration*100)})
audio.addEventListener('ended',function(){ console.log('ended');})
```
(1)获取dom元素,audio, voice-bar等元素。
(2)初始加载音频,设置时间显示格式。
(3)监听touchstart事件,开始播放和暂停播放,并添加wifi动态效果,在播放时根据音频持续时间刷新时间显示。
(4)事件监听,监听播放,暂停,时间刷新,结束事件。
4.总结以上就是这篇文章的全部内容,相信本文让大家了解了微信语音条的样式设计和实现过程,我们在实际项目中可以更灵活的运用,完成自己需要的音频样式。同时,这里也可以推荐一个音频相关的库—— wavesurfer.js,专注于音频波形图,是一个非常好的音频可视化工具。