当前位置： 首页 > news >正文

free pascal：fpwebview 组件通过JSBridge调用本机TTS

news 2026/3/31 16:57:52

从 https://github.com/PierceNg/fpwebview 下载 fpwebview-master.zip 简单易用。

先请看 \fpwebview-master\README.md

cd \lazarus\projects\fpwebview-master\demo\js_bidir

学习 js_bidir.lpr ，编写 js_bind_speak.lpr 如下，通过JSBridge调用本机TTS。

program js_bind_speak;{$linklib libwebview}
{$mode objfpc}{$H+}uses{$ifdef unix}cthreads,{$endif}Classes,Process,SysUtils,StrUtils,Variants,ComObj, math,webview;varw: PWebView;sapi: Variant;url: String;txt: String;procedure speak(const seq: PAnsiChar; const req: PAnsiChar; arg: Pointer); cdecl;
vars: String;
beginif req <> nil thenbegins := strPas(req);writeln('speak:'+s);trysapi.Speak(s);Sleep(1000)exceptwriteln(' OLE Error ')  end;endelsewriteln(' req is nil');//webview_return(w, seq, WebView_Return_Ok, '{result: "?"}');
end;beginif Assigned(InitProc) thenTProcedure(InitProc);{ Set math masks. libwebview throws at least one of these from somewhere deep inside. }SetExceptionMask([exInvalidOp, exDenormalized, exZeroDivide, exOverflow, exUnderflow, exPrecision]);trysapi := CreateOleObject('SAPI.SpVoice')exceptwriteln(' OLE Error ')end;url := 'http://localhost/';if ParamCount =1 thenbeginif Length(ParamStr(1))<6 thenurl := 'http://localhost:' + ParamStr(1)elsebeginif AnsiStartsStr('http', ParamStr(1)) then url := ParamStr(1)else if AnsiStartsStr('192.', ParamStr(1)) then url := 'http://' + ParamStr(1)else url := 'https://' + ParamStr(1);end;endelseurl := ParamStr(1);writeln(url);w := webview_create(WebView_DevTools, nil);webview_set_size(w, 1024, 768, WebView_Hint_None);webview_set_title(w, PAnsiChar('WebView - Pascal Javascript Bridge'));webview_bind(w, PAnsiChar('sapi_speak'), @speak, PAnsiChar(txt));webview_navigate(w, PAnsiChar(url));webview_run(w);webview_destroy(w);
end.

注意这一句：webview_bind(w, PAnsiChar('sapi_speak'), @speak, PAnsiChar(txt));

编写 编译批命令：winbuild.bat  如下

@echo offecho Set up FPC executable path.
set fpcexe=D:\lazarus\fpc\3.2.2\bin\x86_64-win64\fpc.exe
if not exist "%fpcexe%" (echo ERROR: Edit this batch file to set up location of fpc.exeexit /b 1
)
echo "%fpcexe%"echo Building...
copy "..\..\dll\x86_64\libwebview.a" .
copy "..\..\dll\x86_64\webview.dll" .
copy "..\..\dll\x86_64\WebView2Loader.dll" .
"%fpcexe%" -Fu..\..\src -Fl. js_bind_speak.lpr

编写 运行批命令：winrun.bat  如下

@echo off
@echo js_bind_speak.exe 
js_bind_speak.exe  %1

