文章詳情頁
html5 - 如何利用Canvas技術(shù)制作出上下跳動(dòng)的音樂譜
瀏覽：188日期：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. 如何解決docker宿主機(jī)無法訪問容器中的服務(wù)？2. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣？這個(gè)是怎么回事？？？？3. require后不用使用echo返回到微信服務(wù)器 嗎4. nginx - 如何將wordpress系統(tǒng)放在二級(jí)域名下5. javascript - 請(qǐng)問要如何修改 Node 的透明度嗎？6. javascript - 求助，nodeJS和koa2文檔對(duì)新手小白太不友好，一臉懵逼。。。7. css3 background顯示圖片的一部分8. vim中編輯HTML文件時(shí)換行不能縮進(jìn)9. 在應(yīng)用配置文件 app.php 中找不到’route_check_cache’配置項(xiàng)10. html按鍵開關(guān)如何提交我想需要的值到數(shù)據(jù)庫
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備