一款jQuery仿微信公众号语音框插件weixinAudio.js,页面加载完成后自动播放设定的音频文件,显示播放时长、实时播放进度条和播放GIF,可点击停止或继续播放,喜欢的童鞋请收下吧。
页面的head部分,需要设置好页面元素的样式,代码如下:
body{
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
.db {
display: block;
}
.weixinAudio {
line-height: 1.5;
}
.audio_area {
display: inline-block;
width: 100%;
vertical-align: top;
margin: 0px 1px 0px 0;
font-size: 0;
position: relative;
font-weight: 400;
text-decoration: none;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
.audio_wrp {
border: 1px solid #ebebeb;
background-color: #fcfcfc;
overflow: hidden;
padding: 12px 20px 12px 12px;
}
.audio_play_area {
float: left;
margin: 9px 22px 10px 5px;
font-size: 0;
width: 18px;
height: 25px;
}
.playing .audio_play_area .icon_audio_default {
display: block;
}
.audio_play_area .icon_audio_default {
background: transparent url(images/iconloop.png) no-repeat 0 0;
width: 18px;
height: 25px;
vertical-align: middle;
display: inline-block;
-webkit-background-size: 54px 25px;
background-size: 54px 25px;
background-position: -36px center;
}
.audio_play_area .icon_audio_playing {
background: transparent url(images/iconloop.png) no-repeat 0 0;
width: 18px;
height: 25px;
vertical-align: middle;
display: inline-block;
-webkit-background-size: 54px 25px;
background-size: 54px 25px;
-webkit-animation: audio_playing 1s infinite;
background-position: 0px center;
display: none;
}
.audio_area .pic_audio_default {
display: none;
width: 18px;
}
.tips_global {
color: #8c8c8c;
}
.audio_area .audio_length {
float: right;
font-size: 14px;
margin-top: 3px;
margin-left: 1em;
}
.audio_info_area {
overflow: hidden;
}
.audio_area .audio_title {
font-weight: 400;
font-size: 17px;
margin-top: -2px;
margin-bottom: -3px;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
.audio_area .audio_source {
font-size: 14px;
}
.audio_area .progress_bar {
position: absolute;
left: 0;
bottom: 0;
background-color: #0cbb08;
height: 2px;
}
.playing .audio_play_area .icon_audio_default {
display: none;
}
.playing .audio_play_area .icon_audio_playing {
display: inline-block;
}
@-webkit-keyframes audio_playing {
30% {
background-position: 0px center;
}
31% {
background-position: -18px center;
}
61% {
background-position: -18px center;
}
61.5% {
background-position: -36px center;
}
100% {
background-position: -36px center;
}
}
页面的body部分,注意一下音频标签audio,用来装载待播放的音频,其余的span用来显示相关的信息等,代码如下:
<p class="weixinAudio">
<audio src="" id="media" width="1" height="1" preload></audio>
<span id="audio_area" class="db audio_area">
<span class="audio_wrp db">
<span class="audio_play_area">
<i class="icon_audio_default"></i>
<i class="icon_audio_playing"></i>
</span>
<span id="audio_length" class="audio_length tips_global">00:00</span>
<span class="db audio_info_area">
<strong class="db audio_title">狂欢周末/小黄人特攻队</strong>
<span class="audio_source tips_global">来自/小黄人</span>
</span>
<span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
</span>
</span>
</p>
页面的底部,先引入jQuery库、JS插件,然后启用插件,设置好音频的路径,代码如下:
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/weixinaudio.js" charset="utf-8"></script>
<script type="text/javascript">
$('.weixinAudio').weixinAudio({
autoplay:true,
src:'sound/sound.mp3',
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791