js模仿微信语音播放的小功能
自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,, 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li {
list-style: none;
width: 100px;
height: 30px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.voice_play {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
<li id="1" data-time="5">
<audio preload="auto" hidden="true"><source src="./明智之举.mp3" type="audio/mpeg"></audio>
<img src="./i_voice_other.png" alt="" class="voice_stop">
<img src="./i_voice_other.gif" alt="" class="voice_play">
</li>
<li id="2" data-time="10">
<audio preload="auto" hidden="true"><source src="./tik_tok.mp3" type="audio/mpeg"></audio>
<img src="./i_voice_other.png" alt="" class="voice_stop">
<img src="./i_voice_other.gif" alt="" class="voice_play">
</li>
<li id="3" data-time="14">
<audio preload="auto" hidden="true"><source src="./You&I.mp3" type="audio/mpeg"></audio>
<img src="./i_voice_other.png" alt="" class="voice_stop">
<img src="./i_voice_other.gif" alt="" class="voice_play">
</li>
</ul>
</body>
<script>
// 展示语音播放和暂停是通过两张图片切换,一张静态图,一张GIF动图,这里就不传图片,下载的时候自己放入图片即可
// 语音的时长这里是模拟的,一般是后台会返回,根据实际时长取
$('li').click(function () {
var val = $(this).attr('val')
// 每次点击前清除定时器
clearTimeout(timeId)
var audio = $(this).children("audio")[0]
// 语音的时长
var time = $(this).data('time')
// console.log(time)
// 判断当前点击的是否已经在播放, value的值是自己设置的用来区分播放状态和暂停状态的,1是未播放状态,2是已经在播放状态
if (val && val == 2) {
// console.log('if')
$(this).children('.voice_play').hide()
$(this).children('.voice_stop').show()
audio.pause() // 暂停
// 重新设置为空,方便下一次点击
$(this).attr('val', 1)
} else {
// console.log('else')
// 找到除点击之外的其他语音,判断这次点击之前是否已经有歌曲在播放,如果是从其他的语音跳转过来,
// 要把以前播放的状态改变,,总体思路:页面上只能有一个语音在播放,只有一个val为2 $('li').attr('val', 1)
$(this).attr('val', 2)
var audiolist = $('li').children("audio")
// 暂停其他播放
for (let i = 0; i < audiolist.length; i++) {
// console.log(audiolist[i])
audiolist[i].pause()
}
$('li').children('.voice_play').hide()
$('li').children('.voice_stop').show()
$(this).children('.voice_play').show()
$(this).children('.voice_stop').hide()
audio.load() //加载
audio.play() //播放
}
// console.log($('li').children("audio")) // 语音播放完切换动画
var timeId = setTimeout(() => {
// console.log('set',time)
$(this).children('.voice_play').hide()
$(this).children('.voice_stop').show()
$(this).attr('val', 1)
}, time * 1000)
})
</script>
</html>
js模仿微信语音播放的小功能的更多相关文章
- js仿微信语音播放
html结构如下: <div class="app-voice-you" voiceSrc="xx.mp3"> <img class=&quo ...
- 纯css3配合vue实现微信语音播放效果
前言 每次写点东西都扯两句-0-,这几天一半精力放在移动端,一半维护之前的项目.书也少看了,不过还好依旧保持一颗学习的心.对于css3我是之前有专门整理过的,因此对于原理之前也算了解.今天是项目中遇到 ...
- html5的audio实现高仿微信语音播放效果
效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...
- 网站开发---js与java实现的一些小功能
记录一下网站开发过程中的一些小功能 1.js获取当前年份: <span>Copyright © 2017-<script>document.write( new Date(). ...
- Android模仿微信语音聊天功能
项目效果如下: 项目目录结构如下: 代码如下: AudioManager.java import java.io.File; import java.io.IOException; import ja ...
- html5的audio实现高仿微信语音播放效果(实际项目)
HTML部分: <div class="tab-pane fade dialog-record" id="dialogRecord"> <vo ...
- iOS 类微信语音播放之切换听筒和扬声器的方法解决方案
[[UIDevice currentDevice] setProximityMonitoringEnabled:NO]; //建议在播放之前设置yes,播放结束设置NO,这个功能是 //添加监听 ...
- html5的audio实现高仿微信语音播放效果Demo
HTML部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- iOS下微信语音播放之切换听筒和扬声器的方法解决方案
[[UIDevice currentDevice] setProximityMonitoringEnabled:YES]; //建议在播放之前设置yes,播放结束设置NO,这个功能是开启红外感应 // ...
随机推荐
- c# 类的初步认识
这里我们把类分为三种: String类(字符串类):Math类(数学类):DateTime类(时间日期类). 在使用类时注意 在输入的过程中代码前面会出现一些符号(紫色立方体代表方法,函数和黑色扳手 ...
- 【摘自张宴的"实战:Nginx"】nginx配置
user nobody;worker_processes 2; #error_log logs/error.log;error_log logs/error.log notice;#error_log ...
- tar打包tar.gz文件
命令格式: tar zcvf dir.tar.gz ./dir 压缩后的文件解压出来会是dir这个文件夹
- 浅谈android代码保护技术_ 加固
浅谈android代码保护技术_加固 导语 我们知道Android中的反编译工作越来越让人操作熟练,我们辛苦的开发出一个apk,结果被人反编译了,那心情真心不舒服.虽然我们混淆,做到native层,但 ...
- 关于 windows mobile 进程操作的方法
#region Process class /// <summary> /// Summary description for Process. /// </summary> ...
- Spring学习大纲
1.BeanFactory 和 FactoryBean? 2.Spring IOC 的理解,其初始化过程? 3.BeanFactory 和 ApplicationContext? 4.Spring B ...
- jQuery 基础 : 获取对象 根据属性、内容匹配, 还有表单元素匹配
指定元素中包含 id 属性的, 如: $("span[id]") <span id="span1" name="S1">AA ...
- 如何设置Oracle process值
参考链接:http://blog.51cto.com/sunwayle/88870 su - oracle sqlplus system as sysdba; show parameter proce ...
- spring aop实现权限管理
问题源于项目开发 最近项目中需要做一个权限管理模块,按照之前同事的做法是在controller层的每个接口调用之前上做逻辑判断,这样做也没有不妥,但是代码重复率太高,而且是体力劳动,so,便有了如题所 ...
- sqlite3使用备忘
执行sqlite3进入sqlite3环境: $ sqlite3 SQLite version -- :: Enter ".help" for usage hints. Connec ...