第十屆 佳作

web
JavaScript 音樂漫遊 - 30 天探索 Web Audio!
Gary

系列文章

DAY 1

00. 出發前準備

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

DAY 2

01. 基礎建設

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

DAY 3

02. Web Audio API

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

DAY 4

03. Web Audio API - 節點關係

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

DAY 5

04. 吉他定音器 - Part.1

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

DAY 6

05. 吉他定音器 - Part.2

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

DAY 7

06. Web Audio API - 立體音效

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

DAY 8

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

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

DAY 9

08. Web Audio API - 音源 Part.1

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

DAY 10

09. Web Audio API - 音源 Part.2

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