前端 js 代码：index6.html  如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>查询英汉词典</title> <script src="jquery-3.2.1.min.js"></script>
<style>
/* portrait 判断为竖屏 */
@media only screen and (orientation: portrait){#lab1 {display:none;}
} 
/* landscape 判断为横屏 */ 
@media only screen and (orientation: landscape){#lab1 {display: ;} 
}    
</style>
</head>
<body><form name="form" id="form" action="trans" method="POST" target="iframe"><label id="lab1">请输入：</label><input type="text" name="txt" id='txt' size="30" placeholder="请输入 a word"><input type="submit" name="eng_han" value="英译汉"><input type="button" name="btn1" id="btn1" value="前缀查询"><input type="button" name="btn2" id="btn2" value="TTS读音" onclick="tts2()"></form><p></p>
<div style="float:left; width:100%;"><div id="result" style="float:left; width:80%; height:400; border:2px;"><iframe name="iframe" id="iframe" width="100%" height="400"> </iframe></div><div id="alist" style="float:right; width:20%; height:400; border:2px;"></div>
</div><script type="text/javascript">$(function(){$("#btn1").click(function(){$.getJSON("/prefix?txt="+$("#txt").val(), function(data){$('#alist').empty();var items = [];$.each(data, function(i, item){if (i<=20){items[i] = '<a href="/trans?txt=' +item+ '" target="iframe">' +item+ "</a><br>";}});var a = items.join('\n');if (a) $('#alist').html(a);})})});//定义对象 customHost，方便js函数调用//var hostObj = window.chrome.webview.hostObjects.customHost;// pascal TTSfunction tts() {var txt = document.getElementById('txt').value;if (txt.length >1) {(async ()=>{await sapi_speak(txt);})();}}// 屏幕双击取词, pascal TTSfunction tts2() {// 获取iframe里的选择内容var select = window.frames['iframe'].getSelection();var txt = select.toString();txt = txt.trim();if (txt.length >1) { // alert(txt);(async ()=>{await sapi_speak(txt);})();} else {tts();}}// 页面加载添加：监听iframe网页点击事件$(document).ready(function(){var listener = window.addEventListener('blur', function(){if (document.activeElement === document.getElementById('iframe')){$('iframe').contents().find('a.fayin').click(function(event){event.preventDefault();var a = $(this);if (a){var addr = a.attr('href');if (addr.indexOf('sound://')==0){var url = "/data" + addr.substring(7);var mp3 = new Audio(url);mp3.addEventListener("canplaythrough", (event)=> {mp3.play();});} else {alert('href='+addr);}}})}        });});
</script> 
</body>
</html>

web 服务程序请参考：python：mdict + bottle = web 查询英汉词典

记得修改一句：def server_static(filepath="index6.html"):

先运行 web 服务程序：python mdict_bottle.py

再执行编译：winbuild.bat

最后运行：winrun.bat 8086

访问  http://localhost:8086/

相关文章：

free pascal：fpwebview 组件通过JSBridge调用本机TTS

从 https://github.com/PierceNg/fpwebview 下载 fpwebview-master.zip 简单易用。 先请看 \fpwebview-master\README.md cd \lazarus\projects\fpwebview-master\demo\js_bidir 学习 js_bidir.lpr &#xff0c;编写 js_bind_speak.lpr 如下&#xff0c;通过JSBridge调用本机…...

编程日记 2024/2/15 10:50:53

C语言静态库深入剖析

在C语言编程实践中&#xff0c;库是代码复用和模块化开发的重要基础结构。静态库作为其中一种主要的库类型&#xff0c;其内容在编译链接阶段即被完整地嵌入到最终生成的可执行文件中&#xff0c;从而使得程序在运行时无需外部依赖。本篇博客将系统性、详细地剖析C语言静态库的…...

编程日记 2024/2/15 10:47:50

A股上市以来涨幅排行榜

一、统计数据说明 1. 涨幅排行榜是根据股价的后复权价格计算的&#xff0c;该价格考虑了分红送股拆股等事件对股价的影响&#xff0c;相当于是分红再投资的股价。 2. 年化投资收益率&#xff0c;是根据IPO收盘价至今涨幅计算的复合年化收益率。例如&#xff0c;假设一个股票上…...

编程日记 2024/2/15 10:45:49

鸿蒙开发系列教程（十八）--页面内动画（1）

页面内的动画 显示动画 语法&#xff1a;animateTo(value: AnimateParam, event: () > void): void 第一个参数指定动画参数 第二个参数为动画的闭包函数。 如&#xff1a;animateTo({ duration: 1000, curve: Curve.EaseInOut }, () > {动画代码}&#xff09; dura…...

