基于HTML5 的Web Audio 技術(shù)實現(xiàn)手機版簡易鋼琴

錢 立

（四川職業(yè)技術(shù)學(xué)院 計算機科學(xué)系，四川 遂寧 629000）

0 引言

虛擬化電子樂器是很有趣的音樂軟件，大家可在PC 或手機上使用，虛擬鋼琴就是其中一種。以前設(shè)計的虛擬鋼琴主要有這樣幾種：Flash 版，網(wǎng)頁版，手機端Android 或iOS 原生代碼開發(fā)版。因技術(shù)趨勢，F(xiàn)lash 不再推薦使用。網(wǎng)頁版鋼琴設(shè)計思路主要是按琴鍵時加載相應(yīng)的音頻文件來發(fā)音。在這種方式下，若音頻文件較大，加載和播放較耗時，有時能明顯感覺到延時，不夠靈敏；若音頻文件過小，音效又較差。在手機安卓系統(tǒng)中可使用AudioTrack 來合成音調(diào)播放，但編程過程復(fù)雜。同時在安卓中設(shè)計鋼琴鍵盤也比HTML5 網(wǎng)頁界面復(fù)雜，控制起來也更麻煩。

Web Audio 是HTML5 中一個重要技術(shù)，使用該技術(shù)后可使得網(wǎng)頁版應(yīng)用或復(fù)雜的網(wǎng)頁游戲具備華麗的音效，包括一些空間聲響效果。本文使用該技術(shù)結(jié)合JS 設(shè)計出的虛擬簡易鋼琴有很好靈敏度和音效。

1 HTML5 的Web Audio 技 術(shù) 介 紹

Web Audio 采用了模塊化設(shè)計，這種模塊化設(shè)計提供了靈活創(chuàng)建動態(tài)效果的復(fù)合音頻的方法。一個簡單而典型的Web Audio 流程如下[1]：

(1)創(chuàng)建音頻上下文；

(2) 在音頻上下文里創(chuàng)建源( 輸入)：例如〈audio〉、振蕩器、流；

(3) 創(chuàng)建效果節(jié)點：例如混響、雙二階濾波器、平移、壓縮；

(4)為音頻選擇一個目的地：例如你的系統(tǒng)揚聲器；

(5)連接源到效果器，對目的地進行效果輸出。

圖1 Web Audio 典型流程

本文設(shè)計的虛擬鋼琴使用振蕩器運算得到不同音調(diào)發(fā)聲。使用到Web Audio 相關(guān)API 如下：

AudioContext(音頻上下文)代表由音頻模塊構(gòu)成的音頻處理圖。它控制其所包含節(jié)點的創(chuàng)建和音頻處理、解碼。使用其它接口前必需創(chuàng)建一個音頻上下文，一切操作都在這個環(huán)境里進行。

AudioNode(音頻節(jié)點)是一個音頻處理模塊，可以是音頻源、音頻輸出或中間處理模塊（比如音量控制器GainNode）。

AudioParam 代表音頻相關(guān)的參數(shù)，比如一個AudioNode 的參數(shù)。它可以設(shè)置為特定值或值的變化，并且可以在指定的時間之后以指定模式變更。

OscillatorNode(振蕩器節(jié)點)代表一種隨時間變化的波形，比如正弦波形。類型是AudioNode，功能是音頻處理模塊，可以產(chǎn)生指定頻率的波形。

GainNode 用于音量變化，是一個AudioNode類型的音頻處理模塊，輸入后應(yīng)用增益效果，然后輸出。

2 鋼琴界面設(shè)計

圖2 24 鍵鋼琴界面

設(shè)計的24 鍵鋼琴界面如圖2，這個界面使用HTML 和CSS 完 成[2]。 琴 鍵 樣 式key，白 鍵 樣 式whiteKey，黑鍵樣式blackKey，使用樣式疊加呈現(xiàn)出黑白琴鍵。

〈div class="main"〉

〈div id="key45" class="key whiteKey"〉〈/div〉

〈div id="key46" class="key blackKey"〉〈/div〉

…

〈/div〉

為了把琴鍵布置好，設(shè)置key 樣式為position:absolute;float:left;。然后使用JS 對每一個琴鍵設(shè)置樣式left 為不同偏移量，白鍵的寬度是手機屏幕橫屏?xí)r寬度的1/14，黑鍵寬度是白鍵的2/3，黑鍵高度是白鍵的一半。一定要給琴鍵賦id 值，便于定位鍵來確定發(fā)音頻率。

3 通過振蕩器使鋼琴發(fā)音

設(shè)計一個函數(shù)playSound(hz)來播放不同的音調(diào)。 hz 代表不同的音調(diào)，國際標準A 調(diào)是440.0hz。 這24 鍵琴音hz 用一個數(shù)組來保存，arrHz=[349.23,370.0,392.00,…][3]。

Web Audio 產(chǎn)生的音調(diào)波形主要有正弦波，三角波，矩形波，鋸齒波四種，但開發(fā)者可以自定義波型。這里設(shè)計了一種音效來模擬鋼琴發(fā)音后聲音逐漸消失的過程[4]：首先創(chuàng)建音頻上下文，指定音調(diào)為正弦波和頻率hz 后，再設(shè)置當(dāng)前時間音量為0，0.01 秒后音量變到1，然后從當(dāng)前時間開始播放音調(diào)，最后聲音在1 秒內(nèi)慢慢減低直到停止。參看代碼如下：

