WRESIC 無名音樂語法產生器 我的第一個作品

起源

「無名小站」(wretch.cc)是台灣2005年至2013年間熱門的複合媒體平台,無名提供了部落格(網誌)、個人相簿、留言板、好友系統等服務,供使用者免費使用,在當年可說是部落格界龍頭,多少七八年級生回到家第一件事就是開電腦上無名呢!

許多使用者喜歡在自己的網誌中放置音樂播放器,讓前來逛網誌的使用者可以邊看文章邊享受音樂,但無名內建的音樂歌曲選擇不多,要自選音樂還必須購買無名小站VIP會員,無法滿足想要與眾不同的無名使用者。

在「Yahoo知識+」中,有非常多有關「如何在無名放音樂」的相關討論,但有非常多的回答者對於網頁語法都是一知半解,只是將其他人的語法複製貼上,或是不懂其語法參數沒有正確回答問題,導致真正需要語法的人無法正確放置音樂。

知識+上錯誤的回答

 

如果無名小站使用者要放音樂到網誌上,則必須自己輸入HTML語法,對於沒有學過網頁語法的人來說並不容易,只要有任何錯誤就會失敗(雙引號不對稱、tag錯誤等)。Yahoo知識+上有許多「如何在無名放音樂」的相關討論,我們可以直接使用別人設定好的HTML語法來置入音樂,但音樂播放器有非常多參數可以微調,包含歌曲、顏色、顯示大小等,如果不是非常了解參數很難客製化自己獨一無二的播放器。

以2005年當時IE6的介面為例,若要自己製作音樂語法必須經過以下5個步驟:

步驟1:將音樂上傳至無名相簿

步驟2:使用IE6,於相簿中點選檢視>原始檔

步驟3:在網頁原始碼中搜尋”mp3″,來找到mp3路徑
 

步驟4:將mp3路徑貼到HTML語法中

<embed src=”http://pic.wretch.cc/e/serv/video_player/player.swf?file=&<MP3音樂路徑>&autostart=<true|false>&repeat=<true|false>&volume=<0-100>&backcolor=<色碼>&frontcolor=<色碼>&lightcolor=<色碼>”></embed>

步驟5:將語法放置於網誌/留言板中

 

對於不懂網頁語法的使用者來說,「網頁原始碼中找到mp3路徑」實在令人眼花撩亂,讓許多人卡關、放棄,因此我們在2009年2月連同好友龍哥,架設WRESIC網站,希望讓使用者只需要點一點選一選,輕輕鬆鬆就能完成語法製作。

 

規劃與設計

為了針對找mp3路徑的步驟簡化流程,我們必須利用爬蟲來解析mp3路徑,取得mp3路徑後套用既有的語法格式供使用者使用,運作流程如下圖:

WRESIC簡化流程圖,藍色為原步驟,橘色為WRESIC步驟
WRESIC簡化流程圖,藍色為原步驟,橘色為WRESIC步驟

 

網站如下圖,使用者只需要透過圖形化介面點選即可製作語法,UI/UX感謝友人Celyn Xie設計:

WRESIC首頁
WRESIC首頁

 

使用者先將音樂上傳至無名相簿,接著填入含有音樂的相簿網址到WRESIC:

插入含有音樂的網址
插入含有音樂的網址

 

使用者可以客製化播放器外觀、大小等:

使用者可以客製化播放器外觀
使用者可以客製化播放器外觀

 

經過爬蟲解析後,即可取得完整的音樂語法:

取得音樂語法
取得音樂語法

 

如果使用者覺得單純播放器太單調,我們於2009年6月推出WREBOX,使用者可以自選底圖並搭配顏色做出獨一無二的音樂播放器:

客製化WREBOX底圖
客製化WREBOX底圖
WREBOX成品
WREBOX成品

 

使用者取得音樂語法後,可以自行貼到無名小站中的網誌、相簿、留言板等。

 

