js模仿微信语音播放的小功能

时间：2022-01-22 19:43:53

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

<!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>

 

标签：

相关文章