一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: All - Page 2 | Spark1e的个人博客

![usb版本跳线](/img/uploads/usb版本跳线.png)

如图，使用的是Banana版本，可以免费试用（定期会出现Donate弹窗，可以忽略），对于单一的USB麦克风，使用这个软件能够实现大部分的功能。

### 设置输入输出

左边HARDWARE INPUT是可选的输入硬件，输入硬件一般是独立的麦克风，或者耳机的麦克风，这里因为是USB设备，没有单独的ASIO驱动，所以在列表里要选择WDM或者MME，一般而言，WDM的延迟会更低一些。

右边HARDWARE OUTPUT是可选的输出，这里会控制你的所有音频监听设备，因此请注意建议先把下面 MASTER SECTION里能Mute的都先Mute掉，否则可能瞬间出现非常大的声音。

设置输出时，比如我现在有音响，耳机，两个设备，我可以设置A1为耳机输出，A2为音响输出，这时候如果我把A1的输出Mute解开，音频就会从耳机播放。同理对于音响的A2也是一样。

> 一般使用单麦克风的时候，无法录制立体声，这时候我们勾选这一路输入的mono，即可模拟出立体声（左右声道）的效果。

### 设置系统声音输出

为了让VoiceMeeter能够同时获得系统播放的声音（比如伴奏），需要将系统声音也指向VoiceMeeter。软件安装好之后会在系统声音设备里出现两个新的输入和输出——VAIO和AUX，这里暂时先不区别这两种的区别（Banana版，Potato版本会提供更多的），只把他们当作两个虚拟的设备。

我希望把系统声音指向到VoiceMeeter的VAIO，那么我需要在系统里将声音的默认播放设备改为VoiceMeeter Input (VAIO)，如图，设备左下角有个对勾表示设置默认成功：

![qq截图20230729211403](/img/uploads/qq截图20230729211403.png)

同理，如果你的YY没有遵循系统的默认设置，你可以手工在列表里选成如图所示：

![qq截图20230729211921](/img/uploads/qq截图20230729211921.png)

但是这个时候，通过耳机（A1）通道还是听不到系统声音，这是因为系统声音被指向了中间VIRTUAL INPUTS的左边VAIO中，如果你现在网页播放声音，能够看到中间出现电平变化，那么意味着VoiceMeeter收到了系统声音。

但是为什么耳机还不能听到呢，因为我们还没用引导VoiceMeeter收到的声音到系统。点亮VAIO的A1（耳机）输出，这个时候声音就来到了耳机。

### 规划跳线

跳线，就是通过配置线路，将合适的单路、多路声音汇总到一起，既可以汇总多个声音到输入，也可以汇总多个到输出，在使用USB麦克风的时候，我的规划是这样的：

![跳线step2-混合声音信号](/img/uploads/跳线step2-混合声音信号.jpg)

> 如果觉得延迟比较高，可以将系统声音直接输出到A1里，来获得更低的延迟。

> 本文还没有涉及接入机架的部分，可能会另起一篇文章来更新。

### 内录功能

右上角是VoiceMeeter的内录，即输入到VoiceMeeter的声音都可以被录入。录入后的回放，可以勾选右侧来选择输出到哪个设备。

之前用小雪球（Blue Snowball ICE）

VoiceMeeter用于麦克风跳线的简单记录

### JavaScript - Array

IE全系列不兼容`Array.prototype.find`，部分可能的旧版本也可能确实Array下的其他方法，提供一些polyfill供参考。

```javascript
// Polyfill for Array.prototype
(function () {
    if (!Array.prototype.find) {
        console.log("Polyfill 'array.find'");
        Array.prototype.find = function(callback) {
            if (this === null) {
              throw new TypeError('Array.prototype.find called on null or undefined');
            } else if (typeof callback !== 'function') {
              throw new TypeError('callback must be a function');
            }
            var list = Object(this);
            // Makes sures is always has an positive integer as length.
            var length = list.length >>> 0;
            var thisArg = arguments[1];
            for (var i = 0; i < length; i++) {
              var element = list[i];
              if ( callback.call(thisArg, element, i, list) ) {
                return element;
              }
            }
          };
    }
    if (!Array.prototype.filter) {
        console.log("Polyfill 'array.filter'");
        Array.prototype.filter = function (callbackFn) {
            var arr = [];
            for (var i = 0; i < this.length; i++) {
                if (callbackFn.call(this, this[i], i, this)) {
                    arr.push(this[i]);
                }
            }
            return arr;
        }
    }
    if (!Array.prototype.map) {
        console.log("Polyfill 'array.map'");
        Array.prototype.map = function (callbackFn) {
            var arr = [];
            for (var i = 0; i < this.length; i++) {
                /* call the callback function for every value of this array and push the returned value into our resulting array */
                arr.push(callbackFn(this[i], i, this));
            }
            return arr;
        }
    }
}())
```

