nodejs：express + js-mdict 網頁查詢英漢詞典，能播放.spx 聲音

向 DeepSeek R1 提問：
我想寫一個Web 前端網頁，后臺用 nodejs + js-mdict?, 實現在線查詢英語單詞，并能播放.spx 聲音文件

1. 項目結構

首先，創建一個項目目錄，結構如下：

mydict-app/
├── public/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── server/
│   └── server.js
├── package.json
└── README.md

英漢詞典文件（.mdx , .mdd)? 已經放在 /js/testdict/?

2. 安裝依賴

在項目根目錄下運行以下命令，初始化項目并安裝所需的依賴：
cd mydict-app
npm init -y
npm install express
added 69 packages in 6s

npm install js-mdict
added 3 packages in 2s

3. 創建前端頁面

在?public/index1.htm?中創建一個簡單的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>查詢英漢詞典 spx</title><script src="jquery.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="search" method="GET" target="iframe"><label id="lab1">請輸入：</label><input type="text" name="word" id="word" size="30" placeholder="請輸入英文單詞"><input type="submit" name="eng_han" value="英譯漢"><input type="button" name="btn1" id="btn1" value="前綴查詢"><input type="button" name="btn2" id="btn2" value="模糊查詢"></form><p></p>
<div style="float:left; width:100%;"><div id="result" style="float:left; width:75%; height:400; border:2px;"><iframe name="iframe" id="iframe" width="100%" height="400"> </iframe></div><div id="alist" style="float:right; width:25%; height:400; border:2px;"></div>
</div><script src="bitstring.min.js"></script> 
<script src="pcmdata.min.js"></script> 
<script src="speex.js"></script> 
<script src="script1.js"></script>
</body>
</html>

?在?public?中添加一些英漢字典的樣式：
speex.js 下載網址：speex.js 是Web前端網頁播放.spx聲音文件所需的解碼器

在?public/script1.js?中編寫前端邏輯：

// decode Speex from mdict-js 
/** * @param bufSpx ArrayBuffer (Uint8Array) holding content of speex file (*.spx or *.ogg) */ function decodeSpx(bufSpx) { var stream, samples, st; var ogg, header, err; ogg = new Ogg(bufSpx, {file: true}); ogg.demux(); stream = ogg.bitstream(); header = Speex.parseHeader(ogg.frames[0]); console.log(header); comment = new SpeexComment(ogg.frames[1]); console.log(comment.data); st = new Speex({ quality: 8, mode: header.mode, rate: header.rate }); samples = st.decode(stream, ogg.segments); var waveData = PCMData.encode({ sampleRate: header.rate, channelCount: header.nb_channels, bytesPerSample: 2, data: samples }); // array buffer holding audio data in wav codec var bufWav = Speex.util.str2ab(waveData); // convert to a blob object var blob = new Blob([bufWav], {type: "audio/wav"}); // return a "blob://" url which can be used as a href anywhere return URL.createObjectURL(blob); }const iframe = $('#iframe')[0]; // 獲取 iframe DOM 元素const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; 
// 頁面加載添加：監聽iframe網頁點擊事件  $(document).ready(function(){var listener = window.addEventListener('blur', function(){if (document.activeElement === document.getElementById('iframe')){$('iframe').contents().find('a').click(function(event){event.preventDefault();var a = $(this);if (a){var addr = a.attr('href');if (addr.indexOf('entry://')==0 && addr.indexOf('entry://#')!=0){             var word = encodeURIComponent(addr.substring(8));$.ajax({url: `/search?word=${word}`,method: 'GET',success: function (html) {// 將 HTML 內容加載到 iframe 中//$('#iframe').attr('srcdoc', html);if (html){// 寫入 HTML 內容iframeDoc.open();iframeDoc.write(html);iframeDoc.close();}},error: function (error) {console.error('entry:請求失敗:', error);}});} else if (addr.indexOf('sound://')==0){var url = "/data/" + addr.substring(8);fetch(url).then(response => response.arrayBuffer()).then(arrayBuffer => {// 將 ArrayBuffer 轉換為 Uint8Arrayconst uint8Array = new Uint8Array(arrayBuffer);   try {// 解碼.spx 數據后變為.wavvar blobUrl = decodeSpx(String.fromCharCode.apply(null, uint8Array));// 創建 Audio 并播放音頻var audio = new Audio(blobUrl);audio.addEventListener("canplaythrough", (event)=> {audio.play();});audio.addEventListener('error', (e) => {console.error('play error:', e);});} catch (error) {console.error('Error decoding spx data', error);}}).catch(error => {console.error('Error loading spx file', error);});}}})};});
});// 前綴查詢
$(function(){$("#btn1").click(function(){$.getJSON("/prefix?word="+$("#word").val(), function(data){var items = [];$.each(data, function(i, item){if (i<=20){items[i] = '<a href="/search?word=' +item+ '" target="iframe">' +item+ "</a><br>";}});var a = items.join('\n');if (a) $('#alist').html(a);})})
});// 模糊查詢
$(function(){$("#btn2").click(function(){$.getJSON("/fuzzy?word="+$("#word").val(), function(data){var items = [];$.each(data, function(i, item){if (i<=20){items[i] = '<a href="/search?word=' +item+ '" target="iframe">' +item+ "</a><br>";}});var a = items.join('\n');if (a) $('#alist').html(a);})})
});

