前端动态控制移动端聊天室语音气泡长度

最新推荐文章于 2022-12-02 09:00:00 发布

楚楚梦厦

最新推荐文章于 2022-12-02 09:00:00 发布

阅读量608

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript vue.js html5 css 前端

本文链接：https://blog.youkuaiyun.com/s18438610353/article/details/109595252

前端专栏收录该内容

30 篇文章

订阅专栏

针对公司PHP项目NODE化过程中遇到的语音气泡长度不合理问题，本文介绍了一种根据语音时长动态调整气泡长度的方法，确保了不同语音时长的气泡能够得到合适的展示。

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

公司PHP项目NODE化，改造http留言板类型的聊天室的时候发现所有的语音气泡不管多少秒，长度都是固定一样的，这显然是不合理的，于是参考了网上的语音气泡长度的计算方法，并给予rem单位达到适配效果。

<div class="audio-container" :style="'width:' + autoAudioBubblesLength(item.msgBody.second)">
	 <div class="doctor-audio" @click="playAudio(item.msgBody.url, index)">
	     <i :class="['radio-step', isInPlaying && index==curAudioIdx? playingClass:'icon-radio-step3']"></i>
	 </div>
     <span class="delay-second">[[item.msgBody.second]]</span>
</div>

语音气泡样式如下：

    .audio-container {
      width: 205px;
      height: 40px;
      position: relative;
      .doctor-audio {
        width: 100%;
        height: 100%;
        background: url("//i1.hdfimg.com/ssi/pdmwx/prd/image/audio.png") no-repeat center center;
        background-size: 100% 100%;

        .radio-step {
          position: absolute;
          left: 15px;
          top: 10px;
          width: 13px;
          height: 18px;
        }
        .icon-radio-step1 {
          background: url("//i1.hdfimg.com/ssi/pdmwx/prd/image/au1.png") no-repeat left center;
          -moz-background-size: 3.5px 5px;
          background-size: 3.5px 5px;
        }
        .icon-radio-step2 {
          background: url("//i1.hdfimg.com/ssi/pdmwx/prd/image/au2.png") no-repeat left center;
          -moz-background-size: 8px 11px;
          background-size: 8px 11px;
        }

        .icon-radio-step3 {
          background: url("//i1.hdfimg.com/ssi/pdmwx/prd/image/au3.png") no-repeat left center;
          -moz-background-size: 12.5px 17.5px;
          background-size: 12.5px 17.5px;
        }
      }
      .delay-second {
        position: absolute;
        right: -50px;
        top: 10px;
        width: 40px;
        font-size: 14px;
        color: #9D9D9D;
      }
    }

逻辑如下，随便写的，很垃圾：

	/** 动态控制语音气泡长度
	* @param duration {number}
	* 1. 1s、2s则长度相同
	* 2. 3s-10s则每秒增加8
	* 3. 11s-60s则每过10s增加 (maxLen-(minLen+64))/5
	*/
	autoAudioBubblesLength (duration) {
	   let bubblesLen = 0; // 最终返回的长度
	   const minLen = 80; // 设定最小长度
	   const maxLen = 220; // 设定最大长度
	   const firstLadder = 8; // 第一阶梯(3-10s)倍数
	   const LastLadder = (maxLen - (minLen + 8 * firstLadder)) / 5; // 最后阶梯倍数
	   if (duration <= 2) {
	       bubblesLen = minLen;
	   } else if (duration > 2 && duration <=10) {
	       bubblesLen = minLen + (duration - 2) * firstLadder
	   } else if (duration >=11 && duration <= 60) {
	       if (duration % 10 === 0) { // 如果整除10
	           bubblesLen = minLen + 65 + (duration-10) / 10 * LastLadder
	       } else {
	           bubblesLen = minLen + 65 + (duration - duration % 10 - 10) / 10 * LastLadder
	       }
	   } else {
	       bubblesLen = maxLen;
	   }
	   bubblesLen = bubblesLen > maxLen ? maxLen : bubblesLen;
	   return bubblesLen / 37.5 + 'rem';
	}