2023年【Axure 創(chuàng)意教程】作為音樂白癡我在 Axure 上“彈”起了鋼琴

【Axure創(chuàng)意教程】作為音樂白癡，我在Axure上“彈”起了鋼琴作為非聞名的不務正業(yè)的產(chǎn)品經(jīng)理，最近喜愛通過Axure設計一些調(diào)劑生活情趣的小玩意兒，這次我?guī)淼氖侨绾斡肁xure制作一個能彈奏，還能播放的鋼琴音樂盒，雖然復古的設計讓它看起來更像電子琴，但沒關系，當你按下琴鍵，你聽，它的確發(fā)出了鋼琴的聲音。體驗傳送門

本文主要共享設計這款產(chǎn)品時的一些難點以及實現(xiàn)方法，旨在供應一種思路，只要你把握了這個思路，你完全可以在Axure上彈吉他、彈古箏，甚至彈棉花，所以本文不會把每個步驟都寫得特別詳實，假如你是那種喜愛照著教程復刻一個一模一樣產(chǎn)品出來的讀者，那么本文可能不太適合你。

一、發(fā)聲

首先我們要知道，Axure中目前是無法添加本地的音頻或視頻進行播放的（也可能是我才疏學淺，還沒有get到這個技能），所以，我信任許多人最感愛好的就是按下琴鍵的時候，這個聲音是怎么發(fā)出來的，說破了就不值錢了，其實，是用了Axure的【內(nèi)聯(lián)框架】組件。實現(xiàn)的思路是這樣的：

1）首先找到7個鋼琴音符的音頻素材。

2）把音頻素材上傳到網(wǎng)上，獲得每個素材的網(wǎng)址（上傳到音樂平臺沒有方法獲得純潔的素材地址，它們都會給你的素材套一個播放頁面，搞得你沒有方法獲得真正的素材地址，這是我遇到最大的一個問題點，由于這個問題我把這個設計到一半的產(chǎn)品擱置了一個多月，最終我是上傳到碼云Gitee上，才獲得每個素材的純潔網(wǎng)址，假如有讀者感愛好，歡迎留言，后續(xù)我可以單獨把這一步的操作整理一篇教程出來）。

3）在Axure頁面【負空間】拖入一個【內(nèi)聯(lián)框架】。

4）給琴鍵添加【單擊】的交互，觸發(fā)的大事就是在【框架中打開鏈接】，而這個鏈接，就是對應的音符網(wǎng)址。

按上述步驟完成設置后，在預覽的網(wǎng)頁中按下琴鍵，就可以聽到網(wǎng)頁播放出對應音符的聲音，以下的圖片就是內(nèi)聯(lián)框架在網(wǎng)頁中的樣子，實際上就是在內(nèi)聯(lián)框架中打開音頻鏈接，在打開的時候，網(wǎng)頁會自動播放這個音頻聲音，舉一反三，這種操作方式，可以用于產(chǎn)品中任何需要播放音效的設計，比如刪除的時候播放刪除聲音，或者設計嬉戲中物體碰撞時發(fā)出的聲音等。

二、編曲

當琴鍵被按下的時候，上方的編曲區(qū)會記錄當前按下的音符，就像下方這樣：

這個其實特別簡潔，上面的編曲區(qū)是一個【文本域】組件，在按下琴鍵的時候，只需要往【文本域】中添加對應音符的文字即可，但我信任這里確定有許多的新手會遇到一個問題，就類似下面的演示效果：

新手懷疑：我明明設置的是按下的時候給【文本域】【設置文本】，但是不知道為什么之前已經(jīng)填進去的文本總是會被清掉？

這里就需要分清晰【設置文本】和【追加文本】的區(qū)分了，我們都知道，Axure有一個【設置文本】的大事，當觸發(fā)大事時，指定組件的文本會替換成要設置的文本，所以才會消失上述效果，但我們需要的效果是，之前已經(jīng)輸入的文字要保留，我們只是需要在原來的內(nèi)容后面【追加文本】，但Axure沒有【追加文本】的大事，那應當怎么操作呢？

這里就涉及到【變量】的用途了，思路是這樣子的：

首先需要添加一個【全局變量】。當要往【文本域】中添加內(nèi)容的時候，先獵取當前文本域的內(nèi)容，賦值給變量。在變量后面追加上要添加的文字。將追加了文字后的內(nèi)容再次復制給變量。將變量值設置為【文本域】的文本。我們再看一下這個產(chǎn)品是怎么實現(xiàn)的：

