自定义audio标签在chrome浏览器下面第二次播放时设置currentTIme一直为0

最近在写项目的时候需要开发一个自定义的audio组件,因为原生的audio组件不符合产品的要求。

简单的play()和pause()是没有问题的,但是需要点击进度条播放时就遇到了一些问题,现在记录一下。

提前说明一下,火狐的audio组件和chrome的audio存在不同的,这篇文章并没有解决任何问题.

下面这个函数时绑定在播放掉的onMouseDown这个事件下面的

function handleClick(e: any) {
　　//279是css样式设置的宽度
　　const rate = e.nativeEvent.offsetX / 279;
　　/**在第一次播放完成之后,继续赋值点击赋值,currentTime打印出来就一直是0了(chrome和edge下面存在) 
　　 *但是在火狐下面可以赋值时成功的
    */
　　audioRef.current.currentTime = Math.ceil(props.duration * rate);
　　console.log("当前录音时间:", audioRef.current?.currentTime);
　　setWidth(e.nativeEvent.offsetX);
　　setStartTime(transformTime(Math.ceil(props.duration * rate)));
}

然后网上看到重新赋值src可能会解决问题,发现还是没有解决

/**这个参数时绑定在录音audio的onEnded方法上面*/
function endAutioTime() {
    setStartTime(transformTime(Math.ceil(0)));
    audioRef.current?.pause();

　　　 audioRef.current.src = props.source;

　　　 console.log('src重新加载')

    setPlayStatus("暂停");
    setWidth(0);
    console.log("endddd");
  }
/**这个绑定在onLoadedMetadata*/
function loadedMetadata(){
　　console.log('src加载完成')

}

通过上面这个方法重新绑定src之后

在chrome下面src可以可以被重新加载两次,第三次loadeMetadata这个函数就不会执行,同时点击play的时候会报错,找不到src这个资源

在火狐下面src可以可以被重新加载一次,第二次loadeMetadata这个函数就不会执行,同时点击play的时候会报错,找不到src这个资源