编程日记 2024/2/15 10:43:46

Web基础01-HTML+CSS

目录 一、HTML 1.概述 2.html结构解析 3.HTML标签分类 4.HTML标签关系 5.HTML空元素 6.HTML属性 7.常用标签 &#xff08;1&#xff09;HTML标签 &#xff08;2&#xff09;标题标签 &#xff08;3&#xff09;换/折行标签 &#xff08;4&#xff09;段落标签 &am…...

编程日记 2024/2/15 10:40:44

Linux命令行全景指南：从入门到实践，掌握命令行的力量

目录 知识梳理思维导图&#xff1a; linux命令入门 为什么要学Linux命令 什么是终端 什么是命令 关于Linux命令的语法 tab键补全 关于命令提示符 特殊目录 常见重要目录 /opt /home /root /etc /var/log/ man命令 shutdown命令 history命令 which命令 bash…...

编程日记 2024/2/15 10:39:43

蓝桥杯嵌入式第11届真题(完成) STM32G431

蓝桥杯嵌入式第11届真题(完成) STM32G431 题目 代码 程序和之前的大同小异&#xff0c;不过多解释 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief :…...

编程日记 2024/2/15 10:37:41

ChatGPT高效提问—prompt实践（教师助手）

ChatGPT高效提问—prompt实践&#xff08;教师助手&#xff09; 下面来看看ChatGPT在教育领域有什么用途。 首先设定ChatGPT的角色为高中教师助手。 输入prompt: ChatGPT输出&#xff1a; ​ 教师助手的角色已经设置完成。下面通过几种不同的情景演示如何使用。 1.1.1 制定…...

编程日记 2024/2/15 10:36:40

AI绘画作品的展示和变现-2

4.7 制作红包封面 中国的节日和传统文化元素仍然可以成为创作者们的创作灵感&#xff0c;创造出更多的变现机会。比如元宵节&#xff0c;可以制作大型元宵图案&#xff0c;进行引流并卖出元宵。 而春分、谷雨等节气也可以成为创作的灵感来源&#xff0c;创作出与之相关的图案&…...

编程日记 2024/2/15 10:35:39

Linux---网络套接字

端口号 端口号 端口号是一个2字节16位的整数; 端口号用来标识一个进程, 告诉操作系统, 当前的这个数据要交给哪一个进程来处理; IP地址 端口号能够标识网络上的某一台主机的某一个进程; 一个端口号只能被一个进程占用 在公网上&#xff0c;IP地址能表示唯一的一台主机&…...

编程日记 2024/2/15 10:32:36

前端vue 数字 字符串 丢失精度问题

1.问题 后端返回的数据 是这样的 一个字符串类型的数据 前端要想显示这个 肯定需要使用Json.parse() 转换一下 但是 目前有一个问题 转换的确可以 showId:1206381711026823172 有一个这样的字段 转换了以后 发现 字段成了1206381711026823200 精度直接丢了 原本的数据…...

编程日记 2024/2/15 10:30:34

智能汽车行业产业研究报告：4D成像毫米波雷达—自动驾驶最佳辅助

今天分享的是智能汽车系列深度研究报告&#xff1a;《智能汽车行业产业研究报告&#xff1a;4D成像毫米波雷达—自动驾驶最佳辅助》。 &#xff08;报告出品方&#xff1a;开源证券&#xff09; 报告共计&#xff1a;43页 视觉感知最佳辅助——4D 成像毫米波雷达 感知是自动…...

编程日记 2024/2/15 10:24:24

docker 3.1 镜像

docker 3.1 镜像命令 拉取镜像 docker pull debian #从 Docker Hub 拉取名为 debian 的镜像docker pull hello-world #从 Docker Hub 拉入名为 hello-world 的镜像‍ 运行镜像/容器 docker run hello-world ‍ 查看本地所有的镜像 docker images​​ 容器生成镜像…...

编程日记 2024/2/15 10:21:20

