web端实现类微信的语音播放效果

最新推荐文章于 2025-05-22 13:03:23 发布

刘承瑜

最新推荐文章于 2025-05-22 13:03:23 发布

阅读量8.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： web语音播放 audio效果

本文链接：https://blog.youkuaiyun.com/LiuChengYu520/article/details/80758441

前端开发专栏收录该内容

1 篇文章

订阅专栏

本文分享了一种在Web端实现语音播放与动画同步的方法。通过监听audio标签的播放、暂停及结束事件来控制动画状态，避免使用定时器带来的同步难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做了个web端的语音播放效果，实现起来很简单，但中间因为参考文章问题，实现部分功能上也是费了很大力气

效果如下：

先说需求：

1. 点击播放，显示动画

2. 暂停播放，停止动画

3. 切换播放，停止上一个动画，显示当前动画

4. 播放结束，停止动画

1、2、3 实现都很简单

实现4时，参考了网上的文章【点击打开链接】，用了定时器，不好实现、效率低、bug也多

用定时器的bug：

暂停播放时，应不应该clearTimeOut() ? 清除定时器的话，再次点击播放时，setTimeout的时间是多少？不好获取吧，时间设置不对会导致，音乐与动画播放不同步

最终实现：

参考了w3c上audio的事件属性，轻松实现

控制播放暂停：

var curPlayId = null; // 当前播放语音标识
function addAudioEvent() {
  $('.yuyin').click(function () {
  	var $this = $(this); 
    var $audio = $this.children("audio")[0];
  	if (curPlayId == null) {
      $audio.play();
  	  curPlayId = $this.attr('id');
  	} else {
  	  if ($this.attr('id') == curPlayId) { // 点击当前播放中的语音，暂停播放
        $audio.pause();
        curPlayId = null;
  	  }	else {
  	  	// 先暂停当前播放语音 
        $('#' + curPlayId).children("audio")[0].pause();
  	  	// 播放点击语音
        $audio.play();
  	  	curPlayId = $this.attr('id');
  	  } 	
  	} 	
  });
}

audio事件监听--改变动画：

$('audio').bind('play', function() {
    $(this).next().css('animation-play-state', 'running');
  });
  $('audio').bind('ended', function() {
    $(this).next().css('animation-play-state', 'paused');
  });
  $('audio').bind('pause', function() {
    $(this).next().css('animation-play-state', 'paused');
  });

页面元素：

<div id="" class="yuyin fl" style="width:<$= msg.fileParam $>px" audioSize="<$= msg.fileParam $>">
      <span class="yuyin_txt yy_txt_l"><$= msg.fileParam $>''</span>
      <audio preload="auto" hidden="true">
            <source src="<$= msg.filePath $>" type="audio/mpeg">
      </audio>
      <span class="yuyin_img yuyin_img_r"></span>
 </div>

样式：

.yuyin{
    margin: .1rem 0;
    color: #999999;
    height: 34px;
    max-width: 200px;
    min-width: 80px;
    background-color: #e8f8e6;
    border: 1px solid #e0e0e0;
    border-radius: 6px; 
    position: relative;
  }

  /* 右侧样式 */
  .yuyin_img{
    position: absolute;
    width: 30px;
    height: 34px;
    background: url(//static.xxt.cn/nb/zx/message/img/yuyin.png);
    background-size: 115px 34px;
    background-repeat: no-repeat;
    background-position: -3px;
    animation: bofang 1s steps(1) infinite;
    -moz-animation: bofang 1s steps(1) infinite; 
    -webkit-animation: bofang 1s steps(1) infinite; 
    -o-animation: bofang 1s steps(1) infinite;
    animation-play-state: paused;
  }

  .yuyin_img_l{
    left: 5px;
  }
  .yuyin_img_r{
    right: 5px;
    transform: rotate(180deg);
  }
  .yuyin_txt{
    position: absolute;
    color: lightgray;
    line-height: 34px;
  }
  .yy_txt_r{
    left: 5px;
  }
  .yy_txt_l{
    right: 5px;
  }
  @keyframes bofang
  {
    25%  {background-position: -33px;}
    50%  {background-position: -59px;}
    75%  {background-position: -84px;} 
    100% {background-position: 0px;}
  }

【语音图标的图片是合并过的图片】