iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

JavaScript 音樂漫遊 - 30 天探索 Web Audio! 系列

如同一道好料理需要具備色、香、味,一個好網站除了好內容之外,也需要透過互動性更高的視覺、聽覺,來與內容相輔相成。

本系列將從 Web Audio API 出發,以說明搭配範例,從實作中逐步認識 API 規格;並挑選數個主流、有趣的 Audio 相關套件,透過 JavaScript,玩轉聲音於程式的字裡行間。

歡迎您與我一同踏上這趟旅程,讓我們於科技與藝術的交會處相逢,一起在音樂中肆意漫遊。

DAY 21

20. Tone.js - 排程

旅程走到這邊,也逐漸認識 Tone.js 這個音樂框架了,是不是有種相見恨晚的感覺啊 XD 但也是因為我們先在 Web Audio API 上走過一圈,熟悉了模...

2018-11-05 ‧ 由 Gary 分享
DAY 22

21. 音序機 Part.1

昨天我們聊到的 Tone.js 的強力功能 - 排程播放,那麼就來玩玩看許多高手前輩都做過的 音序機 吧~ Sequencer 音序機,顧名思義,就是能夠把聲音...

2018-11-06 ‧ 由 Gary 分享
DAY 23

22. 音序機 Part.2

其實,這個音序機在原本的鐵人三十天計畫中,大概只佔了一天的篇幅,但筆者寫著寫著就越寫越開心,不知不覺就玩開了,文章都不寫整天刻網站,啊哈哈哈哈哈。 今天就紀錄一...

2018-11-07 ‧ 由 Gary 分享
DAY 24

23. 音序機 Part.3

欸對,就是音序機的第三天。一個不小心玩得太開心,就又長出了一些功能,一起來看看吧! 點擊 & 觸碰事件 一格一格點實在太慢了,還是來仿照前人的智慧,寫個...

2018-11-08 ‧ 由 Gary 分享
DAY 25

24. Scribbletune

結束了連續三天的音序機之旅,是否覺得互動式音樂非常有趣呢?接下來讓我們玩玩另一個有趣的音樂套件 - Scribbletune。 這是什麼? Scribbletu...

2018-11-09 ‧ 由 Gary 分享
DAY 26

25. Scribbletune - Clip

昨天 我們一起認識了 Scribbletune 這個有趣的套件,如果你還沒看過昨天的文章,可以先去看完再回來喔~ 參考一下昨天最後使用的範例: Scribble...

2018-11-10 ‧ 由 Gary 分享
DAY 27

26. Scribbletune - 音軌處理

今天我們將會繼續介紹 Scribbletune 中實用的特色功能 - Session 及 Channel。 Channel 昨天我們講到了 Clip,也就是音樂...

2018-11-11 ‧ 由 Gary 分享
DAY 28

27. Wavesurfer.js

第 27 篇了,旅程也到達了尾聲。最後我們來玩玩一些音樂視覺化的套件吧~ 這是什麼? Wavesurfer.js 是一個建構在 Wab Audio API 之上...

2018-11-12 ‧ 由 Gary 分享
DAY 29

28 Rythm.js

最後一個套件,來個歡樂、輕鬆、簡單又有點ㄎㄧㄤ的套件吧 XD 這是什麼? Rythm.js 是個可以讓網頁依據指定音檔的高低起伏,隨之舞動的套件,透過特定的 c...

2018-11-13 ‧ 由 Gary 分享
DAY 30

29. Javascript 套件選集 - 總整理

本旅程的第二部分 - Javascript 套件選集 也結束啦~同樣的來回顧一下這兩個禮拜我們玩了什麼吧! Live Demo 我們一開始認識了 tonel...

2018-11-14 ‧ 由 Gary 分享