文章詳情頁(yè)
html5 - 如何利用Canvas技術(shù)制作出上下跳動(dòng)的音樂譜
瀏覽：227日期：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)前頁(yè), 并切不能點(diǎn)擊返回按鈕, 類似支付頁(yè)面(安全), 今天找了半天沒找到, 求告知?
相關(guān)文章：
1. PHPExcel表格導(dǎo)入數(shù)據(jù)庫(kù)怎么導(dǎo)入2. 預(yù)訂金和尾款分別支付3. thinkphp6使用驗(yàn)證器 信息如何輸出到前端頁(yè)面4. macos - 無法source activate python275. python - 調(diào)用api輸出頁(yè)面，會(huì)有標(biāo)簽出現(xiàn)，請(qǐng)問如何清掉？6. 運(yùn)行python程序時(shí)出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯(cuò)誤？7. python - sqlalchemy更新數(shù)據(jù)報(bào)錯(cuò)8. 我在導(dǎo)入模板資源時(shí)遇到無法顯示的問題，請(qǐng)老師解答下9. empty比isset更嚴(yán)格一點(diǎn)10. javascript - h5微信中怎么禁止橫屏
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備