AI生成摘要 这篇文章介绍了如何使用JavaScript读取本地上传的MP3音频文件的封面图和时长。封面图可以通过引用jsmediatags项目来获取，然后将其转换为Base64地址或Blob URL地址。音频文件的时长可以通过FileReader对象读取本地文件并触发加载来获取。最后，文章提供了一个演示页面来展示这些功能。

AI生成摘要 本文讨论了在使用nc探测本地服务时出现的奇怪现象，以及与IPv4和IPv6地址相关的问题。作者发现在升级Node.js时，无法连接到后端服务。经过思考，作者发现服务只监听了IPv4地址，而localhost通常同时解析为IPv6和IPv4地址。大多数应用程序在双栈情况下会优先尝试IPv6，如果失败则回落到IPv4。文章还介绍了127.0.0.1和::1的区别，以及0.0.0.0和::的含义。此外，作者还讨论了net.ipv6.bindv6only参数的作用以及MySQL在使用localhost时的特殊情况。最后，作者提到了Node.js在17版本之后出现的快乐眼球算法的问题。

AI生成摘要 Node.js Addon是为JavaScript环境提供C/C++交互能力的机制。它类似于Java的JNI，通过提供C/C++ SDK，在C/C++中创建函数方法和进行数据转换，以便其他语言调用。本文介绍了Node.js Addon的类型、基本原理和模块编写指南。同时还介绍了在Windows和MacOS下的构建配置和开发、分发、使用的一些实用技巧。

AI生成摘要 本教程介绍了如何使用Node.js将记录插入MySQL数据库。首先，了解了插入记录的SQL查询语法，然后介绍了使用Node.js插入单个记录和多个记录的语法和实现步骤。通过执行SQL查询，可以直接将记录插入表中。使用MySQL连接对象的query()方法可以执行SQL查询。对于插入单个记录，可以将查询作为参数传递给query()方法，并使用回调函数检查错误和打印插入的记录数。对于插入多个记录，需要将行的记录分别放入数组中，然后将数组作为第二个参数传递给query()方法。最后，提供了一个示例来演示如何使用Node.js将记录插入MySQL表中。

AI生成摘要 这篇文章介绍了如何使用pixi.js实现特效和滤镜效果。其中，frag文件是片段着色器，通过改变颜色实现特殊效果。frag文件中的uniform变量控制着色效果的动态变化。文章还介绍了如何加载和使用frag文件，并提供了一个抖动效果的示例。此外，文章还讨论了使用MP4视频和滤色混合模式实现氛围特效的方法。最后，文章提到了视频滤镜和颜色映射滤镜的应用。

AI生成摘要 这篇文章介绍了使用WebCodecs API对MP4视频进行解码的方法。作者使用了MP4Box.js工具来分析MP4文件并获取视频轨道数据，然后使用WebCodecs API中的VideoDecoder方法进行解码。最终解码出来的视频帧可以用于各种用途，例如作为特效图片显示。文章提供了详细的实现代码和演示页面。作者鼓励读者通过学习和积累技术来提高自己的竞争力。

AI生成摘要 本文提供了一些优化前端性能的提示，包括压缩图片、实施懒加载、使用缓存和CDN等。同时，还介绍了如何避免不必要的重新渲染、优化数据存储、注重用户体验和关注内存使用情况等。具体实现方面，使用了NGINX内容缓存和IndexedDB优化大图片和内容的处理，同时使用了Sharp库压缩大图片、将应用状态存储在IndexedDB中、对大数据使用IndexedDB、对需要同步访问的少量数据使用LocalStorage等技术。最后，还介绍了keep-unchanged-values库的集成，以进一步提高性能。

