題目

某英語興趣小組為鍛煉成員的聽力，準備請人員開發(fā)一個網(wǎng)上聽寫系統(tǒng)，用戶選擇某篇文章進行聽力練習，系統(tǒng)開始逐句循環(huán)播放，在指定區(qū)域隱藏顯示當前句子的文本，用戶在輸入?yún)^(qū)域輸入單詞，如果該單詞在句子中出現(xiàn)，該單詞將直接顯示在句子中的正確位置。當句子中所有單詞輸入正確后，自動轉到下一句開始循環(huán)播放，直至整篇文章全部聽寫正確。用網(wǎng)站方式實現(xiàn)。

分析

播放聽力可以用document.createElement('audio')來實現(xiàn)。
在某一句循環(huán)播放需要知道句子對應的音頻的時間范圍，超出結束時間后跳到開始時間播放。
隱藏和顯示句子可以用js切換句子的樣式來實現(xiàn)。
用keyup方法監(jiān)控輸入?yún)^(qū)域的輸入。
抽取通用的樣式和js代碼形成模板文件。根據(jù)歌詞文件來生成文章句子時間表，填充進模板形成網(wǎng)頁

項目代碼：

已經(jīng)實現(xiàn)：后臺根據(jù)歌詞文件生成網(wǎng)頁，網(wǎng)頁實現(xiàn)某篇英語聽力文章的練習功能。
歌詞文件需包含：標題、音頻、句子及每個句子的時間范圍
下載地址

總結

以上是生活随笔為你收集整理的网上英语听写系统的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。