前言

前段时间，项目中用到html5音频采集，主要是和微信录音一样，流程是按住说话，右侧滑动可以音频转文字，左侧滑动撤销。关于按住说话及左右侧滑动交互，相对简单，主要是运用了onTouchStart，onTouchMove，onTouchEnd三个事件完成。我之前文章也有过模仿微信语音播放效果动画，其中左右侧滑动位置主要是根据 e.targetTouches[0].pageX，和 e.targetTouches[0].pageY来完成的。本文着重讲解一下html5音频采集解决方案。

之所以叫解决方案，因为这里有涉及了音频采集的各种问题，例如音波，格式转换，录制格式，多段音频拼接，多个语音合成等等。语音采集我主要用了。

关于音频采集

音频采集可以利用navigator.mediaDevices.getUserMedia({ audio: true })，来自己手动采集。 判断有无权限及开启权限可以如下代码

前言

之前在 LESS、SASS 等预处理器中嵌套写法，现在原生css竟然支持了哈，从chrome112开始支持！下面尝鲜看看语法！

CSS 原生嵌套语法

div {
    & > p {
        color: red;
    }

    &:hover {
        color: yellow;
    }
}

其语法规则大致如下：

前言

今天将解决 transform导致文字 的模糊问题。 那么？什么时候会触发这种问题呢？在 Google 上，其实我们能搜到非常多类似的案例，总结而言：

一、当文本元素的某个祖先容器存在 transform: translate() 或者 transform: scale() 等 transform 操作时，容易出现这种问题

当然，这只是必要条件，不是充分条件。继续深入探究，会发现，必须还得同时满足一些其它条件：

二、元素作用了 transform: translate() 或者 transform: scale() 后的计算值产生了非整数

例如：

.container {
    position: absolute;
    width: 1104px; 
    height: 475px;
    top: 50%;
    transform: translateY(-50%);
    // ...
}

由于元素的高度为 475px，translateY(-50%) 等于 237.5px，非整数，才导致了内部的字体模糊。

但是，需要注意的是，并非所有产生的非整数都会导致了内部的字体模糊。

三、文本内容是否模糊还与屏幕有关，高清屏（dpr > 2）下不容易触发，更多发生在普通屏幕下（dpr = 1）

前言

之前讲解过psd文件上传，今天分享一下如何解析文字特效，字体大小，字体等等，顺便讲解如何解析路径。

Font-size字体大小

上一节关于矩阵,我已经写了psdjs关于字体解析的transform矩阵，因此，我们可以根据这个矩阵计算出ps里面字体的大小。

解析字体大小的流程：

第一步：取出sizes里面的最大值，psd解析sizes是一个数组，因为ps里面可以针对一个文本框文字设置不同的字体大小，假如你解析可以支持不同字体大小的解析，可以根据length和sizes，或者文本框里面每个文字的字体大小，假如不那么精准，可以获取其中最大的一个就可以了。

第二步：通过上一节里面的矩阵，或者字体的变化大小 Math.round(fsize * item.text.transform.yy)

第三步：纠正，假如解析的字体大于文本框高度，或者小于文本框的一半，那么字体大小应该还是有问题的，可以进一步纠正，可以在字体大于图层的高度的时候，设置字体高度为图层高度。