如何利用Axure來實現(xiàn)創(chuàng)意產(chǎn)品設(shè)計或者某些小功能？本篇文章里，作者嘗試通過Axure設(shè)計了一個可以彈奏與播放的鋼琴音樂盒。感興趣的可以來看一下，也許會給你一點啟發(fā)。

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

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

一、發(fā)聲

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

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

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

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

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

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

二、編曲

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

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

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

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

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

1. 首先需要添加一個【全局變量】。
2. 當(dāng)要往【文本域】中添加內(nèi)容的時候，先獲取當(dāng)前文本域的內(nèi)容，賦值給變量。
3. 在變量后面追加上要添加的文字。
4. 將追加了文字后的內(nèi)容再次復(fù)制給變量。
5. 將變量值設(shè)置為【文本域】的文本。

我們再看一下這個產(chǎn)品是怎么實現(xiàn)的：

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

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

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

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

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

三、播放

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

1. 讀取編曲區(qū)文本的第一個數(shù)字，判斷這個數(shù)字是什么，就在【內(nèi)聯(lián)框架】打開對應(yīng)的音頻鏈接播放音符。
2. 播放之后，讀取編曲區(qū)文本的第二個數(shù)字，根據(jù)數(shù)字在【內(nèi)聯(lián)框架】打開播放對應(yīng)音頻。
3. 以此類推，直到所有音符都播放完成。

這個思路有3個難點：

1. 怎么讀取指定文本指定位置的文字。
2. 怎么知道當(dāng)前應(yīng)該讀取哪個位置的文字。
3. 怎么讓這個邏輯循環(huán)起來。

針對這3個難點，方案是這樣子的：

1. Axure 提供了一個 JavaScript 的函數(shù)?charAt(index) 來讀取字符串中指定位置的字符，index 就是指定的位置，注意 index = 0，表示讀取第一個字符，1表示讀取第2個字符，以此類推。
2. 由于我們是按順序讀取的，所以可以通過添加一個【全局變量】來作為 index 來存儲當(dāng)前讀取的字符的位置，比如，變量值默認(rèn)為0，就會讀取第一個字符，當(dāng)我讀取完第一個字符時候，給這個變量值+1，這個時候變量值就變成了1，下一次讀取的時候，就會變成讀取第2個字符。
3. 這就是上文提到的動態(tài)面板循環(huán)播放，我們可以在動態(tài)面板每一次【狀態(tài)改變時】，就讀取一個字符出來并進(jìn)行播放。

這樣我們的思路基本就清晰了，接下來看一下具體是怎么做的吧：

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

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

1. 如果變量【step】剛好等于編曲區(qū)的文字長度，就退出當(dāng)前動態(tài)面板的循環(huán)，也就是停止播放。
2. 如果變量【step】小于編曲區(qū)的文字長度，則將 step 作為索引 index 從編曲區(qū)文字取出對應(yīng)位置的值。
3. 判斷取出的值是什么，就在【內(nèi)聯(lián)框架】打開對應(yīng)的音頻鏈接。
4. 最后給變量【step】加上1，這樣下次循環(huán)時，通過 step 就可以取到編曲區(qū)的下一個值，一直到 step 等于編曲區(qū)的長度，滿足上述第1點，退出循環(huán)，停止播放，這里需要注意的是，當(dāng)動態(tài)面板退出循環(huán)，音樂停止播放的時候，需要將【step】置為0，否則將會導(dǎo)致下次播放時出現(xiàn)異常。

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

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

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

至于編曲區(qū)的頻譜，其實也是通過另外一個動態(tài)面板的循環(huán)來實現(xiàn)的，相信看過《【Axure 動態(tài)面板】讓你的動畫變成“永動機(jī)”》的讀者應(yīng)該是很清楚怎么實現(xiàn)的，這個鋼琴的實現(xiàn)還是有多細(xì)節(jié)的地方，不過都不重要了，上面的要點，我相信已經(jīng)講清楚這個產(chǎn)品的實現(xiàn)邏輯了。

文章很長，感謝閱讀！