js实现录音功能,页面title上的小红点如何去掉 您所在的位置:网站首页 手表屏幕上的小点如何去除 js实现录音功能,页面title上的小红点如何去掉

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

2024-06-26 15:57| 来源: 网络整理| 查看: 265

前言

在解决这个问题之前,如果你想了解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());

正确的做法

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



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有