用 H5 做了個 IM 聊天應用，功能比較簡單，可以傳送文字圖片，以及播放原生客戶端發來的語音訊息。
即時通訊自然要用 websocket，介面也比較簡單，主要精力在於，理解並實現 前後端約定的相關訊息協議，並沒有什麼難度。
前端開發，不可避免會遇到一些相容性問題，分享幾個相容方案。
鍵盤遮擋輸入框
H5 無法控制原生輸入法，各種機型對虛擬鍵盤彈起行為的處理機制不一，我們的測試同學非常貼心，與鍵盤有關的 bug 各種場景一個個算，一共有十來個，表象其實只有一個：鍵盤遮擋輸入框。
IM 輸入框通常都被設計為吸附於底部，虛擬鍵盤彈起 輸入框要隨著上移，安卓還好，ios 對 fixed 的處理有點異常，這個問題網上已經有成功的解決方案了，設定一個定時器，不斷的去 scrollIntoView 就好了。
iphoneX 在虛擬鍵盤彈起的時候又有了另外的處理機制，只得針對具體機型，具體系統版本做相容,無非多寫幾行if else。
這個 bug，在不影響正常使用的情況下，盡力相容就可以了，我自認為已經做到很好，心想絕逼能相容 90%以上的場景，但並沒有令測試滿意，可以多試試別人家的輸入框，大都有瑕疵，想做到完美，這真是個業界難題。
IOS 拍照，照片被旋轉
圖片預覽用到 FileReader 介面，上傳進度是 ajax 的onUploadProgress事件，都沒有問題。
這裡的相容性主要在於 ios 拍照，照片會被旋轉。解決思路是根據旋轉角度，用 canvas 再給轉回來就可以了，照片相關資訊通過exif-js這個庫可以輕鬆獲取。
語音訊息播放
安卓和 ios 客戶端最早給的是spx音訊格式，spx 格式比較小，適合大量語音訊息的傳輸，但 h5 audio標籤是無法直接播放spx格式的，網上大部分都是在伺服器端轉成 mp3 或者 wav，h5 直接載入轉碼後的格式播放。
我主要是苦於沒有找到瀏覽器端可解碼spx格式的 js 庫，經過溝通，我們拋棄了spx，採用amr格式。
github 有現成可用的解碼庫對AMR 格式解碼，播放則使用強大的 AudioContext 介面，這個介面非常強大，值得好好看看，audio 標籤顯得確實有點太弱了。
這裡有個需要注意的問題：android 可以正常播放 amr 檔案，主要原因是 amr 檔案的取樣頻率是 8000 ，ios 支援到 20000 多，如果用超過 8000 的頻率播放，語音速度會很快，ios 的解決辦法是加頻率的同時加幀數。
當然，如果選擇直接播放 mp3 或者 wav，可以天然避免很多問題。
詳細程式碼，撩我。
總結
前端踩坑主要在相容各種裝置瀏覽器上，解決相容性問題，其實對提升編碼能力並沒有多少實質性的幫助，但卻是前端開發不可避免的一部分。
詳細程式碼，demo，有需要的可以加我，一起交流。