楠木軒

Axure教程:實現網易雲音樂有聲播放效果

由 司徒元基 釋出於 科技

網易雲音樂大家應該都有用,它的音樂播放效果不知道你是否有注意過。本文作者介紹瞭如何用Axure實現網易雲音樂有聲播放效果的操作步驟,以及實現過程中的一些注意事項,與大家分享。

為了方便講解,我們首先在桌面新建一個資料夾,命名為音樂。

1、將自己想要演示播放的MP3音樂檔案放在這個資料夾裡面2、給播放頁新增一箇中繼器

隨便命名,我給它命名為【音樂地址連結器】,用來連結播放本地音樂檔案。並將此中繼器設定為隱藏。

3、選中播放按鈕,給播放狀態按鈕新增互動事件

在單擊事件中再增加“框架中開啟連結”互動事件,勾選【音樂地址連結器】中繼器,選擇連結到【連結到URL或檔案路徑】,檔案路徑輸入剛才的音樂名稱及字尾,如:怎麼做怎麼過怎麼活.mp3。

同理,給暫停狀態按鈕新增互動事件,再增加“框架中開啟連結”互動事件,勾選【音樂地址連結器】中繼器,選擇連結到【連結到URL或檔案路徑】,檔案路徑輸入空值,即不開啟什麼連結或檔案,實現停止不播放音樂的假象。

4、點選頂部選單【釋出】-【生成HTML檔案】

選擇剛才桌面建立的資料夾【音樂】,點選【確定】生成HTML檔案。

5、最後,生成的播放頁

開啟桌面的【音樂】資料夾,選擇並開啟生成的播放頁.html檔案(你的原始檔裡面的播放頁命名什麼,就開啟哪一個)。

此時,點選播放就能聽到音樂播放聲音的效果了,再點選暫停,音樂即停止播放。

溫馨提示
  1. 在原始檔直接點選【預覽】,是無法聽到音樂的播放效果的,只能生成html檔案後再開啟此html檔案。
  2. 音樂的播放效果,是無法實現播放到一半暫停,點選繼續播放音樂,只能重新開始播放。
#關聯文章#

Axure教程(中級):網易雲音樂聽歌識曲效果模仿#

本文由 @火星人~艾斯 原創釋出於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議