function playSound(hz){

//創(chuàng)建OscillatorNode,表示一個周期性波形（振蕩），指定頻率后表示一個音調(diào)

var oscillator = audioCtx.createOscillator();

//創(chuàng)建GainNode,控制音頻總音量

var gainNode = audioCtx.createGain();

//把音量、音調(diào)和目的地節(jié)點關(guān)聯(lián)。audioCtx.destination 通常表示音頻渲染設(shè)備

oscillator.connect(gainNode);

gainNode.connect(audioCtx.destination);

oscillator.type=’sine’;

oscillator.frequency.value=hz;

gainNode. gain. setValueAtTime(0, audioCtx.currentTime);

gainNode. gain. linearRampToValueAtTime(1,audioCtx.currentTime+0.01);

oscillator.start(audioCtx.currentTime);

gainNode. gain. exponentialRampToValueAt-Time(0.001,audioCtx.currentTime+1);

oscillator.stop(audioCtx.currentTime+1);

}

在手機端上為了實現(xiàn)觸摸屏幕滑動琴鍵發(fā)音，則需使用JS 實現(xiàn)TouchEvent 事件的監(jiān)聽。主要 監(jiān) 聽 三 個 事 件 touchstart，touchmove，touchend。touchstart 事件也可看著是click 事件，可實現(xiàn)單個或多個琴鍵按下時發(fā)音。為了判斷觸摸從一個琴鍵移動到另一個琴鍵，需要保存上一個產(chǎn)生touchmove 事件的元素oldEle，同時要使用document.elementFromPoint(x,y)[5]來取得當(dāng)前產(chǎn)生touchmove 事件的元素ele，后做進一

步判斷。關(guān)鍵代碼如下：

var oldEle = null;

keys[i].addEventListener(’touchstart’,han

dlStart,false);

keys[i]. addEventListener(’touchmove’, han

dlMove,false);

function handleStart(e){

e.preventDefault();

var touches=e.changedTouches;

var idx=e.target.id.substr(3,2);

play(arrHz[idx-45]);

e.target.style.backgroundColor="#9cf";

tmp=function(){

var obj=e.target;

if(obj.className=="key whiteKey"){

obj.style.backgroundColor="#ffe";

}else{

obj.style.backgroundColor="#444";

}

}//這里函數(shù)tmp 功能是用于還原琴鍵背景色

setTimeout(tmp,100);//此處琴鍵按下后背景

變色0.1 秒又還原

}

function handleMove(e){

var ele=document. elementFromPoint(e.

touches[0].clientX,e.touches[0].clientY);

if(oldEle==null){

oldEle=ele;

}else{

if(ele!=oldEle){

oldEle=ele;

}else{

return;

}

}

var idx=ele.id.substr(3,2);

playSound(arrHz[idx-45]);

}

4 測試運行及總結(jié)

為了使這個網(wǎng)頁應(yīng)用運行時有效果，可使用Chrome 瀏覽器打開該HTML 頁面，再按F12 鍵切換到開發(fā)者狀態(tài)，在右側(cè)開發(fā)者工具視圖中切換到手機視圖效果，這時鼠標放在頁面上會出現(xiàn)一個灰色的大圓點，這就代表觸屏?？牲c擊左鍵表示觸屏tap 或按住左鍵移動表示touchmove。這樣就可以發(fā)出類似鋼琴的琴音了，按琴鍵或在琴鍵上快速移動都有敏捷的響應(yīng)，發(fā)出的聲音效果也不錯。

如果想要直接運行在真實手機上，比如Android 系統(tǒng)，主要有兩種方法。 一種是使用HBuilder 開發(fā)工具，連接上手機，自動安裝好HBuilder 基座后，編寫好網(wǎng)頁應(yīng)用立刻就能在手機上運行出效果。另一種是在可開發(fā)Android 程序的Eclipse 或Android Studio 中創(chuàng)建Android應(yīng)用，在主Activity 中加入WebView 組件（全屏效果），然后通過WebView 組件加載本地HTML 網(wǎng)頁，并允許JS 執(zhí)行。這兩種方法對于Android 系統(tǒng)最終均可生成apk 文件用于正常安裝運行。

以往設(shè)計的虛擬鋼琴通常是加載音頻文件發(fā)音，隨著Web Audio 技術(shù)的完善提高，我們可采用其技術(shù)通過波形和頻率來產(chǎn)生特定的音調(diào)和音效。 使用HTML5 和CSS 設(shè)計鋼琴界面，使用Web Audio 與JS 結(jié)合實現(xiàn)發(fā)音效果，這能較容易地設(shè)計出響應(yīng)靈敏和漂亮音色的虛擬鋼琴。本文案例應(yīng)用在教學(xué)過程中，一方面提高了學(xué)生開發(fā)興趣，另一方面也拓展了知識，這個綜合性案例有很好的教學(xué)效果。