IM_自定义audio播放消息

做即时通讯，除了文字、图片、表情、还有媒体消息，整理一下制作过程中自定义聊天框中的audio

效果图

tsx完整代码

AzEventBus 是解决点击多个语音播放时候，保证只有一个在播放;没什么特别的，就是自己简单封装了个EvenBusAzEventBus

import {
   useRef, useEffect, useState, memo} from 'react';
import IconfontSvg from '@/views/Components/IconfontSvg';
interface PropsType {
   
	// 播放地址
    url: string,
    // 允许父组件把class传入进来
    className?: string,
    // 宽度
    width?: number,
    // 高度
    height?: number,
   	// 是否是自己发送的消息,就像微信/钉钉;右侧是自己发消息左侧是别人发布消息；
    isSelfSend: boolean,
    // 消息唯一id, 用来比对当前全局在播放的是不是自己，不是自己就暂停自己
    mid: string
}
import AzEventBus from '@/views/Utils/EventBus';

import style from './lazyAudio.module.less';
// preload="metadata" 
// 辅助函数：格式化时间为'MM:SS'或'HH:MM:SS'  
const formatTime = (time: number) => {
     
    const hours = Math.floor(time / 3600);  
    const minutes = Math.floor((time % 3600) / 60);  
    const seconds = Math.floor(time % 60);  
    // if (hours > 0) {  
    //   return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;  
    // } else {  
    //   return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;  
    // }  
    if (hours > 0) {
   
        return `${
     String(hours)}时${
     String(minutes)}分${
     String(seconds)}秒`;
    } else {
   
        // return minutes > 0 ? `${String(minutes)}分${String(seconds)}秒` : `${String(time.toFixed(2))}秒`;
        if (minutes > 0) {
   
            return `${
     String(minutes)}分${
     String(seconds)}秒`;
        }
        // 如果是整数秒时
        if (Number.isInteger(time)) {
   
            return time;
        }