用NextJS和ExpressJS將語音轉換為PDF

本文探討了將語音轉換為可下載的PDF的Next.js and Express.js應用程序。讓我們深入研究創建此語音到PDF轉換器的過程。

語音界面的越來越多的流行率需要探索其能力。該項目展示了將口語轉換為可下載的PDF文檔。我們將利用幾個庫來實現此功能。

關鍵技術：

核心組件是next.js and express.js。 React框架Next.js提供了API路由之類的功能，對於我們的服務器端PDF生成至關重要。 Express.js促進了Node.js服務器的創建以處理數據處理和路由。

其他依賴項包括：

1. react-speech-recognition ：將語音轉換為反應組件中的文本。
2. regenerator-runtime ：地址潛在的“未定義的Regeneratorruntime”在Next.js中。
3. html-pdf-node ：將HTML轉換為PDF。
4. axios ：管理HTTP請求。
5. cors ：啟用交叉原始資源共享。

項目設置：

首先創建兩個項目文件夾：一個用於客戶端（例如， audio-to-pdf-client ），一個用於服務器（例如， audio-to-pdf-server ）。

初始化下一個.js客戶端：

 npx create-next-app音頻到pdf-client

設置Express.js服務器：導航到服務器文件夾並運行：

 npm init -y
NPM安裝Express HTML-PDF節點CORS

使用基本的Express Server在服務器文件夾中創建index.js ：

 const express = require（“ express”）;
const app = express（）;
app.listen（4000，（）=> console.log（“在端口4000”上運行的服務器）;

安裝客戶端依賴項：

 CD音頻到pdf-client
NPM安裝反應語音識別再生式軸承軸

在客戶端項目中創建一個components文件夾，並在其中創建一個SpeechToText.jsx文件。修改pages/index.js以導入並渲染SpeechToText組件。

UI開發：

SpeechToText.jsx組件將處理用戶交互。一個基本結構包括要啟動，停止，重置語音識別的按鈕，並轉換為PDF。 contenteditable div顯示抄錄文本。 （有關詳細的組件代碼和CSS樣式，請參閱原始文章）。

服務器端API路線：

Express.js服務器將處理PDF生成。在index.js中，導入必要的模塊（ html-pdf-node ， fs ， cors ， express.json() ），並定義了郵政路由（ / ）。該路由接收轉錄的文本，使用html-pdf-node生成PDF，將其保存到文件系統，然後將PDF發送給客戶端。 （有關完整的服務器端代碼，請參見原始文章）。

客戶端轉換：

SpeechToText.jsx中的handleConversion函數向Express Server提出了API請求。它處理加載狀態，錯誤和成功消息。成功轉換後，它會觸發生成的PDF的瀏覽器下載。 （有關詳細的handleConversion功能，請參見原始文章）。

最後一步：

可以在GitHub上找到客戶端和服務器的完整代碼（原始文章中提供的鏈接）。請記住，分別運行下一個.js開發服務器和Express.js服務器。此設置使您可以測試語音到PDF轉換功能。

以上是用NextJS和ExpressJS將語音轉換為PDF的詳細內容。更多資訊請關注PHP中文網其他相關文章！