文章詳情頁
html5 - 如何利用Canvas技術(shù)制作出上下跳動(dòng)的音樂譜
瀏覽：135日期：2023-01-02 11:52:31
問題描述
想問一下，如何利用canvas技術(shù)制作出上下跳動(dòng)的音樂譜
就是類似于這個(gè)圖片一樣的，簡(jiǎn)單的可以上下跳動(dòng)的效果！
問題解答
回答1：剛學(xué)前端的時(shí)候做過一個(gè)可視化音頻播放器，要用到 Web Audio API，配合 H5 Audio element 兼容性會(huì)好一些，至于 Canvas，網(wǎng)上有很多資料，就不贅述了：
Web Audio API
Web Audio API 在 ie 的兼容性不太好。另外，慕課有個(gè)課程，可以作為入門：
HTML5 音樂可視化-慕課網(wǎng)
以下是我自己做的小 Demo，僅做參考，用現(xiàn)代框架寫應(yīng)該會(huì)好很多：
A demo(使用 Chrome 瀏覽)
[source code]https://github.com/huangbuyi/...
標(biāo)簽：
Html5
上一條：javascript - 如果根據(jù)參數(shù)給table中的tr綁定不同事件下一條：javascript - 記得js有個(gè)方法是打開一個(gè)窗口替換當(dāng)前頁, 并切不能點(diǎn)擊返回按鈕, 類似支付頁面(安全), 今天找了半天沒找到, 求告知?
相關(guān)文章：
1. mysql - 在下剛?cè)腴Tsql 關(guān)于sql的語法詢問2. javascript - iframe 為什么加載網(wǎng)頁的時(shí)候滾動(dòng)條這樣顯示？3. vue ajax請(qǐng)求回來的數(shù)據(jù)沒有渲染到頁面4. javascript - 原生JS和jQuety關(guān)于設(shè)置圖片輪播定時(shí)器問題5. 初來乍到，相對(duì)路徑問題，新手求教6. 哭遼 求大佬解答 控制器的join方法怎么轉(zhuǎn)模型方法7. 老師您好!我有一個(gè)問題、8. javascript - jq 上傳圖片成功后添加一個(gè)新的上傳框時(shí)出現(xiàn)問題9. 請(qǐng)問寫好python模塊以后，文檔怎么寫？10. list - python 求助
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備