byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11124鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、以为很简单，结果…遇到需求，需要对音频倍速合成，可能是0.5倍速，也可能是2倍速。这还不简单，0.5倍速那就采样的时候两两重复，2倍速间隔取样就好了，相关代码如下所示（假设音频地址是url，播放速率变量是rate）：fetch(url) .then(response => response.arrayBuffer()) .then(arrayBuffer => new AudioContext().decodeAudioData(arrayBuffer)) .then(originAudioBuffer => { // 创建新的AudioBuffer const audioBuffer = new AudioContext().createBuffer( originAudioBuffer.numberOfChannels, originAudioBuffer.length / rate, originAudioBuffer. ...继续阅读 (61)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11116鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。MicroData微数据相关的知识适用于对SEO非常重视的产品，且主要针对谷歌、微软、雅虎等国外的搜索引擎，适用场景较为小众，因此，本文内容大致了解下即可。所谓微数据，就是在原有的HTML元素基础上，通过设置若干专门给机器识别的HTML属性，让搜索引擎可以更好地理解这一块的数据。在具体展开介绍之前，有必要先介绍https://schema.org/这个网站，准确说这是一个开源协作的社区组织，由谷歌、微软、雅虎和Yandex创建，致力于在互联网、网页、电子邮件等平台上创建、维护和推广结构化数据的模式。由于大厂的支持和社区的推动，schema.org网站所共享的词汇表已经成为某种实时标准，超过1000万个网站使用schema.org定义的微数据结构来开发网页、发送邮件等，大家如果有兴趣，也可以前往对应的Github项目（https://github.com/schemaorg/schemaorg）参与共享，目前已经发布了24个版本了。一、微数据常用词汇表既然是规范，那必然意味着不能随便使用。例如，微数据只能对特定的物体或事件进行描述，并不能随便自定义。至于哪些物体和事件可 ...继续阅读 (61)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11110鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、背景前言随着Safari TP版本已经支持CSS @scope规则，这个新特性在不久的将来在Web中大放异彩已是必然。那这样@scope规则是干什么用的呢？二、@scope的语法与作用使用过Sass或Less这种预编译语言的，这种写法应该不陌生。@scope的作用其实与之类似，可以实现CSS选择器的嵌套书写。例如，有如下所示的HTML和CSS代码：链接1链接2链接3我呢？@scope(nav) { ul { list-style: none; padding: 0;margin: 0; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; background: skyblue; } }渲染效果如下图所示，可以看到，只有在nav标签内的元素有了背景色等样式，而外面的还是默认的样式效果。优先级@scope规则内选择器的优先级是计算在内的，也就是下面这段CS ...继续阅读 (78)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11103鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、先看效果您可以狠狠地点击这里：JS每隔一秒提取视频缩略图demo例如，选择本地视频后：输入在线的视频文件地址后，注意，该地址要允许跨域，也可以看到缩略图出现了，前后也就几秒钟的时间，还是挺快的。二、如何实现？方法一，对视频帧进行完全解码，然后进行提取，相关实现可以参考“mp4box.js加WebCodecs 解码MP4视频帧并渲染”一文。不过此方法对资源占用较大，而缩略图仅仅是视频的部分帧信息，有些高射炮打蚊子，不划算。方法二，利用video元素进行绘制。具体描述为：希望绘制哪一帧视频，就让视频跳到这一帧的画面，然后使用canvas直接绘制该video元素。实现细节不过具体实现的时候还是有不少细节需要注意的。视频的src地址必须是本地地址，而不能是在线地址，否则可能会有绘制异常的问题，例如，你要绘制最后1秒的缩略图，在线视频往往当前画面资源是未加载的，你再去绘制，就会有很长的等待时间，画面就可能是黑色的。video.currentTime = xxx可以让视频定位到具体的时间，但是此过程并不是即时的，需要使用 timeupdate 事件进行监控，例如：video. ...继续阅读 (76)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11097鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、事务繁忙，长话短说目前主流的下拉列表，或者下拉面板的实现方式都是这样的。点击按钮，让下拉元素显示，绝对定位，同时设置层级，点击空白处，隐藏下拉列表。其中，每一步都需要JavaScript代码的参与，因此，一个下拉组件的JS代码量还是不容小觑的。现在，浏览器已经支持原生popover属性，上面这种下拉列表实现方式可以扫进垃圾箱了。我可以这么说，日后使用popover属性实现下拉效果一定是主流实现方案。因为有两个好处：代码极简；层级顶级；例如有如下所示的HTML代码：点击显示图片无需任何JS代码，点击按钮，就可以让图片显示，点击页面空白处，图片会自动隐藏，实时效果如下：点击显示图片这就是上面说到的代码极简。至于层级顶级。这是Web中专有的一个概念，称为top-layer，元素全屏，或者对话框使用showModal()方法显示的时候，都会表现为top-layer，如下图所示：顾名思意就是层级顶级，页面中任何元素都无法覆盖，哪怕z-index设置为999999。一个页面可以有多个层级顶级元素，至于哪个在最上面，采用的是后来居上的原则，也就是那个后显示，那个就在上面，这个非 ...继续阅读 (81)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11088鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、效果抢先体验纯JS就可以实现人脸识别功能，加载模型，执行识别。眼见为实，您可以狠狠地点击这里：JS判断人脸画面区域demo本demo提供了3处交互案例，分别是无人脸，有人脸和自定义上传。例如第一张图，显示无人脸：其实，是有个小小的人脸的，我一开始也没注意，因为图片尺寸比较小，哈哈哈，如果是大尺寸图片，估计是可以识别的。第二张是我的社交网站头像，点击“识别”按钮，可以看到脸上有个黄色的框框：演示页面还支持上传本地图片进行检测，例如我选择了之前介绍LUT滤镜应用文章使用的素材截图，结果显示两个人脸，并准确定位了：二、项目及用法示意我用的是这个项目：https://github.com/WebDevSimplified/Face-Detection-JavaScript仓库比较简单，一个JS文件，face-api.min.js，然后就是模型文件。别看仓库没有那些花里胡哨的各种安装包和JSON文件，识别的效果还老好了，使用也比较简单。首先，第一步，引用JS，直连即可：第二步，加载模型，指向models文件夹的路径，代码如下所示：// 加载人脸识别模型 Promise.al ...继续阅读 (83)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11084鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、图片近似度对比开门见山，不绕弯路。用的是这个Github项目：https://github.com/obartra/ssim之所以选这个，是我看这个项目提交次数比较多，文件版本也比较高。案例先行不管怎样，先看对比效果。您可以狠狠地点击这里：JS实现图片对比差异参数demo首先，选两个近似的图，例如选择我的CSS书籍的书封，点击对比，则会有下图所示的结果：相似度在0.51左右，这两个图结构类似，尺寸有些许差别，颜色也有些不同，文案也有所不同，50%左右的差异符合预期。然后，选择两个长得完全大相径庭的图片，例如使用我的帅照 😎:可以看到对比的结果接近于0，也就是差别巨大，完全没有可比性。最后，演示页面还支持选择本地图片进行相似度对比，大家可以选择本地的图片素材，看看结果如何。例如，我选择了如下图所示的两张图，得到了相似值挺高的对比结果：高达0.83，这是一个比较高的对比值了。使用总结根据我的使用感受，对比值小于0.4的，就可以认为有明显差异，数值越小，自然差异就越大了。二、使用说明官方示意的代码是npm包引入，如下：npm install ssim.jsimport ...继续阅读 (75)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11077鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、需求背景，故事由来上个月有介绍过如何提取视频的序列帧，然而真正的视频解码应该是不仅可以提取画面，还可以提出音频数据。也是使用mp4box.js加WebCodecs API吗？我有尝试过，但是解码出的音频数据都是0，不知道哪里出了问题，还需要进一步排查下。实际上，要解决此需求不需要这么麻烦，使用Web Audio API就能搞定。比方说此demo，您可以狠狠地点击这里：JS提取视频中的音频音轨并下载demo二、以选择本地文件举例假设本地选择的文件是file，则我们可以将file转为arraybuffer再使用decodeAudioData转为audioBuffer，有了audioBuffer就可以对音频为所欲为，分割，复制，拼接，合并都不在话下，自然也包括资源的提取。代码示意：// 开始识别 const reader = new FileReader(); reader.onload = function (event) { const arrBuffer = event.target.result; // 创建音频上下文 const aud ...继续阅读 (86)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11070鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、基本常识音频文件不仅仅有音频采样数据，还包含很多源信息，还是叫元信息的。这些元信息内容非常丰富，有作者名字、专辑信息、封面、编码格式、音轨信息等。然而，我们在Web中使用的音频文件大多是没有这些信息的，都被工具移除了，减小文件的体积，节约传输的流量。这些信息多在音乐网站下载的MP3音频中。OK，下面需求来了，网站有个本地上传MP3音频的功能，希望如果MP3音频有封面图等信息，也一并上传，没有，那就算了，请问如何实现？二、封面图和时长的获取音频的时长不属于元信息，因此，封面图的获取和时长的获取需要分开实现。1. 封面图的获取音乐的封面图内容属于元信息，因此，需要从元信息中读取。至于读取的方法，可以使用目前市面上比较成熟的JavaScript项目，例如：https://github.com/aadsm/jsmediatags使用很简单，引用JS文件，读取MP3音频，输出结果：jsmediatags.read("./music-file.mp3", { onSuccess: function(tag) { console.log(tag); }, o ...继续阅读 (82)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11060鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、关于LUT滤镜接上篇文章，讲讲各类视频剪辑APP中滤镜效果在Web中的实现。这种滤镜其实也分为两大类，一类是算法滤镜，例如高斯模糊，反相，色调变化，本质上是数学计算，例如pixijs/filters这个项目中的ColorMatrixFilter类效果就是通过矩阵变换计算实现的。这类滤镜的算法固定，使用简单，但是效果单一，不够丰富。还有一类就是本文要介绍的颜色映射滤镜，也叫LUT滤镜，LUT是Look Up Table的缩写，中文叫查找表，也叫颜色映射表，在pixijs/filters这个项目中使用ColorMapFilter方法实现，这类滤镜效果丰富，细节细腻，可以实现工业电影一般的视觉质感。LUT滤镜多以.cube或.3dl后缀结尾，有文本和图片两种形式，互相是可以转换的。文本格式的LUT滤镜文件内容如下：# Created by Adobe Photoshop CC 2019.0.1 TITLE "Adobe Photoshop CC 2019.0.1" LUT_3D_SIZE 33 0.000000 0.000000 0.000000 0.000000 0. ...继续阅读 (74)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11051鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、前言视频剪辑软件，无论是桌面端还是手机端，都已经被剪映称霸。其中，有个“特效”的标签页，里面有各式各样的效果，如下图所示：本文会以pixi.js为基础工具，介绍这里面的特效如何在Web网页中实现。这里面的特效分为了两种：一种是直接改变当前绘制的滤镜，主要是通过解析.frag后缀的文件后渲染实现，例如模糊，扭曲等效果。另外一种是混合滤镜，专门实现一些氛围特效效果，主要是通过解析MP4视频资源（本质是图片序列），然后使用滤色混合模式实现，例如下雨起雾，烟花绽放等效果。好，系好安全带，准备发车了。二、frag滤镜的解析与渲染frag文件其实上不能叫做滤镜，而是一个片段着色器，它的作用是改变当前绘制的颜色，从而实现一些特殊的效果。frag文件的格式如下：uniform sampler2D uSampler; // 采样器 varying vec2 vTextureCoord; // 纹理坐标 void main(void) { vec4 color = texture2D(uSampler, vTextureCoord); // 采样 gl_FragCol ...继续阅读 (80)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11043鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、已有的学习资源WebCodecs API解码GIF动图之前已经撰文介绍过了，访问“使用ImageDecoder API让GIF图片暂停播放”。然后使用Webcodecs API编码带音频的MP4文件在这篇文章中有介绍过了，演示页面可以狠狠地点击这里：canvas序列+MP3音频实现mp4视频demo并且基于上面的实现原理，我把之前开发的APNG在线生成工具稍微扩展了下，同时支持生成MP4文件并下载，有兴趣可以狠击这里体验：APNG/MP4在线合成下载工具OK，好，最近又遇到新需求，需要对MP4视频进行解码。关于MP4视频解码，之前有介绍过JSMpeg和Broadway两个项目，不过自己demo并没有跑通，就没有深究。这一回，由于有了webcodecs API，我确信一定可以解码，因此，就花半天时间研究了下，算是跑通了整个流程，可以说是市面上最简洁，依赖最少的实现代码了。二、先看需求和效果需要用到视频解码的需求很多，例如：纯JS前端实现视频的拼接或剪裁视频添加水印变成新视频视频格式的滤镜应用在webGL特效上视频转为canvas播放以规避Android下Video元 ...继续阅读 (72)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11038鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、Chrome的5层优先级在Chrome浏览器中，网络请求的优先级分成了5个等级：Highest 最高，如页面HTML资源和CSS文件；High 高，如正文图片请求资源；Medium 中等，如页面的业务JavaScript文件请求；Low 低，如内联的Base64资源，异步加载的JavaScript文件请求；Lowest 最低，如发送的统计请求；我们可以Chrome浏览器的开发者工具，在Network面板中可以看到每一个请求的优先级，如下图所示。如果你发现你的浏览器没有上图选中的列表，试试右键面板，然后访问下图所示的菜单项进行开启。二、预加载资源的优先级我们可以使用link rel="prefetch"和link rel="preload"对资源进行预加载，以提高页面性能，增强产品的用户体验。然而，这两种预加载的优先级是不一样的。prefetch加载的是接下来页面可能会使用的资源，因此优先级最低，为Lowest。preload加载的是本页即将要使用的资源，因此优先级要比prefetch高，但具体是多少，要看加载的资源的类型。这个类型是as属性决定的，下面是一些类型示 ...继续阅读 (67)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11022鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、温故而知新3年前有更新过JS对audio音频剪裁的实现，昨天更新了JS改变原始音频信息来实现音量的调整，今天我们再讲讲如何使用JS实现多个音频的拼接（下图1）与合并（下图2）。拼接：合并：这下子，纯JS操作MP3/WAV音频资源的活儿都齐全了。操作过程本质上大同小异。ArrayBuffer转AudioBuffer，然后读取音频信息，对采样信息进行处理。话不多说，来看看如何实现的。二、多个音频的拼接方法如下：// 拼接音频的方法 const concatAudio = (arrBufferList) => { // 获得 AudioBuffer const audioBufferList = arrBufferList; // 最大通道数 const maxChannelNumber = Math.max(...audioBufferList.map(audioBuffer => audioBuffer.numberOfChannels)); // 总长度 const totalLength = audioBuffer ...继续阅读 (70)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11026鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。如今的Web越来越强，几乎常见的音视频开发需求都能使用纯JS搞定了。一、这里需要个标题这里介绍一个不太常见的使用场景的技术实现。啥呢，就是音频的音量调整，并转换成新文件。如果仅仅是调整播放的音量，那很简单。如果你使用的是元素，直接改变volume属性就好了。audio.volume = 0.5;over~如果没有audio元素，而是使用的Web Audio API，希望在 AudioBuffer 层面设置播放的音量，则可以使用GainNodes实现。假设我们有个在线的MP3音频叫做“bgmusic.mp3”，则可以这么处理。// 定义一个AudioContext对象 // 因为 Web Audio API都是源自此对象 const audioContext = new AudioContext(); // 创建一个gainNode对象 // gainNode可以对音频输出进行一些控制 const gainNode = audioContext.createGain(); // 音量设置为20% gainNode.gain.value = 0.2; // 这个很有必要， ...继续阅读 (69)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11015鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、总要有原因的为什么会突然想到了解如何使用JS复制图片到剪切板呢？因为上周弄了个PNG/JP在线压缩的工具，一开始的时候，图片获取的途径只能是下载到本地。但很多时候，我是希望这种压缩好的图片可以直接上传，不需要再从本地转一圈。此时，如果有一个复制功能就好了。直接点击一个按钮，压缩好的图片复制到剪切板，然后再去上传页面进行上传，多方便，多轻松。所以，就去了解了下，还是学到了不少东西的。这里和大家分享下。首先，先从简单的开始。二、原生的图片复制API浏览器提供了一个名为 ClipboardItem 的实例对象，可以构造构造剪切板复制对象。例如一段文本的复制（代码取自MDN文档）：function setClipboard(text) { const type = "text/plain"; const blob = new Blob([text], { type }); const data = [new ClipboardItem({ [type]: blob })]; navigator.clipboard.write(data).then(() ...继续阅读 (67)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10971鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、开场总要有个标题上个月有好好研究PerformanceObserver这个性能监控相关的API。不过，玩了一圈下来，没有找到统计某个图片加载时长，或者某个元素渲染时间的入口，难道是自己错过了什么了吗？嘿，还真是错过了！有些出乎意料，明明是PerformanceObserver API明明是个JS API，里面的方法啥的，也都是JS驱动的，结果统计元素的渲染和加载时长却靠的是一个HTML属性——elementtiming。二、了解elementtiming属性elementtiming属性可以设置在任何有图文内容的元素上，包括background-image背景图，对了，还有视频元素。相对于告诉浏览器：“喂，浏览器酱，这几个人老子很感兴趣，你帮我看紧了，多多关注下！”此时，浏览器就会记住这些元素的加载时长，渲染时长等各种信息。配合PerformanceObserver API，我们就可以获得这些信息了。案例说明假设页面上有下面两个HTML元素。我是一段内容。此时，浏览器就会重点关注标志量为image和text的两个元素的元素时长相关信息。于是，通过执行下面的代码，我 ...继续阅读 (66)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11003鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、深入了解form的reset行为form元素自带一个reset方法，执行后，可以让当前表单元素控件的值还原为初始设置的值。这是一个非常有用的特性。例如，我们表单数据请求成功后，就可以执行此方法。form.reset()注意，reset行为不是让输入框的值变成空，而是变成匹配:default伪类的初始值。例如，有如下的表单元素：重置当我们修改输入框的值，再去点击“重置”按钮，输入框的值依然是"author:zhangxinxu"而非空字符串。如下GIF录屏所示。无法触发change行为reset虽然好用，但并不完美。在真实的表单应用场景中，我们会有很多行为是跟着输入框的值走的。例如，验证行为，一些参数的计算等。此时，我们往往会使用change事件（或input事件）来进行处理，举个例子，商品总额根据数量进行计算：单价：¥68数量：件总价：68元重置JS代码则是：const input = document.querySelector('[type="number"]'); const output = document.querySelector('output') ...继续阅读 (73)