> 如果你的环境允许，可以使用[polyfill.io](https://polyfill.io/v3/) 的工具来生成一个根据不同浏览器自动加载的polyfill包，但是请小心[供应链攻击](https://www.cloudflare.com/zh-cn/learning/security/what-is-a-supply-chain-attack/)

### CSS - Flex bug

#### using flex

flexbox 需要IE10+

#### `justify-content: center;`

需要在出现问题的容器上加上：

```css
flex-direction: column;
```

尽管无论是哪个轴，双center原则上应该是整个容器中心，但是IE下必须声明。

#### background image using data uri (SVG)

部分SVG特性不支持，保险起见，用URL链接吧。

> 不过base64的png url还可以。

2023年了，您还在兼容IE呢？

“被迫”兼容IE11遇到的一些问题和解决方案

不多说，直接先上代码，

```javascript
function copy2Clipboard(content) {
if (window.navigator && window.navigator.clipboard) {
  navigator.clipboard.writeText(content).then(() => {
    console.log('success')
  }, () => {
    console.log('failed')
    console.log(arguments)
  }).catch(e => {
    console.log(e)
  })
} else {
  var i = document.createElement("input")
  i.setAttribute("style", "position:absolute;z-index:-1;width:1px;height:1px;top:-1px;opacity:0;-webkit-user-select: text;")
  document.body.appendChild(i)
  i.value = content
  var t = i.contentEditable,
    n = i.readOnly,
    o = document.createRange();
  i.contentEditable = !0
  i.readOnly = !1
  o.selectNodeContents(i);
  var a = window.getSelection();
  a.removeAllRanges()
  a.addRange(o)
  i.setSelectionRange(0, 999999)
  i.contentEditable = t
  i.readOnly = n
  window.document.execCommand("Copy")
  i.blur()
  document.body.removeChild(i)
  i = null
}
}
```

### 坑

1. 部分浏览器对navigator.clipboard支持很差，建议用else的代码；
2. __Safari如果要访问剪贴板，需要在可信的HTTPS环境下执行，自签的证书是无法调用`execCommand`/`avigator.clipboard.writeText`的__


##### 附录：一个之前写的有注释的版本

```javascript
function copyToClipboard(text) {
    if (text === "") return;
    var ipt = document.createElement('input'); // maybe you need to change `input` to `textarea`
    ipt.setAttribute(
        'style',
        'position:absolute;z-index:-1;width:1px;height:1px;top:-1px;opacity:0;-webkit-user-select: text;'
    )
    document.body.appendChild(ipt)
    ipt.value = text
    // ipt.select()
    if (/iphone|ipad|ios/.test(navigator.userAgent.toLowerCase())) {
        var oldContentEditable = ipt.contentEditable
        var oldReadOnly = ipt.readOnly
        var range = document.createRange()

        ipt.contentEditable = true
        ipt.readOnly = false
        range.selectNodeContents(ipt)

        var s = window.getSelection()
        s.removeAllRanges()
        s.addRange(range)

        ipt.setSelectionRange(0, 999999) // A big number, to cover anything that could be inside the element.

        ipt.contentEditable = oldContentEditable
        ipt.readOnly = oldReadOnly
    } else {
        ipt.select()
    }
    window.document.execCommand('Copy')
    ipt.blur()
    document.body.removeChild(ipt)
    ipt = null
}
```

有些浏览器对新API的兼容实在是太差啦！

JS复制到剪贴板之意料之外的坑



### 参考文章

1. 官方Docker配置：[link](https://grafana.com/docs/grafana/latest/setup-grafana/configure-docker/)
2. Grafana配置SMTP：[link](https://rorschachchan.github.io/2018/06/06/Grafana%E9%85%8D%E7%BD%AEsmtp%E9%82%AE%E4%BB%B6/)
3. 将loki的log数据条数转换为Timeline的图表：[Example (you can copy its json)](https://play.grafana.org/d/f03dfa36-f578-4f4e-ac5e-2bce58476674/log-volume?orgId=1&from=1683531030209&to=1683534630209)
4. 通过图表创建告警规则

适合个人建站的简单日志收集系统Loki

### 扩展欧几里得算法

```
ed ≡ 1 (mod φ(n))
```

RSA算法计算公钥私钥相关的一些知识点

### 0. 初始化一个node项目

在希望的文件夹下`npm init`，填写必要的信息。

### 1. 安装所需要的依赖

```bash
npm i express -S
npm i @types/express @types/node typescript -D
# 如果你需要热重载的话，再加上
# npm i nodemon ts-node -D
```

### 2. 修改`tsconfig.json`

```json
{
	"rootDir": "./src",
	"outDir": "./dist"
}
```

### 3. 配置nodemon（无需热重载跳过此节）

在根目录新建`nodemon.json`

```json
{
    "ignore": [
        "**/*.test.ts",
        "**/*.spec.ts",
        "node_modules"
    ],
    "watch": [
        "src"
    ],
    "exec": "npm run preview",
    "ext": "ts"
}
```

> watch、exec字段均与接下来的配置有关，watch的是tsconfig中的rootDir，exec是接下来配置的"npm script"

### 4. 配置npm script

打开package.json， 修改script内的项目：

```json
"scripts": {
    "dev": "nodemon",
    "preview": "ts-node ./src/app.ts",
    "prestart": "npx tsc",
    "start": "node ./dist/app.js"
}
```

> 如果不需要热重载，可以不配置dev和preview命令。

### 5. 初始化一个简单的app.ts

在src下新建一个app.ts作为入口，内容举例如下：

```js
import express, { Application, Request, Response } from 'express';

const app: Application = express();

const PORT: number = 3001;

app.use('/', (req: Request, res: Response): void => {
    res.send('Hello my customer!');
});

app.listen(PORT, (): void => {
    console.log('SERVER IS UP ON PORT:', PORT);
});
```

### 6. 结束

项目内执行`npm run dev`即带有热重载，如果发布，执行`npm start`即可。

最小化新建一个Express.js + Typescript的后端项目

请点击右侧的链接进行尝试，注意不要真的发送哦，

- [iOS Click Me](sms:1069070087457&body=这只是一条测试信息，请不要发送哦)
- [Android Click Me](sms:1069070087457?body=这只是一条测试信息，请不要发送哦)

### 原理

`sms:<send-sms-to>(&/?)body=<sms-body>`

从QQ邮箱学来的还算实用的小技巧

如何利用URL实现呼起短信应用发短信

### Loading

- https://codepen.io/nikhil8krishnan/pen/rVoXJa
- https://samherbert.net/svg-loaders/

收集一些还不错的SVG资源

### 如何正确适配？

> Reference: [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#middleware-mode)

即，如果插件希望在`configServer`中增加中间件，需要通过`viteDevServer`下的`transfromIndexHtml`对html进行转换操作，具体可以参考我的插件的[此commit](https://github.com/iamspark1e/vite-plugin-auto-mpa-html/commit/54b4691eff66864631339cab1152b75b3cb86a9d)

### 对于没有适配中间件模式的插件

在我的插件v0.0.9版本及以前时，如果在React项目中（即，使用了`@vitejs/plugin-react`)，不影响正常打包，但是在dev模式，无法热重载。

对于之前的版本，可以通过关闭fastRefresh特性临时解决，即：

```javascript
export default defineConfig({
  plugins: [react({
    fastRefresh: false
  }), autoMpaHtmlPlugin({
    configName: "config.json",
    entryName: "main.jsx",
    sharedData: {},
    sourceDir: "src",
    enableDirectoryPage: true,
  })],
})
```

原：vite打包react报错can't detect preamble

Vite插件开发适配中间件模式(middleware mode)

外用：辅舒良

口服：氯雷他定系列（应急）

辅助：生理盐水，需要用鼻喷剂那种，普通的铁瓶无法清理鼻腔内的

病因：

* 过敏原：花粉、尘螨，等等，花粉可以佩戴口罩减轻，尘螨的话，在尝试使用青花椒喷雾
* 天气变化：例如冷空气，这个比较难办
* __轻微感冒__ ：我也是第一次发现，可能轻度感冒本身不严重，但是会触发鼻炎，这个时候足量的感冒药很重要，不能只顾着脱敏。

Spark1e

Category: all