遭遇的困難

網站上架後,解決了不少人的困擾,2009年3月WRESIC開始湧入大量的使用者製作語法,這時候遇到了第一個難題:「ERROR 999」

雅虎錯誤999,無名小站在2007年被Yahoo合併,因此無名小站也適用Yahoo的防禦機制
雅虎錯誤999,無名小站在2007年被Yahoo合併,因此無名小站也適用Yahoo的防禦機制

 

解析mp3路徑的爬蟲每分鐘約300次以上的存取,已超過正常人瀏覽的速度,我們發現在一定時間內多次存取無名小站,會被Yahoo判定為異常攻擊行為,採取封鎖IP並禁止瀏覽數小時,WRESIC曾因為這個問題停機了幾天。

為了分擔廣大使用者的流量,我們將爬蟲分散的放置在30個不同IP的伺服器上,並透過後台系統計算每隻爬蟲單位時間內的存取量,當有使用者需要解析mp3路徑時,後台系統會依照爬蟲的存取量來分配解析工作,藉此應付大量的使用者,如果有爬蟲出現ERROR 999,後台系統將會讓其爬蟲休息1小時,這一切都由系統自動管理與運作。

後台系統上的30個爬蟲分擔工作
後台系統上的30個爬蟲分擔工作

 

UI/UX、功能進化

其實WRESIC在友人Celyn Xie設計前有一個舊版介面,可能比較多人有印象(舊版介面如下圖):

WRESIC舊版外觀
WRESIC舊版介面

 

由於舊版版面將所有選項列出,且較多都以文字敘述,使用者必須反覆操作才能製作出想要的外觀,這對於新使用者來說非常不友善,因此在上架一年後推出新版介面,每個步驟分開在不同選單中,降低學習門檻。此外,WRESIC也逐步推出附加功能,讓使用更簡單:

  • 後續逐步教學:
    產生語法後,一步一步提示使用者如何將語法放到部落格
  • 錯誤偵測提示:
    當使用者的相簿鎖定導致爬蟲無法解析時,將會出現提示告知使用者,並教導使用者如何開放相簿
  • 及時預覽功能:
    讓使用者預覽播放器放到部落格時的樣子
  • 抓取歌名功能:
    自動將歌名自動放置在音樂播放器前

 

後續逐步教學
後續逐步教學

 

 

周邊效應

WRESIC上架後廣受好評,眾多部落客相互推薦,不過也開始陸續出現功能與介面相似的網站。

WRESIC部落格介紹,以玩樂+為例
WRESIC部落格介紹,以玩樂+為例

 

WRESIC部落格介紹,以月光下的嘆息為例
WRESIC部落格介紹,以月光下的嘆息為例

 

功能與介面相似的網站:

相似的網站:WreMusic
相似的網站:WreMusic
相似的網站:Site Easy Copy
相似的網站:Site Easy Copy

 

 

成果

WRESIC上架後,降低了語法製作的門檻,每天製作音樂語法超過5萬人次以上、假日可達10萬人次使用:

WRESIC後台系統監控畫面 (2010/6/15截圖)
WRESIC後台系統監控畫面 (2010/6/15截圖)

 

WRESIC的2010年9月至2011年12月的Google Analytics紀錄,圖中峰值皆為每周六,其中2011年5月14日達最高峰152,669瀏覽量:

WRESIC的2010年9月至2011年12月的Google Analytics
WRESIC的2010年9月至2011年12月的Google Analytics

 

以2011年5月14日當周為例,平日(一至五)瀏覽量高峰落在晚間19:00至21:00,假日(六日)瀏覽量落在中午12:00至晚間20:00:

WRESIC每天最大流量圖表
WRESIC每天最大流量圖表

 

 

後續

無名小站隨著新社交平台崛起漸漸式微,Yahoo於2013年12月宣布關站,WRESIC也隨之結束營運。

 

 


發表迴響