js实现录音功能,页面title上的小红点如何去掉

前言

在解决这个问题之前,如果你想了解js如何实现录音功能,请看我的另一片博客:https://blog.csdn.net/yun_master/article/details/114550332?spm=1001.2014.3001.5501

title上的小红点是什么

当你获取了用户的录音权限之后,每次进入到这个录音页面,你都会发现这个小红点.当然这也不是太大的问题.不过当你遇到一个比较钻牛角尖的测试,或者是交互,抑或是pd.此时这个问题,就有可能成了你最头疼的问题.下面我们来解决一下这个问题

解决

解决这个问题,其实仅仅需要一行代码就可以,但是如果仅仅是去掉了这个红点,而不考虑后续的逻辑处理,你又会进入到另一个烦人的bug中.但是首先我们先讲一下如何去掉它

// 获取录音权限
window.navigator.mediaDevices.getUserMedia({ audio:true })
	.then(stream => {
		/* 
		* 关闭元数据与音轨的连接,就可以去掉这个烦人的红点,但是也就意味着,
		* 现在已经失去了录音的能力
		*/
		stream.getTracks().forEach(track => track.stop())
	})

上面的例子大家可以看到,当你用这个方式,解决了红点的问题,你会发现,你没有办法再进行录音了,这是因为你断开了音轨的连接.所以如果你想要重新获取录音功能,那么请不要获取权限后,马上执行stream.getTracks().forEach(track => track.stop());

正确的做法

下面说的不是代码,而是一个方案.你需要在结束录音的时候,才去执行断开连接的操作.并且当录音页面挂载的时候,和开始录音的时候,要重新去建立这个连接.也就是重新获取用户的权限.这样,你就可以保证,在你录音的过程中,才会出现这个录音的小红点.录音结束.小红点消失不见.