自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,,  代码如下:

<!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模仿微信语音播放的小功能的更多相关文章

  1. js仿微信语音播放

    html结构如下: <div class="app-voice-you" voiceSrc="xx.mp3"> <img class=&quo ...

  2. 纯css3配合vue实现微信语音播放效果

    前言 每次写点东西都扯两句-0-,这几天一半精力放在移动端,一半维护之前的项目.书也少看了,不过还好依旧保持一颗学习的心.对于css3我是之前有专门整理过的,因此对于原理之前也算了解.今天是项目中遇到 ...

  3. html5的audio实现高仿微信语音播放效果

    效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...

  4. 网站开发---js与java实现的一些小功能

    记录一下网站开发过程中的一些小功能 1.js获取当前年份: <span>Copyright © 2017-<script>document.write( new Date(). ...

  5. Android模仿微信语音聊天功能

    项目效果如下: 项目目录结构如下: 代码如下: AudioManager.java import java.io.File; import java.io.IOException; import ja ...

  6. html5的audio实现高仿微信语音播放效果（实际项目）

    HTML部分: <div class="tab-pane fade dialog-record" id="dialogRecord"> <vo ...

  7. iOS 类微信语音播放之切换听筒和扬声器的方法解决方案

    [[UIDevice currentDevice] setProximityMonitoringEnabled:NO];   //建议在播放之前设置yes,播放结束设置NO,这个功能是 //添加监听 ...

  8. html5的audio实现高仿微信语音播放效果Demo

    HTML部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  9. iOS下微信语音播放之切换听筒和扬声器的方法解决方案

    [[UIDevice currentDevice] setProximityMonitoringEnabled:YES]; //建议在播放之前设置yes,播放结束设置NO,这个功能是开启红外感应 // ...

随机推荐

  1. ubuntu16配置Mask-RCNN

    一.安装Anaconda3 1.下载 下载地址:https://www.continuum.io/downloads 2.安装 在文件目录下执行:bash Anaconda3-4.2.0-Linux- ...

  2. Luogu 2831 [NOIP2016] 愤怒的小鸟

    第一眼看成爆搜的状压dp,膜Chester大神犇. 考虑到三个不在同一直线上的点可以确定一条抛物线,而固定点$(0, 0)$和不在同一直线上这两个条件是题目中给定的,所以我们只要枚举两个点然后暴力算抛 ...

  3. 初识 Redis

    浏览目录 什么是redis redis的特点 redis的安装和基本使用 操作模式 连接池 操作 string操作 hash操作 list操作 什么是Redis? redis是一个key-value存 ...

  4. 非阻塞socket与epoll

    阻塞socket. –阻塞调用是指调用结果返回之前,当前线程会被挂起.函数只有在得到结果之后才会返回. –对于文件操作read,fread函数调用会将线程阻塞. –对于socket,accept与re ...

  5. 20169219 《Linux内核原理与分析》 第十周作业

    进程地址空间 1.进程地址空间由进程可寻址的虚拟内存组成.Linux系统中的所有进程之间以虚拟方式共享内存. 2.进程只能访问有效内存区域内的内存地址. 内存区域可以包含各种内存对象: (1) 代码段 ...

  6. python常见的加密解密

    #!/usr/bin/env python ''' Python Crypto Wrapper - By Chase Schultz Currently Supports: AES-256, RSA ...

  7. enum枚举型

    在实际编程中,有些数据的取值往往是有限的,只能是非常少量的整数,并且最好为每个值都取一个名字,以方便在后续代码中使用,比如一个星期只有七天,一年只有十二个月,一个班每周有六门课程等. 以每周七天为例, ...

  8. javaweb访问hdfs的一些错误

    javaweb 与 HDFS 坑 前提:javaweb 项目,hdfs中的数据文件,导入访问hdfs的jar包,eclipse调试 问题:在×××.java代码中正常访问hdfs,浏览jsp时调用×× ...

  9. Linux之创建777权限的文件

    服务器中运行项目的时候,有时候会出现图片上传失败,查看报错原因才知道是文件夹没有写入权限导致上传失败. 方案1: 在使用Linux命令更改对应目录的权限 方案2: 在代码中创建文件夹的时候给予对应的7 ...

  10. 洛谷P4173 残缺的字符串（FFT）

    传送门 话说为什么字符串会和卷积扯上关系呢……到底得脑洞大到什么程度才能想到这种东西啊……大佬太珂怕了…… 因为通配符的关系,自动机已经废了 那么换种方式考虑,如果两个字符串每一位对应的编码都相等,那 ...