這兩天在研究Web Audio API，這是個有趣的東西，但一般看到的應用都是在純音樂的創作上，比如線上五線譜，線上編曲等等的，因為另一個原因，所以我想研究的是線上剪切聲音檔的功能；但是最後發現，剪切聲音檔需要很強的運算能力，直接存成wav檔之類的還可以，但是要再壓線成其它的格式，就不一定吃得消了；雖然沒有辦法如願做出想要的功能，但也順便玩了一下視覺化的功能，做出來的成果還滿有趣的。

展示頁面
Gitub專案頁面

我做了兩個實作的成果，一個是可以直接開本機上的聲音檔出來播放，然後把聲音的頻率轉成動畫圖象來顯示，圖像的部份使用的是canvas的功能來即時繪製；將取得的音源資料做一些變化後，就可以產生不同的動態效果，github上也有一些專案是在做視覺化的。

API取得的資料有兩類，一類是顯示音源由那些頻率組合而成的，一類則是當下音源的能量組合，利用這兩類資料的數據特性就可以變化出各種隨音樂進行的動態出來。

另一個實作是對整個聲音檔的分析，這個功能原意要是來找出聲音檔的前後空白(靜音)的部份，方便做聲音檔的剪裁或標註，這個功能就不需要播放出聲音檔來截取資料，程式會以瀏灠器可以承受的速度儘快把資料送進一個我們自己寫的處理器中對資料進行分析。

我的實作則是提供可以一次上傳多個檔案並對檔案分析的功能，會在畫面上列出各個聲音檔及該檔案的整體音頻狀況，可以大概知道音頻是快的慢的，吵的還是柔和的，一樣提供直接讀取本機檔案的功能，原本有想做遠端檔案分析的，但我估計加上網路傳輸因素，會有很多狀況要處理，就先算了。

最近在學著使用前端框架來處理前端頁面的呈現，同時也拿來當成授課的內容，帶著學生實作了一個範例，不過只是把Vue.js引入後做一些資料綁定的動作，展現給學生了解使用框架和先前的做法有什麼差異。

這兩天則是自己把組件的部份玩了一下，同時把自己的一個案子做了修改，整個改下來的心得就是HTML / CSS / JS可以切得很乾淨，在維護上和後續功能的維護上的確帶來了方便，而且不用再去擔心資料異動時的DOM更新問題；但是整體程式碼並沒有少很多，主要是因為不同的開發方式，各自有不同的細節要注意，因此單就程式碼的撰寫工作上並不一定真的會有所減少，或更輕鬆，不過這個問題我有和學生解釋邊際效應的狀況，因為目前我們課程中練習的範例規模都不大，因此很容易會發生這種使用了框架或物件導向時，似乎沒有比直接原生寫來得省工或乾淨的感覺，但是當開發的規模到達一定程度時，這些不同的開發方式的效益才會顯現出來。

另一個心得就是重構的問題，目前我還只是在現有的案子上引入vue.js來使用，同時還搭配Jquery來處理一些ajax及dom的操作，相比之前在js 裏夾雜一堆html及css來說，目前的架構己經改善很多了，但是我為了快速套用，所以每個功能模組都單獨產生一個Vue的實例來運作，然後再利用實例之間互相丟資料來維持功能和先前的做法一致，理想的做法是整個網站都納入Vue.js的控管之下，儘可能把網站的內容都拆成組件來使用，這需要整個重構，但這樣做之後相信會更清爽及好維護。

最後我還沒空使用到Vue-router,Vue-x，等下個月有空再來研究看看，相信對於前端的網頁內容控制會更有幫助。