Web Development on 技术杂烩

轻松实现网页语音识别的 JavaScript 库：vad-web

Fri, 19 Jul 2024 22:58:13 +0800

让你的网页项目拥有语音识别功能！

你想在网页中添加语音识别功能，例如：实时显示用户说话的状态、发送用户语音片段到服务器进行处理，或者根据用户的讲话情况触发动画效果？今天就来介绍一个轻量级且易于使用的 JavaScript 库：vad-web，它能帮你实现这些功能！

vad-web 的优势

精准识别: vad-web 基于强大的 Silero VAD 模型，能够准确地识别用户语音。
简单易用: 仅需几行代码即可配置并使用，非常适合前端开发人员。
浏览器和 Node.js 支持: vad-web 可以运行在浏览器中，也可以在 Node.js 环境中使用。

如何快速上手？

将以下脚本标签添加到你的 HTML 页面中：

<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.14.0/dist/ort.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/@ricky0123/vad-web@0.0.7/dist/bundle.min.js"></script>

编写 JavaScript 代码来实例化 vad-web 和配置语音识别事件：

async function main() {
    const myvad = await vad.MicVAD.new({
        onSpeechStart: () => {
            console.log("开始说话！") // 当用户开始说话时触发 
        },
        onSpeechEnd: (audio) => {
            // audio 包含用户的语音片段，可以进行处理或上传到服务器
        }
    })

    myvad.start() // 启动语音识别
}

main()

Marked.js 入门指南：轻松渲染 Markdown

Mon, 08 Jul 2024 11:53:07 +0800

告别繁琐，轻松渲染 Markdown：Marked.js 入门指南

作为一名前端开发者，经常会遇到将文本内容转换为可视化的需求。Markdown 作为一种简洁易用的标记语言，成为了许多人首选。今天就来介绍一个强大的 Markdown 解析库 - Marked.js，让你轻松将 Markdown 文本渲染成 HTML。

https://github.com/markedjs/marked

为什么选择 Marked.js?

速度飞快: Marked.js 采用低级编译器，解析速度极快，不会因为长时间解析而阻塞页面。
轻量级: 虽然功能强大，但 Marked.js 体积轻巧，不会增加你的项目负担。
全面支持: 支持所有主流 Markdown 语法，并能根据你的需求进行配置。
多平台: 可以在浏览器、Node.js 以及命令行环境中使用。

上手体验：

让 HTML `

` 标签可编辑

Mon, 08 Jul 2024 00:04:41 +0800

解锁 HTML `<pre>` 标签的编辑功能

在网页开发中，我们经常使用 <pre> 标签来展示预格式化的文本，例如代码片段。但有时候，我们需要让这些预格式化文本可编辑。本文将介绍一种简单高效的方法，让你的 HTML <pre> 标签变得可编辑。

使用 `contenteditable` 属性

想要实现 <pre> 标签的可编辑性，我们可以利用 HTML 的 contenteditable 属性。只需在 <pre> 标签中添加 contenteditable="true" 属性即可。

<pre contenteditable="true"> 这是一个可编辑的预格式化文本。 你可以直接在这里编辑内容。 </pre>

优势：

Web Development on 技术杂烩

轻松实现网页语音识别的 JavaScript 库：vad-web

让你的网页项目拥有语音识别功能！

vad-web 的优势

如何快速上手？

Marked.js 入门指南：轻松渲染 Markdown

告别繁琐，轻松渲染 Markdown：Marked.js 入门指南

让 HTML `` 标签可编辑

解锁 HTML <pre> 标签的编辑功能

使用 contenteditable 属性

让 HTML `
` 标签可编辑

解锁 HTML `<pre>` 标签的编辑功能

使用 `contenteditable` 属性