Stop Using kuromoji.js: @sglkc/kuromoji is a Better, More Modern Fork &ZeroWidthSpace TL;DR &ZeroWidthSpace kuromoji.js has been the top choice for Japanese morphological analysis in JavaScript. However, kuromoji.js lacks direct browser compatibility and Service Worker support. Meet @sglkc/kuromoji, a fork that resolves these limitations. Why Choose kuromoji.js &ZeroWidthSpace kuromoji.js is a Node.js version of kuromoji, the main purpose of which is to perform morphological analysis of Japanese, providing information on the segmentation and pronunciation of Japanese text. I developed Furigana Maker, a browser extension that adds ruby character annotations to any Japanese text on any page, and the core logic of this extension is morphological analysis of Japanese text, so I need such a library very much to do it for me. Considering the npm landscape, kuromoji.js remains the primary solution for Japanese morphological analysis in JavaScript. Most packages related to ""Japanese morphological"" indirectly rely on kuromoji.js, leaving minimal alternatives. Challenges with kuromoji.js &ZeroWidthSpace Tolerable Issues &ZeroWidthSpace Firstly kuromoji.js disrespects the kuromoji API in its porting, changing a large number of field names, and worst of all it goes so far as to change the word_position field, which starts at 0, to start at 1. This certainly greatly diminishes the happiness of programmers. Secondly kuromoji.js doesn't support promise, only callback function, which can make the code structure messy, this can be solved by manually writing code to encapsulate it as a promise, a solution will be provided at the end of the article. Unacceptable Limitations &ZeroWidthSpace By default, integrating kuromoji.js into the browser involves referencing a CDN or directly including build/kuromoji.js in the project. However, this method negates many advantages of build tools, disrupts project structures, and crucially restricts ESM usage, because build/kuromoji.js is not an ES module. Using a build tool to package a project dependent on kuromoji.js and running it in the browser leads to a cascade of errors: kuromoji.js uses zlib.js, which does not run in the browser. kuromoji.js uses path , which is part of the Node.js core module. Also kuromoji.js consumes a steady 130MB (not extensively tested) of memory once it is active, which is a huge overhead, whereas browser extensions can very easily take advantage of Service Worker by starting it only when it is needed, and killing the process when it is not needed, rather than just letting it reside in memory. But Service Worker only supports the Fetch API, and kuromoji.js uses XMLHttpRequest, which will bring another error in Service Worker. The Solution: @sglkc/kuromoji &ZeroWidthSpace Don't try to solve these problems with polyfill, I've wasted a lot of time with that, modifying the kuromoji.js source code is necessary to solve the issues. And with the last commit of the kuromoji.js project in 2018 and the author Takuya Asano's last activity on github in 2022, it's to be expected that we won't be able to get any help from him, including merge Pull Request. The only solution was to fork this repo and then commit, publish, and luckily when I was about to start solving it myself, I was pleasantly surprised at NPM to find someone who had done everything I needed not too long ago, namely @sglkc/kuromoji, a fork of kuromoji.js. The changes can be seen in the sglkc's commit log: Substituting zlib.js with fflate. Eliminating reliance on the path module. Transitioning from XMLHttpRequest to the Fetch API. This solves all the key issues, and now we can easily package it up with the build tool and run it in the browser and Service Worker without any errors, and @sglkc/kuromoji doesn't have any changes to the kuromoji.js API. Thanks to @sglkc for his excellent work! Further Reading &ZeroWidthSpace Using Promise &ZeroWidthSpace This just needs a simple wrapper, this code references kuromojin. index.tsgetTokenizer.ts typescriptimport { getTokenizer } from './getTokenizer' const tokenizer = await getTokenizer() const tokens = tokenizer.tokenize('私の言語の境界は') /* [ {"word_position": 1, "surface_form": "私", "pos": "名詞", "pronunciation": "ワタシ"}, {"word_position": 2, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 3, "surface_form": "言語", "pos": "名詞", "pronunciation": "ゲンゴ"}, {"word_position": 5, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 6, "surface_form": "境界", "pos": "名詞", "pronunciation": "キョーカイ"}, {"word_position": 8, "surface_form": "は", "pos": "助詞", "pronunciation": "ワ"} ] */import { getTokenizer } from './getTokenizer' const tokenizer = await getTokenizer() const tokens = tokenizer.tokenize('私の言語の境界は') /* [ {"word_position": 1, "surface_form": "私", "pos": "名詞", "pronunciation": "ワタシ"}, {"word_position": 2, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 3, "surface_form": "言語", "pos": "名詞", "pronunciation": "ゲンゴ"}, {"word_position": 5, "surface_form": "の", "pos": "助詞", "pronunciation": "ノ"}, {"word_position": 6, "surface_form": "境界", "pos": "名詞", "pronunciation": "キョーカイ"}, {"word_position": 8, "surface_form": "は", "pos": "助詞", "pronunciation": "ワ"} ] */ 123456789101112typescript// No need for `@ts-ignore`, contains index.d.ts by default. import kuromoji from '@sglkc/kuromoji' type Tokenizer = { tokenize: (text: string) => kuromoji.IpadicFeatures[] } class Deferred { promise: Promise<Tokenizer> resolve!: (value: Tokenizer) => void reject!: (reason: Error) => void constructor() { this.promise = new Promise<Tokenizer>((resolve, reject) => { this.resolve = resolve this.reject = reject }) } } const deferred = new Deferred() let isLoading = false export const getTokenizer = () => { if (isLoading) { return deferred.promise } isLoading = true const builder = kuromoji.builder({ dicPath: './assets/dicts' }) builder.build((err: undefined | Error, tokenizer: Tokenizer) => { if (err) { deferred.reject(err) } else { deferred.resolve(tokenizer) } }) return deferred.promise }// No need for `@ts-ignore`, contains index.d.ts by default. import kuromoji from '@sglkc/kuromoji' type Tokenizer = { tokenize: (text: string) => kuromoji.IpadicFeatures[] } class Deferred { promise: Promise<Tokenizer> resolve!: (value: Tokenizer) => void reject!: (reason: Error) => void constructor() { this.promise = new Promise<Tokenizer>((resolve, reject) => { this.resolve = resolve this.reject = reject }) } } const deferred = new Deferred() let isLoading = false export const getTokenizer = () => { if (isLoading) { return deferred.promise } isLoading = true const builder = kuromoji.builder({ dicPath: './assets/dicts' }) builder.build((err: undefined | Error, tokenizer: Tokenizer) => { if (err) { deferred.reject(err) } else { deferred.resolve(tokenizer) } }) return deferred.promise } 123456789101112131415161718192021222324252627282930313233343536373839 WanaKana &ZeroWidthSpace For processing Japanese text, there is a very nice library WanaKana that handles [romoji, hiragana, katakana] interconversions, as well as determining which of [kanji, romoji, hiragana, katakana] a Unicode character is. Note that this is not as simple as you might think, and I recommend using WanaKana directly to bypass the complexity behind this, and only use the regex if the results don't meet your needs. Getting kanji pronunciation &ZeroWidthSpace I accomplished something similar by extracting the kanji pronunciations from the Japanese text in the following form. typescript// It's not just kanji, such as "市ヶ谷" (イチガヤ), "我々" (ワレワレ). export type KanjiToken = { original: string reading: string start: number // Indexes start from 0 end: number }// It's not just kanji, such as "市ヶ谷" (イチガヤ), "我々" (ワレワレ). export type KanjiToken = { original: string reading: string start: number // Indexes start from 0 end: number } 1234567Since it takes less than 150 lines of code, there is no need to publish it to NPM and the full code can be read at Github.

AI生成摘要 @sglkc/kuromoji is a fork of kuromoji.js that resolves its limitations, including lack of direct browser compatibility and Service Worker support. The fork substitutes zlib.js with fflate, eliminates reliance on the path module, and transitions from XMLHttpRequest to the Fetch API. The author recommends using WanaKana for [romoji, hiragana, katakana] interconversions and determining which of [kanji, romoji, hiragana, katakana] a Unicode character is. The author also provides code for extracting kanji pronunciations from Japanese text.

AI生成摘要 本文认为Next.js过于复杂，Remix更注重标准API和稳定性，能提高软件可维护性和长期合作。Remix重写了Next.js的电商演示，用更少的代码带来更好的用户体验。作者认为Remix比Next.js更成功，但读者可自行判断。