原创 Web Audio API 第5章 音頻的分析與可視化

到目前爲止,我們僅討論了音頻的合成與處理,但這僅是 Web Audio API 提供的一半功能。另一半功能則是音頻的分析,它播放起來應該是什麼樣子的。它最典型的例子就是音頻可視化,但其實有更多的其它應用場景,包括聲調檢測,節減檢測,語音識別

原创 Web Audio API 第4章 音調與頻域

音調與頻域 此章中如果對音樂部分不感興趣,可忽略 代碼部分也沒有更多的新 api ,重要的還是相關的物理與聲音的相關知識 到目前爲止我們已經學過了聲音的基礎屬性:定時與音量。爲了能處理更復雜的的情況,例如聲音的均衡(比如,增加低音和降低

原创 Web Audio API 第3章 音量和響度

此章介紹的科普物理聲音知識相當有用,編程的反而涉及的少 音量和響度 Loudness 響度 注:根據《韋氏詞典》,響度是“一種聲音的屬性,它決定了所產生的聽覺感覺的大小,主要取決於所涉及聲波的振幅。”這意味着響度取決於你大腦中感知到的

原创 Web Audio API 第2章 完美的播放時機控制

Web Audio API 第2章 完美的播放時機控制 相較於 標籤, Web Audio API 擁有低延遲精確定時模型。 低延時對於遊戲或交互式應用來說非常重要,因爲交互操作時要快速響應給用戶的聽覺。如果響應的不及時,用戶就會察覺到延

原创 Web Audio API 第1章 基礎篇

Web Audio API 第1章 基礎篇 我查了一下 Web Audio API 蝙蝠書居然在 2013 年就出版了 我又看了一下我的“豆瓣讀書”頻道內,這本書加入到“在讀”標籤是在 2021 年了 一直沒有堅持看這本書的原因有兩點,

原创 electron 下網頁獲取 micphone 權限

網頁獲取麥克風或攝像頭權限我們只需調用 navigator.mediaDevices.getUserMedia 方法就可喚起瀏覽器用戶授權 const useMicphone = async () => { try{ let m

原创 Electron 開發過程中主進程的無法看到 console.log 輸出怎麼辦

開發過程中命令行工具(powershell、terminal)內無法看到 console.log 輸出 Eelectron 的在開發過程中主進程 NodeJS 內往往需要 console.log 來進行簡單的調式 渲染進程的 console

原创 2D物理引擎 Box2D for javascript Games 第七章 子彈和感應器

2D物理引擎 Box2D for javascript Games 第七章 子彈和感應器 你知道 Box2D 可以在每一個時間步中管理剛體間的碰撞並決算它們。 總之,在憤怒的小鳥中製作攻城機器期間,發生了一些錯誤 你可能需要注意一下,有時

原创 2D物理引擎 Box2D for javascript Games 第六章 關節和馬達

2D物理引擎 Box2D for javascript Games 第六章 關節和馬達 關節和馬達 到現在你所見到的所有類型的剛體有着一些共同點:它們都是自由的並且在除碰撞的請款之外,彼此沒有依賴。 有時你可能想要剛體之間進行約束。 如果

原创 2D物理引擎 Box2D for javascript Games 第五章 碰撞處理

2D物理引擎 Box2D for javascript Games 第五章 碰撞處理 碰撞處理 考慮到 Box2D 世界和在世界中移動的剛體之間遲早會發生碰撞。 而物理遊戲的大多數功能則依賴於碰撞。在憤怒的小鳥中,小鳥摧毀小豬的城堡時,便

原创 2D物理引擎 Box2D for javascript Games 第四章 將力作用到剛體上

2D物理引擎 Box2D for javascript Games 第四章 將力作用到剛體上 將力作用到剛體上 Box2D 是一個在力作用下的世界,它可以將力作用於剛體上,從而給我們一個更加真實的模擬。 但是,如果你想要移動剛體,發射子彈

原创 貝塞爾曲線的切線及其AABB問題

貝塞爾曲線的切線及其AABB問題 先聊點別的 2023 年抖音上居然還看到很多前端培訓 各種直播前端教學(雖然是錄播)但看起來還是有大批前往前端卷啊 說明了什麼,很可能說明其它行業更難卷 這不是行業不景氣業務下降了麼.. 互聯網行業是肉眼可

原创 Nodejs 命令行調用 exec 與 spawn 差異

Nodejs 命令行調用 exec 與 spawn 差異 比如在前端工程項目中 Nodejs 要調用命令行命令如: yarn electron:build exec 調用 yarn 命令,爲了能使命令行能實時打印輸出正在編譯的命令 以異

原创 貝塞爾曲線文字路徑

譯者注 這篇文章原本是之前翻譯 《曲線藝術編程》系列第八章--貝塞爾曲線一章中引用的內容 作者提到過知識點可參考這篇文章以及優化和線性插值所以我也時分想仔細看一篇 在當時其實打開看過一眼,其中有看到導數部分,當時就怕翻譯錯了,所以我回頭抽空

原创 EaselJS 源碼分析系列--第四篇

鼠標交互事件 前幾篇關注的是如何渲染,那麼鼠標交互如何實現呢? Canvas context 本身沒有像瀏覽器 DOM 一樣的交互事件 EaselJS 如何在 canvas 內實現自己的鼠標事件系統? 原理大致如下: Stage 類內