Audio Visual Experiments in Modern Web (2018 FEDC Manuscript)
以下的內容是在 2018 FEDC 演講時的手稿，跟現場稍微有所出入，但依舊可以搭配投影片使用。
大家好，我是欣嘉，英文是 Vibert Thio。雖然我也是工程背景出身，但這次是以藝術家的身份參與 2018 FEDC。這裡就不多談工程師對於藝術家的偏見了，但是我記得有聽過一個同學說：「我不常跟藝術相關科系的學生說話，但我下次會記得叫他幫我薯條加大。」
1. Digital Artist
我的其中一個身份是數位藝術家，最常創作的形式是在各式的環境中創作 Audio/Visual Art 結合聲音與影像的設計或是藝術作品。小至一個在手上的樂器，他可以感測使用者的手部動作，就像真正的樂器一般，產生音符、節奏，還有光纖配合律動的閃爍。
大至整個舞台的投影視覺，配合樂團現場的演出，去設計一個系統動態的產生大螢幕的視覺表演。我也曾經跟舞團合作，要現場擷取舞者身體移動的位置，並產生相應的浮空投影來結合舞蹈。也曾參與製作過一個節奏遊戲，是與八仙塵暴的傷友合作，用 kinect 偵測他們復健的動作，復健師要求的姿勢到位的話才能產生拍點，可以增加參與原本無趣復健療程的動機。
So, Front End?
講到這裡，你剛剛一定有偷喵了一下議程，看看講的題目，這到底跟前端到底有什麼關係？
回頭看一下：audio/visual (後簡稱 a/v) experiments in modern web。我就先從到底這裡說的 a/v是什麼意思與開始說起，當然最簡單的是以數位藝術家所看的 a/v art 來理解。一看到這個組合，你應該很容易就會想起 youtube 或是 mv 等，他們有音樂還有畫面，配合音樂人製作的聲音還有導演拍攝的視覺畫面。你也可能想到夜店或是演場會裡面 DJ 放歌加上聲光特效的場景，但我等下會說明，a/v 其實有更多更深的意涵。
2. A / V Art
要解釋一個複合名詞，首先得先有對於每個字的基本認識。要說明我認為什麼是 a/v ，得要先建立對於視覺藝術(visual art)和聲音藝術(sound/audio art)的概念。
Visual Art, Audio Art
視覺藝術大家應該都不會陌生。方法很多，我的說法是「他們(視覺藝術家)創造一些視覺經驗使其與觀者產生心理、身體上的作用。可能是描述一種場景或是一個故事」。
我解讀聲音藝術也是類似的邏輯，只是將上面的「視覺經驗」換成「聽覺經驗」。例如 2012 雪梨雙年展聲音藝術家 Pinaree Sanpitak 的作品《Anything Can Break》。
Audio + Visual ?
但是 a/v art 的本質並非只是 a + v ，而是探討這兩者更豐富深層的互動關係。另外一種說法是，剛剛兩種藝術形式創造的是視覺或是聽覺體驗，這裡不只想要將兩者放在一起，而是使其更內在的地方產生其他連結。
但是這樣說可能有點抽象，就來舉幾個簡單的示範性例子。
V -> A
首現是將視覺進行聲音化：若把上面這張圖片當作輸入，可以將裡面的每個 pixel 中的 RGB 給抽取出來，可能把藍色跟綠色的數值加在一起變成音高的數值，而紅色當作是音量的變化，就會變成一個視覺當作 input 而自動產生聲音的系統/作品。
A -> V
反過來當然也可以：下面的例子是在設計界的老祖宗 Oscar Fischinger 的作品，它配合一首歌的音符進行，設計不同的形狀與顏色來表達各種各樣的音色與音高。厲害的是，他當時並沒有電腦而是用手繪來硬幹，很扯。
A <-> V
將兩種邏輯加在一起，就可以很好想像一種狀況是兩種類型的訊號會來回的互動。
0 / 1
但是仔細想一下就知道，這樣的來回互動之所以可能，就是因為在現行數位科技的視角下，所有的聲音、影像訊號都不過是簡單的 0/1 經過複雜的 pattern (或說是格式)組合在一起。本質上都是一樣的東西，可以被複製、運算、轉化與結合。
A / V
所以當我以數位藝術家的身份來解讀、創作時，這個 audio 跟 visual 本為同根生的概念就把它寫成了這個「 a slash v 」的樣子，中文則是翻作是音像藝術。例如知名的日本音像藝術家池田亮司的作品，完全摒除了資料本身的意義，直接用亂數當作輸入，而有了聲音與視覺。
How?
但是只要是在這樣的數位環境工作，都需要一套工具，那我的程式語言是什麼呢？Processing 和 PureData (後簡稱 Pd) 是在這個社群裡面非常普遍使用的兩套語言。processing 主要用來創造演算的視覺效果，它是基於 java 並加上許多專門為視覺設計的功能。Pd 則是用圖形化的方式來寫作，專門用來創造即時的聲音系統。
這件作品就做 VTBB，也就是我 (Vibert Thio) 的小寶貝。它是我在剛開始練習數位技術創作時，老師阿亂給我的小作業。
可以看到裡面已經有了最基本跟使用者的互動，可以用滑鼠拖曳來產生新的方塊，而方塊會自己分裂並產生動作與聲音，在這裡，聲音跟視覺是同時被一個事件 (event) ，也就是觀者拖曳這個動作產生，是一體兩面的表現。但我很快就遇到一個大大的難題 ……
互動性使 A/V 作品很難分享
當我想要給別人看我的創作時，幾乎只能用錄影的方式。而且開發者平常一定有深有同感，就是在新的環境啟動一支程式相當是相當麻煩的事，更何況是一般的使用者。就算是包成 app，還要考慮到他使用的環境是手機還是電腦，很多東西都有可能會壞掉。那難題的解答是什麼呢？
3. So, A/V in Web?
答案呼之欲出，當然就是 Modern Web。現代網頁技術裡面，結合聲音、影像、互動性，我原本創作時所需要的元素一應俱全。更棒的是，網路之本為電腦之間的互動，網頁易於分享的特性更解決了我上面提到的難題。
所以我開始嘗試在 web 的環境來創作 a/v 藝術作品。過程中，發現除了上面提到所需要的元素以外，網路的連結使得很多奇怪的點子都跑出來，像是透過 server 同步表演、或是模仿 google docs 共編一樣與多人共同創作藝術作品。
Front/Back/DevOps
學習的過程中，慢慢瞭解對工程師來說，通常會把整個網頁的實現架構分成 前端/後端/DevOps 幾種來分析與分工。這個解讀模型的好處是，它本為分工而分，像是 DevOps 就是從前面原本只有前/後端之分時在裡面挑出需要維運、重複性、可以被系統化的工作而來的新分工。但是 ……
web 是一個複雜的整體，它有很多有趣的內涵。
橫看成嶺側成峰
從我這樣一個 a/v artist 的角度來看：
Web 可以說是一個創作的媒材，用來設計視覺、聽覺加上其他感官的綜合性體驗，甚至可以加上與使用者的互動。
許多作品若是單純用工程師分工的模型來拆解實作，反而會忽略了設計者在整體視覺、聲音設計的巧思，或者說這樣更能直接理解其原本的設計內涵。
並非取代
這裡我也需要強調，這個觀點並非要取代之前的前、後端分工，且實際在實作這樣的作品時可能也會需要那樣的架構，但是這樣的觀點在理解與構想這類的點子與專案時能有更有洞見。
例如這個作品由 google data art team 與 LCD Soundsystem 的美國搖滾樂團合作的 WebVR 互動 MV。
它可以讓使用者跟著行進的視角觀察其他人錄製的火柴人舞蹈，也讓每個觀看的人只要有器材就可以一起參與這個演出並把自己的舞姿放到 MV 裡面。解讀這個作品，除了實作時的前後端分工問題以外，也需要拆出視覺、聲音與互動性之間的關係才有可能進行設計。
工程師的浪漫
身為一個電機出身的工程師，我自己就會覺得前面的講法雖然簡單但是太過抽象。在信號與系統這個學門裡面，它把系統定義為一個有 輸入/輸出 (i/o) 信號，並對其進行處理的黑盒子。
以這個模型為基礎的話，就會變成下面的圖解： web 作為一個媒材就是要做出這樣的 web app 系統，有來自 user、檔案與網路傳輸的 input，還有 a/v 與其他各種可能的 output。
值得注意的部分是，當 a/v 這個 output 的對象是使用者的時候，理論上就形成了一個互動的系統了。我稱之為 AVIS (A/V Interactive System)。
從這裡開始，我們就可以更清楚的知道一個 AVIS 系統基本上需要執行哪些工作。像是視覺的輸出可能就會牽涉到前後端都要使用，這也是我為什麼會強調這是不同於前後端分離的觀點。
但是等下講得技術介紹，當然還是針對前端的技術為主。
4. Visual
首先是視覺技術，其中可能也是很多人都相當熟悉的名字，只是用一個新的觀點去認識他們（技術介紹本身不是這次 talk 的重點）。
HTML + CSS
其實光是基本的 HTML + CSS 就是一套完整的視覺技術，可以安排不同的文字、圖片等不同視覺元素，加上使用 CSS 進行更細節的排版與調色。很多早期的 net artist 也利用這些基本的 render 技術做出許多有趣的網站和作品。
例如 1999 的印度網路藝術家 Charu Maithani，就試圖使用最基本的 HTML、CSS、Hyperlinks 來創造互動的可能。許多人很早就開始探索網路視覺藝術的可能性，透過超連結的點擊，就好像在體驗一個虛擬空間中的裝置。雖然現在 VR 的頭盔隨處可得，這個聽起來可能沒有什麼，可是要記得當時後是在 2000 年前，大部分人連瀏覽器是什麼都不知道的年代。
<canvas>, Canvas 2D
在 <canvas> 物件裡面，Canvas 2D 讓開發者可以直接創造簡單的線性動畫。最基本的流程就是 setup/draw：
在 setup 這個步驟執行所有的初始化，並在 draw 裡面不段的循環。最簡單的解釋就是可以在 draw 裡面把一個圓圈的位置不斷做 “＋＋”，就可以產生移動的球球。甚至可以利用更複雜的演算法，製作出下面這樣精美的即時互動影像。
WebGL
GPU hardware accelerated.
但是在上面單一軸線執行的模式裡有很大的效能限制，若是要製作最基本的粒子系統，當物件數量超過一萬時電腦就會燒起來。最早會有這樣的需求是在遊戲領域當中，所有畫面本質上應該都是要 realtime 產生，因為不可能預知使用者的動作。所以效能的要求非常高。但是，大家又想要越高畫質越好，逐漸就有了 GPU 平行的算圖架構。現在已經有既定的 API，OpenGL。
其移植到 web 上就變成了 WebGL。這也使動態玩 3D 模型在網頁上變得可行。
Frameworks: Three.js, Pixi.js
以 WebGL 為基礎，就有了相應的 3D (Three.js) 和 2D (Pixi.js) 等不同的 framework 可以使用。他們把原本生硬的 API 轉化成更接近應用的情境，使藝術創作者。例如下面這個紀念 J.Dilla 的網站，就是一支使用 Three.js 來做的互動性 3D 影片。
Google 也推出一個可以讓 3D 模型創作者分享的平台 Poly，展示的基礎功能也是使用 Three.js 來實作。更有國際特赦組織，利用網頁來製作模擬的敘利亞雅監獄，讓使用者透過網站親身經歷裡面不人道的環境。
因為很喜歡日本的枯山水 (Karesansui)，我也用 Three.js 製作了一個網站，目的純粹就是回家可以將電腦接上投影機，在牆壁上打出動態生成的枯山水庭園，搭配冥想的木魚與噪音。
5. Audio
如同是覺得最底層是要控制螢幕上的像素，而聲音的最底層是要將一維的聲音訊號放進 buffer 裡面經由 DAC 轉成音響震動的訊號。網頁上最早的聲音技術是 <bgsound>，運作起來的原理跟 <audio> 不會差太多。它可以播放固定的音檔，也就是直接將檔案裡面的資料分解出來後放到電腦的 buffer，即便是在許多現在的網頁上，這也可以大概滿足七成以上的需求了。
但是 Web Audio API 的誕生依舊沒有馬虎。
Web Audio API
其最早是在 2011 年 W3C 裡面由 Chrome 的社群提出並維持，其設計的目的為了讓網頁中的聲音系統能更彈性，所以架構使用各種 node 作為基礎單位，可以處理各種訊號源 (audio source)，包括音訊檔案 (audio files)、振盪器 (Oscillator) 或是使用者輸入 (microphone)，也可以處理中間的訊號處理 (Filter、Gain、Effects)，到最後輸出，以上所有都可以用程式設計。甚至有人將網頁的聲音技術模擬如下圖：
這使網頁上可以彈吉他與鋼琴、試用各種效果器，甚至還有其他意想不到的可能。例如下面的例子，由 White Vinyl 製作的互動性音樂場景 Yume，就可以利用拖曳網頁中立體的幾何元素，來改變音樂中的不同效果。
Framework: Tone.js, Howler.js
但是基礎 API 的操作就跟 WebGL 一樣相當繁瑣，所以就會有其 framework，使載入音檔、製造樂器、設計音效、節奏/時間控制、訊號分析等流程都變得相對簡單。以 a/v 創作的角度來說，我認為最好用的是 Tone.js。但一般的不需要這麼動態設計聲音的前端可能會更喜歡 Howler.js。
Tone.js 的開發者 Yotam Mann 自己就創作了我也很喜歡的作品 jazz.computer。他用 scrolling 當中的上下比喻了情緒的 up 與 down，去讓聽者在一首歌、兩種心情鐘擺 scrolling。
Modular
對大家來說，JavaScript 當中 framework 與 modularization 的技術我就不用多提，當然我也是將聲音與影像做成不同的 module 讓互動保持彈性與穩定。主要使用的就是 Webpack + React 的實作方法。
6. Why?
說到這裡，我先說明了 “what” 的問題：「什麼是 a/v？」。解釋了數位觀點下，聲音與影像本質上的互通作為最這個概念最基本的假設。再來是用 a/v art 的角度看待 web，它就變成了一個創作的媒材，作品本身就變成了一個 AVIS (A/V Interactive System)。基於此，前端裡面最重要的輸出技術就可以分成視覺與聲音兩塊，部分回答了 “how” 的問題：「網頁中的 a/v 如和產生？」。但是 ……
Why you need AVIS?
從 a/v 創作的視角，也就是我的故事來切入這樣的 AVIS 系統設計。但是增加這方面的網頁可能性的知識對一個一般前端工程師有什麼用呢？
Browser Game
首先我先承認，這是不帶統計數據的一種不負責任假說：browser game 可能會是一個潛力的市場。雖然現在手遊當道，但在許多企業的 app 都趨於 web 化，只要效能的效果可以逐漸提升，遊戲市場的表現也有可能在 browser 裡面起來。
WebVR
雖然串流影片等內容不是我主要所指涉的 a/v 範疇，但是傳統的影片加上的互動之後就變成了 360 全景影片，跟 AVIS 的概念也可以相呼應。再配合更好的互動性設計與回饋機制就變成了流行的 WebVR，這裡面的產值雖然近期不被看好，但也不能小覷。
But, Business Model?
但你可能會說上面那些作品都太小眾，網路遊戲在網頁上的侷限太多，而 WebVR 只是少數人的玩具，有沒有真正的公司投入在做這相關的研究？相關的商業模式又是什麼？
第一個問題我肯定有，但是第二個，目前都還沒有明確的獲利模式，至少還不是大規模的。假如有的話，應該就不是由我來說這個演講了。
大部分前端一定都知道 google 在他們最重要的門面上放的，除了 search bar 以外，就是常常會出現的 google doodle。以前配合當天的紀念日、人物或是事件去做視覺設計。但近年更慢慢從單純的視覺設計變化成更多互動的小遊戲，像是這個嘻哈四十四週年的作品，就透過教你使用 DJ 盤來介紹嘻哈文化 ……
或是 a/v 作品，剛剛最初提到的 Oscar Fischinger 的生日時，也做了一個他的作品的互動復刻版。
而 Chrome Experiments 一直都在關注相關的實驗，並嘗試組織社群。當然他們的動機有很明顯的商業目的，並拓展他們瀏覽器的影響力，但不可否認的是，這些技術和應用的發展也慢慢被許多藝術家、開發者看到其潛在的價值。像是 AI 裡面的 image recognition 已經行之有年，但真正進到許多民眾的眼中的導火線，卻是 Quick, Draw! 這個網頁的互動遊戲。
另外順便推薦，我自己更喜歡的 Chrome Experiment：Infinite Drum Machine 利用 Machine Learning 降維分析，將許多日常聲音進行二維分類視覺化。
Real Companies
Who are using AVIS?
而實際上在使用 AVIS Design 在其網站上的公司也不少。我看到最明顯的有兩個，第一個是音樂科技公司，像是德國音樂製作軟體商 Ableton 就曾推出一個完整的互動網頁遊戲。它教你現代電子音樂的樂器、節奏、分軌、編曲等基本概念，除了富有教學價值之外，也是他們本身產品非常活潑的廣告。
第二個就是網路新聞媒體，傳統影音新聞所能傳達的效果有其限制，更不用說是純文字。台灣的新興網路媒體，報導者，特別設計一個專欄給這種網頁上的多媒體實驗，去嘗試不同形式的互動、影音報導。也是一種 AVIS 的實踐。
New Experience?
網頁內容不斷在多媒體化，但網頁底層的 HTML 與 elements 的邏輯並沒有太多改變，只是更多的嵌入式畫面還有 CSS Animation，讓元素們動起來。但十年後的網頁事體是什麼狀態？基本的 render 技術趨於自動化，切版、實作設計稿等估做可能會被許多 tools 漸漸取代。我相信 AVIS 的技術和創作手法帶來的豐富感官體驗可以部分回應這個問題，成為新的價值來源。
7. Community
當我最開始研究 web 這個創作 AVIS 的媒材時最主要的原因就是「容易分享自己的作品」。但後來發現另一個也很重要的現象：類似 FECD 這樣的活動，透過網路能夠集結工程師、設計師、新創公司 PM、甚至是藝術家，互相討論與分享；在 GitHub、 各種 Forum 等網路空間中也聚集了音樂人、工程師、設計師與技術家等人，更活絡的交流技術、創作手法與可能性。
8. Beact
說了這麼多「可能性」，也舉了很多的例子，最後就用我跟朋友創作的 Beact 當作結尾 AVIS 的範例。他的系統就是我所提出的 AVIS 模型中典型的構成，有 a/v output，而 input 則是 keyboard 和 mouse。透過鍵盤可以觸發每個字母來產生聲音與影像，後面的方格則代表一個固定進行的節奏，可以用滑鼠來控制哪些拍點要發出聲音。
特別的是，還有其他使用者曾經創作的成果、音樂片段也可以透過我們建置的 server 來分享。裡面的音樂，實際來自我做音樂的朋友們，包括音樂製作人杜蟲、電子樂團理化兄弟。所以這個 AVIS 體驗就變成了一種未來式的互動式專輯，進而抹除了聽眾跟音樂人之間明顯的界線，還可以與許多人進行共同創作。
9. Conclusion
最後是這次 talk 的結論。整個討論以幾個問題貫穿：
- What is AVIS on web?
- How to do AVIS on web?
- Why do I or you need AVIS on web?
- Who is using AVIS on Web?
以數位藝術角度來看， Web 是一個易於分享的畫筆 + 樂器。假如覺得這個說法太過詩意，也可以換句話說，web 是可以創造 AVIS 綜合體驗的媒材，比起 Front/Back/DevOps 的模型，這樣的角度更能理解 WebVR、Google Doodle 還有上面介紹的許多作品的創新之處（聲音、視覺、互動性與三者結合）。
創意/作品/經驗/想法易於傳播的特性使社群的行程多元活絡，也使進入這個領域變得更為容易，尤其是有工程北景的人，更鼓勵大家嘗試玩玩看。社群發展至今，已有許多瘋狂的、有趣的嘗試，除了好玩之外，更有新聞媒體、音樂科技公司實際運用，其潛在價值逐漸被發掘。
前端技術趨於自動化，核心價值可能會轉往更全面的體驗設計。從近年 UI/UX 的風潮就可以看到動畫、音效等重要性，工程師可能也需要具備設計 AVIS 的基本能力。
10. Takeaways
- 試著玩玩看 p5.js 與 tone.js，建立你自己的第一個 AVIS 系統。我之前也有寫一系列文章討論相關技術與進行小實驗。
- 若是還不了解 WebGL 或是 Web Audio API，該是時候了吧！
- 到我的網站 vibertthio.com 或是 github，可以找到我其他的作品與文章，還有以上相關的連結整理。
