html5 audio 微信语音样式,模仿微信语音条的css样式

7

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,专注于音频波形图,是一个非常好的音频可视化工具。

语音html5audio微信语音样式

版权声明:除非特别标注,否则均为网络文章,侵权请联系站长删除。

上一篇 Android仿微信语音聊天功能

下一篇 微信语音技术原理_语音识别的技术原理是什么?