iT邦幫忙

鐵人檔案

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

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

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

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

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

DAY 1

00. 出發前準備

旅程開始前先聊聊天吧 不知道大家有沒有拜訪過 史萊姆的第一個家 ? 在筆者小時候,幾乎天天都會上去找一些小遊戲來玩:洛克人 X、史瓦特大進擊、2D CS 等,許...

2018-10-16 ‧ 由 Gary 分享
DAY 2

01. 基礎建設

馬上要開始介紹 Web Audio API 了,總要有個網站來呈現各種內容吧;既然要學東西,那就順便把不熟的 Vue 架起來玩一玩囉! 開始之前 筆者預期讀者您...

2018-10-17 ‧ 由 Gary 分享
DAY 3

02. Web Audio API

今天就開始來介紹 Web Audio API。 不囉嗦,直接上個 google doodles 的範例,還不錯玩吧~ 這是什麼? Web Audio API 是...

2018-10-18 ‧ 由 Gary 分享
DAY 4

03. Web Audio API - 節點關係

經過昨天的簡易小範例,應該對於 Web Audio API 大致的使用方法就不陌生了吧?今天就接著來介紹Web Audio API 的節點關係。 節點關係 如...

2018-10-19 ‧ 由 Gary 分享
DAY 5

04. 吉他定音器 - Part.1

介紹了幾天,也稍微玩了一些功能,是不是快受不了 Web Audio API 文件導讀啦 XD? 那麼就用已經玩到的部分,來做個簡單的吉他定音器吧! 吉他定弦 一...

2018-10-20 ‧ 由 Gary 分享
DAY 6

05. 吉他定音器 - Part.2

接著,今天就來把定音器完成吧! 依照昨天立定的計畫: 練習做出 可調整基準音 + 可設定調弦法 + 分別撥放單弦聲音 的吉他定音器。 開始依序完成吧! 基準...

2018-10-21 ‧ 由 Gary 分享
DAY 7

06. Web Audio API - 立體音效

今天要來介紹 Web Audio API 裡的 StereoPannerNode。由於是立體音效,內文中的範例及程式Demo,都建議佩戴耳機聆聽,效果比較好喔!...

2018-10-22 ‧ 由 Gary 分享
DAY 8

07. Web Audio API - 3D 音源計算

接著昨天的話題,今天就來玩玩 PannerNode 及 AudioListener,並在最後做出一個可以藉由拖拉控制位置的程式應用範例~同樣的,由於是立體音效,...

2018-10-23 ‧ 由 Gary 分享
DAY 9

08. Web Audio API - 音源 Part.1

音效處理節點玩了不少,今天就來看看一直忽略的音源部分能玩出什麼變化吧! 振盪器 Oscillator 到目前為止,前面所有的範例,音源都是透過 const os...

2018-10-24 ‧ 由 Gary 分享
DAY 10

09. Web Audio API - 音源 Part.2

延續昨天的話題,今天要來玩玩看麥克風收音! 麥克風收音 收音也不是我們網站想收就能收的,要先透過 navigator.mediaDevices 的 getUse...

2018-10-25 ‧ 由 Gary 分享