4. 創建后端服務器

在?server/server.js?中編寫Node.js服務器代碼，使用?express?和?js-mdict?來處理查詢請求：

如何直接讀取.MDD文件中的.spx 音頻數據，編寫了升級版?server_spx.js 如下

const express = require('express');
const fs = require('fs');
const path = require('path');
const Mdict = require('js-mdict');
//console.log(Mdict);
const app = express();
const port = 8003;// 加載MDict詞典文件
//const mdict = new Mdict('path/to/your/dictionary.mdx');
const mdx = new Mdict.MDX('/path/to/your.mdx');
const mdd = new Mdict.MDD('/path/to/your.mdd');
//console.log(mdd.locate('\\goods'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
// 提供靜態文件
app.use(express.static(path.join(__dirname, '../public')));const isWord = (txt) => {// 只允許字母、下劃線、空格、-return /^[a-zA-Z_ \-]+$/.test(txt);
};
// 處理查詢請求
app.get('/search', (req, res) => {let word = req.query.word;// 檢查word是否合法if (word.length>50 || !isWord(word)) {return res.status(400).send('Invalid input.');}if (word) {let data = mdx.lookup(word);console.log("cha: "+ word);if(data.definition){res.send(data.definition);} else {res.status(400).send('this word not found');}} else {res.status(400).send('error: No word input');}
});// 處理前綴查詢請求
app.get('/prefix', (req, res) => {let word = req.query.word;// 檢查word是否合法if (word.length>50 || !isWord(word)) {return res.status(400).send('Invalid input.');}if (word) {let alist = mdx.prefix(word);console.log("pre: "+ word);if(alist){let wordls = [];alist.forEach(function(value){wordls.push(value.keyText);});  res.json(wordls);} else {res.status(400).send('info: this word not found');}} else {res.status(400).send('error: No word input');}
});// 處理模糊查詢請求
app.get('/fuzzy', (req, res) => {let word = req.query.word;// 檢查word是否合法if (word.length>50 || !isWord(word)) {return res.status(400).send('Invalid input.');}if (word) {let alist = mdx.fuzzy_search(word,3,1);console.log("fuzzy: "+ word);if(alist){let wordls = [];alist.forEach(function(value){wordls.push(value.keyText);});  res.json(wordls);} else {res.status(400).send('info: this word not found');}} else {res.status(400).send('error: No word input');}
});// 指定目錄
const dir1 = "\\";// 實現文件下載，*/是路徑
app.get('/data/*/:fileName', (req, res, next) => {let path1 = req.params[0]; // 捕獲 * 匹配的部分let fileName = req.params.fileName; // 捕獲文件名// 檢查路徑中是否包含非法字符（如 ..）if (path1.includes('..') || fileName.includes('..')) {return res.status(400).send('Invalid path: Path traversal is not allowed.');}if (path.extname(fileName) === '.spx'){let filePath = path.join(dir1,path1, fileName);//console.log(filePath);let data = mdd.locate(filePath);if (data){console.log('key: '+ data.keyText);//console.log(Buffer.isBuffer(data.definition));if (data.definition){let binaryData = Buffer.from(data.definition, 'base64');//res.setHeader('Content-Type', 'application/octet-stream');res.set({'Content-Type': 'audio/ogg','Content-Disposition': 'attachment;','Content-Length': Buffer.byteLength(binaryData)});//console.log('bytes: '+ Buffer.byteLength(binaryData));res.end(binaryData);} else {res.status(400).send('error: data.definition is null');}} else {res.status(400).send('error: data is null');}} else {res.status(400).send('filename.ext is not .spx');}
});app.listen(port, () => {console.log(`Server is running on http://localhost:${port}`);
});