关键词:
HTML部分:
<div class="tab-pane fade dialog-record" id="dialogRecord"> <volist name="dialogRecord" id="record"> <div class="dialog"> <span class="time">{$record.time}</span> <span class="text">{$record.asr}</span> <div class="dialog-container"> <div class="audio-animation"> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> </div> </div> <audio class="audio"> <source src="{$record.audition_url}"/> </audio> <div class="focus" tabindex =0></div> </div> </volist> </div>
css部分:
.dialog-record .dialog span.text{ max-width: 83%; height: auto; background: #0094DE; padding-left: 3.5%; padding-right: 3.5%; padding-top: 8px; padding-bottom: 8px; font-size: 1.3rem; color: #fff; line-height: 25px; border-radius: 5px; margin-left: 7px; display: inline-block; margin-right: 3%; } .dialog-record .dialog span.time{ display: block; width: 100%; text-align: center; margin-bottom: 5px; color: #666; } .dialog-record .dialog .focus{ height: 5px; outline-style: none; } /*播放语音时的动画*/ @keyframes yuying{ 0%{ height: 0%; } 20%{ height: 50%; } 50%{ height: 90%; } 80%{ height: 50%; } 100%{ height: 0%; } } .dialog-container{ width: 40px; height: 40px; border: 2px solid #0094de; border-radius: 8px; display: inline-flex; justify-content: center; align-items: center; } .dialog-container .audio-animation{ width: 20px; height: 20px; } .audioPlay #one{ animation:yuying 0.6s infinite 0.15s; -webkit-animation:yuying 0.6s infinite 0.15s; } .audioPlay #two{ animation:yuying 0.6s infinite 0.3s; -webkit-animation:yuying 0.6s infinite 0.3s; } .audioPlay #three{ animation:yuying 0.6s infinite 0.45s; -webkit-animation:yuying 0.6s infinite 0.45s; } .audioPlay #four{ animation:yuying 0.6s infinite 0.6s; -webkit-animation:yuying 0.6s infinite 0.6s; } #one,#two,#three,#four{ width:2px; border-radius: 50px; background-color: #0094de; vertical-align: middle; display: inline-block; } #one{ margin-left: 1px; height: 50%; } #two{ height: 90%; } #three{ height: 70%; } #four{ height: 40%; }
JS部分:
//播放语音 $(‘#dialogRecord‘).on(‘click‘,‘.dialog-container‘,function(){ var currentNode = $(this); var audioEle = $(this).siblings(‘.audio‘); playAudio(currentNode,audioEle); }); function playAudio(currentNode,audioEle){ /*jquery对象转换成js对象*/ var player = audioEle[0]; if (player.paused){ /*如果已经暂停*/ player.play(); /*播放*/ currentNode.children(‘.audio-animation‘).addClass(‘audioPlay‘); currentNode.parent().siblings().children(‘.dialog-container‘).find(‘.audio-animation‘).removeClass(‘audioPlay‘); }else { player.pause();/*暂停*/ currentNode.children(‘.audio-animation‘).removeClass(‘audioPlay‘); } // 录音播放结束停止动画 player.addEventListener(‘ended‘, function () { currentNode.children(‘.audio-animation‘).removeClass(‘audioPlay‘); }, false); }
android高仿微信图片选择上传工具(代码片段)
...片选择界面:图片预览界面:批量上传图片:实现的功能介绍:1、图片异步加载,使用Glide开源库实现加载;2、图片的预览界面,支持 查看详情
纯css3配合vue实现微信语音播放效果
前言每次写点东西都扯两句-0-,这几天一半精力放在移动端,一半维护之前的项目。书也少看了,不过还好依旧保持一颗学习的心。对于css3我是之前有专门整理过的,因此对于原理之前也算了解。今天是项目中遇到一个效果,... 查看详情
android高仿微信图片选择上传工具(代码片段)
...片选择界面:图片预览界面:批量上传图片:实现的功能介绍:1、图片异步加载,使用Glide开源库实现加载;2、图片的预览界面,支持左右滑动,双击放大浏览;3、图片批量上传,使用OkHttp来实现与S... 查看详情
高仿微信5.2.1主界面及消息提醒
...做了一些优化,代码与视频中有些出入,但功能可以完全实现。这 查看详情
html5audio标签自制音乐播放器
相关技能HTML5+CSS3(实现页面布局和动态效果)Iconfont(使用矢量图标库添加播放器相关图标)LESS (动态CSS编写)jQuery(快速编写js脚本)gulp+webpack(自动化构建工具,实现LESS,CSS,JS等编译和压缩代码)实现的功能播放暂停(... 查看详情
html5的audio在手机网页上无法自动加载/播放音乐,能否实现该功能?
在IOS中第一次调用play方法播放音频会被阻止,必须得等用户有交互动作,比如touchstart,click后才能正常调用,在微信中可以通过监听WeixinJSBridgeReady事件来提前播放一个超级短的无声音文件,之后替换src,这样再调用play方法就可... 查看详情
h5基础篇--html5audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签。<audio>标签属性<audiosrc="song.mp3"controls="controls"loop="loop"autoplay="autoplay"></audio>当然audio元素允许多个source元素。source元素可以链接不... 查看详情
h5基础篇--html5audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签。<audio>标签属性<audiosrc="song.mp3"controls="controls"loop="loop"autoplay="autoplay"></audio>当然audio元素允许多个source元素。source元素可以链接不... 查看详情
audio标签hover效果rgba和opacity隐藏场景(代码片段)
...audio定义音频流HTML5里引入的新标记<audio>和<video>实现了HTML对视频播放和音频播放的原生支持,有了这种原生的HTML5视频播放器/音频播放器,我们不再需要flash技术,而直接能将视频/音频嵌入到了网页中。<audio>和<... 查看详情
wpf实现截屏(仿微信)
...需要在软件反馈窗体增加截图功能需求,所以今天来实现一个仿微信的截图。01—效果预览效果预览(更多效果请下载源码体验):02—代码如下一、ScreenCut.cs代码如下us 查看详情
html5audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5audio标签微信部分苹果手机不能自动播放音乐终极解决方案大家都知道需要在点击时候后播放ps:如果点击ajax回来播放也不行,必须点击立即播放要背景自动播放只能采取下面方案<pre>wx.ready(function(){$(‘#music1‘)[0].play();})<... 查看详情
请教仿微信聊天气泡效果在ios中是怎么实现的
参考技术A气泡就是个UIImageView,里面有个UITextView是这个UIImageViewd的自view。如果你想显示复杂的东西,比如图片、文字、gif的话,那就要自己现一个VIew去用CoreText这个文本渲染引擎自己去渲染。 查看详情
html5audio如何实现播放多个mp3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流。用的比较多音频格式是.mp3。<audio>标签常用属性如下表属性值描述autoplayautoplay添加该属性后,音频会自动播放controlscontrols设置后,显... 查看详情
解决在ios微信浏览器中无法自动播放html5audio(代码片段)
解决在iOS微信浏览器中无法自动播放HTML5audio问题场景最近在同事在写一个微信页面时发现在ios中不能自动播放背景音乐,也就是autoplay在ios中失效,但是在安卓中可以,于是开始了度娘之旅,发现苹果为了用户着... 查看详情
高仿百思不得姐(最新版4.5.6)
先上效果图 1234567891011 本demo已经实现以下功能音视频播放器启动广告语音、图片评论显示长文本收缩与展开切换历史穿越导航条扩展:包括自动融合分离、全屏穿透、透视、更多选择面板图片自定义缓存策略GIF高效播放... 查看详情
html5视频播放器-videojs+audio标签实现视频,音频及字幕同步播放
一,VideoJS介绍引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站<linkhref=”http://vjs.zencdn.net/c/video-js.css”rel=”stylesheet”><scriptsrc=”http://vjs.zencdn.net/c/video.js”></script>如果需要支持IE 查看详情
html5仿微信聊天界面微信朋友圈实例
这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息、表情,发送的消息自动回滚定位到底部,另外可以对... 查看详情
28.qtquick-listview高仿微信好友列表和聊天列表(代码片段)
1.视图模型介绍 在Qml中、常见的View视图有:ListView:列表视图,视图中数据来自ListModel、XmlListModel或c++中继承自QAbstractItemModel或QAbstractListModel的自定义模型类TableView: 和excel类似的视图GridView:网格视图,类似于home菜单那样,排列... 查看详情