Cannot read property 'nodeType' of null; audio元素默认样式下载按钮

1.chrome-->console抛出以下错误：

Uncaught TypeError: Cannot read property 'nodeType' of null

错误缘由：从stackoverflow上查了，这个bug多是因为dom元素未加载完而先执行了jquery代码引发的。

错误分析：我这个实例为：点击某个表单标签时（如checkbox），widget从新进行了render()操做（将dom元素remove并从新绘制）,而formit插件给form表单默认增长的监听事件还做用在已经被移除dom的元素上，因此执行formit事件的时候，target元素为null，报错抛出。出错的代码是jquery里追踪事件的捕获与冒泡的一段代码。参数为null时则报此错误。

解决的方法是：查走代码，去掉不合理的重绘，或将重绘过程放到listener都执行完成后进行。

2.chrome的audio元素默认样式修改

chrome的audio元素默认样式不是很美观，大多数时候下载按钮显得不少余。若是须要修改播放样式有以下两个解决方案：

1）隐藏默认的audio，本身重绘一个audio播放器，并用js与默认播放器关联控制。这样播放器样式彻底自定义，能够知足任何对于美观的要求。

2）对默认audio的样式进行一些修改，让它达到需求。这样播放器的外观仍是很局限，若是对样式要求不高能够这么作。

咱们这里主要讨论第二种，首先设置属性：controls="controls"，显示audio播放控件，显示出来之后，在这里我主要说两点：

1）如何隐藏下载按钮

在stackoverflow上查后，能够设置audio的属性

controlsList="nodownload"

2）如何隐藏音量按钮or播放进度条。

通过调试发现，能够经过设置audio标签的width，浏览器会自动进行audio的自适应。

在设置width为300的时候，显示效果：

在设置width为200的时候，显示效果：

在设置width为100的时候，显示效果：

在此基础上咱们能够进行必定的掩盖与缩放实现咱们想要的效果。举个例子：咱们要播放进度条而不显示音量按钮，那么咱们就能够采用audio的width为300，并将audio标签放到一个ovflow:hidden;width:210px;的外层div中。