12.24

coderInwind · coderInwind · commit 075372236ab2 · 2023-12-24T17:49:24.000+08:00
diff --git a/app/blog/[...slug]/page.tsx b/app/blog/[...slug]/page.tsx
@@ -108,8 +108,8 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
 
   // 查找标题
 
-  const titles = Array.from(JSON.stringify(post.body.raw).matchAll(/###.+?\\n/g)).map(item=>{
-    let temp = item[0].replace("### ","").replace("\\n","")
+  const titles = Array.from(JSON.stringify(post.body.raw).matchAll(/##.+?\\n/g)).map(item=>{
+    let temp = item[0].replace("## ","").replace("\\n","")
     return temp
   })
   
diff --git a/data/blog/Async、Awiteyuanli.mdx b/data/blog/Async、Awiteyuanli.mdx
@@ -1,6 +1,6 @@
 ---
   title: Async、Awite原理
-  date: 2023-03-10T12:50:11Z
+  date: 2022-03-10T12:50:11Z
   summary:
   tags: []
 ---
diff --git a/data/blog/JSerjinzhishujudichuli：qianxiBlob、ArrayBuffer、File、Buffer.mdx b/data/blog/JSerjinzhishujudichuli：qianxiBlob、ArrayBuffer、File、Buffer.mdx
@@ -5,10 +5,10 @@
   tags: ["JavaScript"]
 ---
   
-  ### 前言
+  ## 前言
 最近一直在对接媒体相关的需求，流媒体播放、语音输入之类的，踩了很多坑，总结下来是自己对于二进制数据的处理并不是很熟悉，今天抽空整理了一下相关二进制处理对象的使用和他们互相之间的转化。
 
-### Blob
+## Blob
 [blob](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob)全称是 _Binary Large Object_ 表示一个不可变，原始类型的类文件对象，它可以是图片、音频、视频等，它的数据可以按照文本或二进制的格式进行读取。
 
 blob()包含两个参数
@@ -26,19 +26,19 @@ const blob = new Blob([array],"text/html")
 当然也可以是其他的[MIME类型](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)：
 
 
-### Flie
+## Flie
 `File`继承了`Blob`的所有属性，可以看成一个特殊的`Blob`，且可以用在任意的 Blob 类型的 context 中。比如说， [FileReader](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader), [URL.createObjectURL()](https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL_static), [createImageBitmap()](https://developer.mozilla.org/en-US/docs/Web/API/createImageBitmap), 及 [XMLHttpRequest.send()](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest#send()) 都能处理 Blob 和 File。
 
 从常见的来看，我们通过`input`标签上传一个文件，得到的就是一个`File`
 
 
-### ArrayBuffer
+## ArrayBuffer
 `ArrayBuffer` 对象用来表示通用的、固定长度的原始二进制数据缓冲区。
 它是一个字节数组，通常在其他语言中称为“byte array”。你不能直接操作 ArrayBuffer 中的内容；而是要通过[类型化数组对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)或 [DataView](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DataView) 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。
 
 [ArrayBuffer()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer) 构造函数创建一个以字节为单位的给定长度的新 ArrayBuffer。你也可以从现有的数据（例如，从 [Base64](https://developer.mozilla.org/zh-CN/docs/Glossary/Base64) 字符串或者[从本地文件](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsArrayBuffer)）获取数组缓冲区。
 
-#### 使用DataView操作
+### 使用DataView操作
 ```
  // 新建一个buffer
   const buffer = new ArrayBuffer(16)
@@ -52,7 +52,7 @@ const blob = new Blob([array],"text/html")
 ![image](https://github.com/coderInwind/inwindBlog/assets/91716457/62838808-ed53-4f3d-97fd-154e8d89f210)
 这就是基本的使用，我们可以设置8-bit、16-bit、32-bit、64-bit的写入和读取，设置写入的偏移量，需要注意的是64-bit数据的类型得是大数（bigint）。
 
-#### 使用TypedArray操作
+### 使用TypedArray操作
 它会有数个类提供给我们操作数据：
 ```
 const buffer = new ArrayBuffer(16)
diff --git a/data/blog/liulanqidiaoyongmaikefengquanxianshixianyuyinshurugongneng.mdx b/data/blog/liulanqidiaoyongmaikefengquanxianshixianyuyinshurugongneng.mdx
@@ -5,11 +5,11 @@
   tags: ["WebAPI"]
 ---
   
-  ### 前言
+  ## 前言
 今天收到一个需求：在一个聊天室场景中，除了用户除了打字输入，还要求能语音输入，实现这个需求我使用到了浏览器的相关的API、阿里云的语音转换API。
 ![image](https://github.com/coderInwind/inwindBlog/assets/91716457/a1fccca7-bbdb-4656-903a-0e876312e8ee)
 
-### 采集音频
+## 采集音频
 首先我们得采集到用户说的话，实现这个得使用到两个浏览器的API，第一个是<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia" target="_blank">MediaDevices.getUserMedia()</a> `MediaDevices.getUserMedia()`会提示用户给予使用媒体输入的许可，媒体输入会产生一个[MediaStream](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStream)，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D 转换器等等），也可能是其他轨道类型。
 
 通俗的来讲，就是可以拉取获取用户媒体权限的弹框，在用户通用后获取一个流。值得注意的是：在实现的过程中这个弹框的触发在各个浏览器中是不同的，在苹果的safari浏览器中获取权限框被用户拒绝后依旧能再次触发，但在某些安卓浏览器中权限框被拒绝后就会维持拒绝状态不会被触发；第二，获取权限和用户语音输入的时机最好错开，作者要实现的交互是按住进行语音输入，松开发送，但某些安卓浏览器在触发获取权限弹窗时会将`touchend`事件的图层覆盖掉，使之不能触发。需要注意的是这个API想要使用有诸多限制，首先只能在https协议下使用，其次使用的设备要有相关的媒体硬件，最后就是需要授权了。                         
@@ -51,7 +51,7 @@ speechState.recordInstance.onstop = () => {
 ```
 
 
-### 转化音频
+## 转化音频
 这一步我们选用了阿里云的语音转化接口，但作者在写的时候没有弄清楚阿里云接口所接收的格式，所以卡了很久：
 ```
 // 上传语音
@@ -88,11 +88,11 @@ wav是一种无损的音频文件格式，WAV符合 PIFF(Resource Interchange Fi
 
 简单的来说，PCM 就是比 WAV 少一个文件头，因此你可以将他们互相转化。
 
-### 发送音频
+## 发送音频
 其实到这里我们的功能差不多已经实现，接下来就是通过`WebSocket`发送，我就不多赘述了。
 
 
-### 总结
+## 总结
 这个需求完成的过程中的三个重点分别是：不同浏览器获取权限的适配、语音流的获取处理、不同语音格式的区分和转化。
 
 
diff --git a/data/blog/weixinxiaochengxudiwebViewfangan.mdx b/data/blog/weixinxiaochengxudiwebViewfangan.mdx
@@ -8,10 +8,10 @@
   <div type='discussions-op-text'>
 
 <sup>Originally posted by **coderInwind** October  5, 2023</sup>
-### 前言
+## 前言
 项目一直针对是`H5`&`微信公众号`平台开发，可是突然下来了个需求说要在小程序平台上线，我真的栓Q。技术栈使用的是Vue3，因为当时并没有计划做跨平台，所以没有选择uni-app、tora之类的跨平台框架，那么目前最便捷的方案就是小程序内嵌H5了，也就是使用小程序的`webView`。
 
-### 什么是webView?
+## 什么是webView?
 我把他理解成微信小程序平台中类似`iframe`标签的组件。他们都有相同的功能，那就是他们都可以通过网页地址将其嵌入到当前网页/小程序。
 
 但不同的是：
@@ -20,7 +20,7 @@
 ps. `webView`限制只对企业类型小程序开放，个人小程序无法使用。
 
 
-### webView的应用
+## webView的应用
 这个使用起来相当的简单，你只需要新建一个小程序，在后台完成相关的配置，然后使用webView链上网页地址：
 ```
 <view class="container">
