<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>jQuery仿微信公众号语音播放代码</title>
</head>
<style type="text/css">
.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(img/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(img/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;
}
}
</style>
<body>
<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">3:07</span>
<span class="db audio_info_area">
<strong class="db audio_title">Title/标题</strong>
<span class="audio_source tips_global">From/来源</span>
</span>
<span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
</span>
</span>
</p>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/weixinAudio.js" type="text/javascript"></script>
<script type="text/javascript">
$('.weixinAudio').weixinAudio({
autoplay:true,
src:'sound/sound.mp3',
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码下载：<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery仿微信公众号语音播放代码.zip （5个子文件） 
js 
weixinAudio.js 3KB jquery.min.js 91KB img 
iconloop.png 2KB
index.html 4KB sound sound.mp3 74KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5851
最新资源
- python-4.Surface对象移动-所指即是方向.py
- python-3.显示按下字符-你的操作我都能看到~.py
- python-2.所有事件-都会发生什么呢.py
- openjdk-23-macos-aarch64-bin.tar.gz
- 基于java+ssm+mysql的汽车客运订票系统开题报告.doc
- openjdk-23-linux-aarch64-bin.tar.gz
- 基于java+ssm+mysql的苹果网吧计费管理系统开题报告.doc
- python练习记录.zip
- 基于python和flask的学生管理系统源码+数据库（高分项目）
- harden_iL_prod_release_v4_11_0_263_11302134_signed.apk
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