如何在极低成本硬件上落地人工智能算法 —— 分布式AI

一、背景 分布式AI的发展前景非常广阔&#xff0c;随着5G、6G等高速网络通信技术的普及和边缘计算能力的提升&#xff0c;以及AI算法和硬件的不断优化进步&#xff0c;分布式AI将在多个领域展现出强大的应用潜力和市场价值&#xff1a; 1. **物联网&#xff08;IoT&#xff0…...

编程日记 2024/2/15 10:18:17

机器学习：ROC曲线笔记

ROC曲线&#xff08;Receiver Operating Characteristic Curve&#xff09;是一种用于评估二分类模型性能的图形化工具&#xff0c;主要用于展示在不同阈值&#xff08;Threshold&#xff09;下模型的真阳性率&#xff08;True Positive Rate&#xff0c;TPR&#xff09;和假阳…...

编程日记 2024/2/15 10:17:16

【lesson54】线程互斥

文章目录 线程互斥 线程互斥 互斥量mutex 大部分情况&#xff0c;线程使用的数据都是局部变量&#xff0c;变量的地址空间在线程栈空间内&#xff0c;这种情况&#xff0c;变量归属单个线程&#xff0c;其他线程无法获得这种变量。但有时候&#xff0c;很多变量都需要在线程间…...

编程日记 2024/2/15 10:14:13

Android14音频进阶：MediaPlayerService如何启动AudioTrack 上篇(五十五)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏：多媒体系统工程师系列【原创干货持续更新中……】🚀 人生格言： 人生从来没有捷径，只…...

编程日记 2024/2/15 10:13:13

K8sGPT 的使用

K8sGPT 介绍 k8sgpt 是一个扫描 Kubernetes 集群、诊断和分类问题的工具。它将 SRE 经验编入其分析器中&#xff0c;并帮助提取最相关的信息&#xff0c;通过人工智能来丰富它。它还可以与 OpenAI、Azure、Cohere、Amazon Bedrock 和本地模型结合使用。 K8sGPT Github 地址 …...

编程日记 2024/2/15 10:11:10

《CSS 简易速速上手小册》第4章：视觉美学（2024 最新版）

文章目录 4.1 颜色理论在 CSS 设计中的应用&#xff1a;网页的调色盘4.1.1 基础知识4.1.2 重点案例&#xff1a;创建一个具有情感设计的登录页面4.1.3 拓展案例 1&#xff1a;使用颜色增强信息的可视化表示4.1.4 拓展案例 2&#xff1a;利用颜色创建网站的品牌身份 4.2 字体与文…...

编程日记 2024/2/15 10:04:04

设计模式浅析

一、设计模式的使用场景 设计模式&#xff08;Design Patterns&#xff09;是在软件开发中经过验证的最佳实践&#xff0c;用于解决常见的设计问题。它们提供了一种可复用的解决方案&#xff0c;可以帮助开发人员提高代码质量、可维护性和可重用性。设计模式的采用通常在以下情…...

编程日记 2024/2/15 10:02:01

3个关键步骤：在电视盒子上完美运行Armbian系统的终极指南

3个关键步骤&#xff1a;在电视盒子上完美运行Armbian系统的终极指南 【免费下载链接】amlogic-s9xxx-armbian Supports running Armbian on Amlogic, Allwinner, and Rockchip devices. Support a311d, s922x, s905x3, s905x2, s912, s905d, s905x, s905w, s905, s905l, rk358…...

编程新知 2026/3/31 16:46:23

Qwen2.5-VL-7B-Instruct本地部署指南：ClawdBot实现

Qwen2.5-VL-7B-Instruct本地部署指南&#xff1a;ClawdBot实现 1. 引言 想不想在本地电脑上搭建一个能看懂图片、理解视频的AI助手&#xff1f;今天咱们就来聊聊怎么把Qwen2.5-VL-7B-Instruct这个强大的视觉语言模型部署到本地环境&#xff0c;并且集成到ClawdBot中。 这个模…...