1）添加【全局變量】【song】用來存儲編曲內(nèi)容。

2）給【文本域】添加【文本轉變時】【設置變量值】的大事，這一步設置完成之后，只要【文本域】的內(nèi)容發(fā)生轉變，【全局變量】【song】立刻就會同步更新。

3）給對應的琴鍵添加【單擊時】的交互，這里的交互需要做兩件事：

首先【設置變量值】，將【song】+需要追加的文本（1,2,3等音符），然后重新賦值給【song】，這樣就得到了追加后完整的內(nèi)容。給編曲區(qū)的【文本域】【設置文本】，文本內(nèi)容就是變量【song】。

這樣就能實現(xiàn)每次輸入都是在原有的文本基礎上追加內(nèi)容，而不是重置內(nèi)容的效果了。

三、播放

現(xiàn)在按下能夠播放音符，也能把每個音符記錄到編曲區(qū)了，那么怎么讓編曲區(qū)的樂曲完整地播放出來呢，這里就會用到動態(tài)面板的循環(huán)播放的特性，假如還不太懂的讀者可以先參考我的另一篇文章《【Axure動態(tài)面板】讓你的動畫變成“永動機”》。關于動態(tài)面板的循環(huán)播放設置我就不再贅述，直接說明這個連續(xù)播放的實現(xiàn)思路：

讀取編曲區(qū)文本的第一個數(shù)字，推斷這個數(shù)字是什么，就在【內(nèi)聯(lián)框架】打開對應的音頻鏈接播放音符。播放之后，讀取編曲區(qū)文本的其次個數(shù)字，依據(jù)數(shù)字在【內(nèi)聯(lián)框架】打開播放對應音頻。以此類推，直到全部音符都播放完成。這個思路有3個難點：

怎么讀取指定文本指定位置的文字。怎么知道當前應當讀取哪個位置的文字。怎么讓這個規(guī)律循環(huán)起來。針對這3個難點，方案是這樣子的：

Axure供應了一個JavaScript的函數(shù)

charAt(index)來讀取字符串中指定位置的字符，index就是指定的位置，留意index=0，表示讀取第一個字符，1表示讀取第2個字符，以此類推。由于我們是按挨次讀取的，所以可以通過添加一個【全局變量】來作為index來存儲當前讀取的字符的位置，比如，變量值默認為0，就會讀取第一個字符，當我讀取完第一個字符時候，給這個變量值+1，這個時候變量值就變成了1，下一次讀取的時候，就會變成讀取第2個字符。這就是上文提到的動態(tài)面板循環(huán)播放，我們可以在動態(tài)面板每一次【狀態(tài)轉變時】，就讀取一個字符出來并進行播放。這樣我們的思路基本就清楚了，接下來看一下詳細是怎么做的吧：

1）在【全局變量】中添加【step】變量，默認值為0。

2）在頁面的【負空間】拖入一個動態(tài)面板，并添加2個狀態(tài)，給動態(tài)面板設置【狀態(tài)轉變時】的大事，下方是部分設置截圖，整體的思路是這樣子的：

假如變量【step】剛好等于編曲區(qū)的文字長度，就退出當前動態(tài)面板的循環(huán)，也就是停止播放。假如變量【step】小于編曲區(qū)的文字長度，則將step作為索引index從編曲區(qū)文字取出對應位置的值。推斷取出的值是什么，就在【內(nèi)聯(lián)框架】打開對應的音頻鏈接。最終給變量【step】加上1，這樣下次循環(huán)時，通過step就可以取到編曲區(qū)的下一個值，始終到step等于編曲區(qū)的長度，滿意上述第1點，退出循環(huán)，停止播放，這里需要留意的是，當動態(tài)面板退出循環(huán)，音樂停止播放的時候，需要將【step】置為0，否則將會導致下次播放時消失特別。

3）給播放按鈕添加【點擊時】開啟【動態(tài)面板】循環(huán)大事，詳細如下：

4）信任你看出來了，第3點的截圖條件有點多，其實這個就是播放速度的推斷條件，所謂的播放速度實際上就是通過掌握動態(tài)面板的【循環(huán)間隔】來實現(xiàn)的。

通過以上4步，當我們點擊播放按鈕時，系統(tǒng)會推斷播放速度的選項以對應的時間來開啟【動態(tài)面板】的循環(huán)，當step小于編曲區(qū)的內(nèi)容長度時，每循環(huán)一次就會播放一個音符，直到step的長度等于編曲區(qū)的長度內(nèi)容，表示整首樂曲播放完成