编程新知 2026/3/31 16:17:51

AutoRaise：macOS窗口悬停管理的技术实现与配置指南

AutoRaise&#xff1a;macOS窗口悬停管理的技术实现与配置指南 【免费下载链接】AutoRaise AutoRaise (and focus) a window when hovering over it with the mouse 项目地址: https://gitcode.com/gh_mirrors/au/AutoRaise AutoRaise是一款基于Objective-C开发的macOS窗…...

编程新知 2026/3/31 14:09:19

11.0592MHz晶振在51单片机串口通信中的优势解析

1. 为什么11.0592MHz晶振成为单片机工程师的首选在嵌入式系统设计中&#xff0c;晶振的选择往往决定了整个系统的稳定性和精度。作为一名从事单片机开发多年的工程师&#xff0c;我发现11.0592MHz的晶振在51单片机项目中出现的频率异常高。这绝非偶然&#xff0c;而是由一系列精…...

编程新知 2026/3/31 13:30:55

XposedRimetHelper：如何优雅解决远程办公的定位打卡难题？[特殊字符]

XposedRimetHelper&#xff1a;如何优雅解决远程办公的定位打卡难题&#xff1f;&#x1f680; 【免费下载链接】XposedRimetHelper Xposed 钉钉辅助模块&#xff0c;暂时实现模拟位置。 项目地址: https://gitcode.com/gh_mirrors/xp/XposedRimetHelper 面对企业日益严…...

编程新知 2026/3/31 13:16:49

HarmonyOS 音乐播放器进阶实战——AVPlayer状态管理与播放列表

1. AVPlayer状态机深度解析 在HarmonyOS音乐播放器开发中&#xff0c;AVPlayer的状态管理就像驾驶手动挡汽车——你需要清楚知道当前处于哪个档位&#xff0c;才能平稳切换。我曾在项目中因为状态处理不当导致音乐卡顿&#xff0c;后来才发现是状态机流转出了问题。 AVPlayer…...

编程新知 2026/3/31 11:49:26

Arduino_ConnectionHandler库：嵌入式网络连接状态管理与自适应重连

1. Arduino_ConnectionHandler 库深度解析&#xff1a;嵌入式网络连接管理的工程实践指南1.1 库定位与核心价值Arduino_ConnectionHandler是 Arduino 官方生态中面向物联网终端设备的网络连接抽象管理层&#xff0c;其设计目标并非替代底层通信协议栈&#xff08;如 WiFiClient…...

编程新知 2026/3/31 11:43:19

Layerdivider：零基础上手图像分层工具的完整指南

Layerdivider&#xff1a;零基础上手图像分层工具的完整指南 【免费下载链接】layerdivider A tool to divide a single illustration into a layered structure. 项目地址: https://gitcode.com/gh_mirrors/la/layerdivider 为什么自动分层总是不尽如人意&#xff1f;设…...

编程新知 2026/3/31 10:53:03

Qwen3-14B芯片设计辅助：Verilog注释生成、RTL代码解释、DFT建议

Qwen3-14B芯片设计辅助&#xff1a;Verilog注释生成、RTL代码解释、DFT建议 1. 镜像概述与硬件适配 Qwen3-14B私有部署镜像是专为芯片设计工程师打造的AI辅助工具&#xff0c;基于通义千问大语言模型优化定制。该镜像完美适配RTX 4090D 24GB显存配置&#xff0c;预装了完整的…...

编程新知 2026/3/31 10:22:37

父子进程变量地址相同值却不同？图解Linux写时拷贝与页表机制

父子进程变量地址相同值却不同&#xff1f;图解Linux写时拷贝与页表机制 你是否曾在Linux环境下遇到过这样的现象&#xff1a;通过fork()创建的子进程与父进程打印同一个全局变量的地址时&#xff0c;两者的地址值完全相同&#xff0c;但实际读取的变量值却不同&#xff1f;这个…...

编程新知 2026/3/31 10:10:23