案例分享:加點播播 — 打造台灣首屈一指的線上公播音樂服務

Simon Asika
Oct 13 · 7 min read
Image for post
Image for post

近年來串流音樂流行之後,線上商業公播服務也慢慢走出自己的市場。由於音樂版權的複雜性,一般個人收聽的服務是很無法用在商業環境公播的,例如Spotify就明確的表達其相關付費方案不可使用在營業場所。若商店想要輕鬆的尋找好用合適的店內背景音樂,在過去選擇並不多。

我們的客戶《加點創意》已經合作了好幾年,過去幫助他們打造了台灣最大的自造者與工業知識論壇《AddMaker》,一直以來都嚐試替他們以先進的技術打造好用的網站系統。這一次要分享的,是台灣最大的開放式商用音樂授權網站所推出的《加點播播》公播網站。

Image for post
Image for post
Image for post
Image for post
加點播播首頁

加點播播資訊

龐大的曲庫基礎

加點創意原本就長年經營了音樂版權販售相關的事業,旗下的創作藝人與樂手非常多,因此累積出數十萬首音樂的曲庫。由於這些曲庫早已存在,且原有資料庫內記錄了關聯的音樂家資訊。我們的首要工作是打造一個管理介面,可以有效控管大量音樂資訊。

Image for post
Image for post
此圖非真實後台且資料已屏蔽

早期的後台是另外委外開發的,有嚴重的效能問題,我們重新設計了後台架構與外觀,不只讓新後台在視覺上煥然一新,也大幅提昇效能,音樂的搜尋與過濾,都能控制在 100ms 以內。同時也讓音樂家上架的審核工作更輕鬆,在同一個介面就可以快速審核多首音樂。

全自動轉檔

為了試聽與各種用途,上傳音樂後,必須在網站上擁有以下多種版本:

  • 原始WAV檔
  • 公播用mp3檔
  • 含音效浮水印的試聽用mp3檔
  • 某些版權音樂會提供分軌的zip包

由於不可能要求每個音樂家都要自行轉檔(也可能會有轉檔品質的問題),因此我們預先在程式中設定好轉檔參數。上傳音樂後,程式會自動轉出必要的音樂上傳到雲儲存空間做保存,省去大量的人工時間。

除此之外,我們也可以在音樂上傳後,自動分析出音樂的時間與計算波型圖。

Image for post
Image for post

播放器設計

公播網站,最重要的就是播放器。由於加點播播的某些特殊性質,我們沒辦法直接用市面上已有的聲音播放程式套件,因此播放器是自己重新寫出來的。

Image for post
Image for post

這個播放器直接調用HTML5原生的Audio功能,但是另外附加了播放清單功能,可以提供隨機/循序播放、單曲與清單循環等模式。使用者在播放的過程中,可以往前或往後跳轉音樂。

較可惜的是在最終考量下,沒有製作 CSR 架構,而是傳統SSR伺服器輸出HTML,因此只提供單頁播放,一旦跳轉頁面就會中斷音樂。

嚴謹的錯誤還原機制

營業用音樂播放器,最重要的是一整天的長時間播放,不能出現中斷或暫停,播放器本身要有錯誤還原與重試能力,這也代表,網頁會被打開一整天,不做任何刷新。

為此我們在編寫播放器程式時,非常嚴謹的控管記憶體使用與釋放,經過長時間測試,可以確保沒有殘留的變數或陣列會造成Memory Leak。除此之外,一旦偵測到任何播放錯誤或網路不穩,播放器都會在5秒後重新連結,並且嘗試10次。確保在商家人力繁忙吃緊的時候,不用再花力氣跑回來按重新整理。

後台也做了錯誤監測機制,一旦有錯誤就會被詳實記錄下來,讓我們可以了解每一台手機或電腦播放時可能出現的問題。

Image for post
Image for post

測試的時候,我們與加點創意的辦公室,連續播了網站上的音樂好幾個月,以實驗網站應有的穩定度。據說最高記錄開著頁面早晚24H連播一個禮拜,才因為手機瀏覽器自動關閉而中斷。

打包下載

有些商家網路不夠穩定,無法長時間以串流方式播放音樂。我們也提供歌單整包下載服務,可以直接打包成 zip 檔,下載到本地端用自己的播放器播放。由於我們採用 Zip Stream 即時邊載邊壓縮,每個人的清單下載時可以節省伺服器的空間,不必製造大量暫存檔。下載時還可以立即產生PDF的授權書,證明播放的權利。

Image for post
Image for post

點數機制

在早期企劃中,加點播播是採用點數的方式購買播放時數。因此後台另外建置了功能完善的點數管理機制,與點數歷史查詢,所有的扣點或加點都會被記錄下來,可以有效追查點數來源與去向。

Image for post
Image for post

而播播音樂家可以依照其音樂被播放的時數,獲得收益,如下圖收益計算

Image for post
Image for post

為了詳實記錄播放時間並計算音樂家的播放時數,每首音樂被任何一位會員聽過,在系統上也都有一份記錄,可以依照年月調出播放總記錄。

Image for post
Image for post
Image for post
Image for post
會員收聽記錄與單曲被播放時間記錄

而最後,前台會員則擁有個人的收聽統計,可以了解到自己被扣多少點數。

Image for post
Image for post

不過以上的點數機制只存在第一版的企劃中,雖然功能已經開發完善,但後續已經改用別種方式收費了。

歌單與音樂搜尋

加點播播的公播音樂,最好用的一點在於大量的編輯嚴選歌單。就像Spotify一樣,每天打開網站,選擇一個歌單,就可以輕鬆的開始播音樂。

Image for post
Image for post

而歌曲搜尋也建立了大量的 tag 與 Metadata,可以根據期望的音樂風格與類型篩選各類型音樂。

Image for post
Image for post

廣播帶插播功能

加點播播的另一個實用功能,是商家可以插入自己的廣播帶,類似於定期店內廣告。可以一次上傳多個廣播帶聲音檔,再設定播放頻率與順序,就能在每幾首歌之後,插入一個店內優惠的廣播等資訊。

Image for post
Image for post

歌曲防盜連

由於HTML的特性,音樂很容易從瀏覽器抓出Source URL,就有可能被分享出去或重複下載使用。我們所有版權相關網站,皆採用Presigned-URL技術,可以保護網址只被呼叫一次後就失效。因此當播放器取得音樂後,該音樂的網址就會失效無法再次下載。當重新播放同一首歌時,伺服器才會再次產生一組新網址,同樣的也是播放後即失效。

Image for post
Image for post

對於版權資源防盜,歡迎參考我們的另外兩篇文章:

結論

整體而言,加點播播在我們的作品中,並不算規模特別大的網站,但加點創意委託我們做的網站,常常都要是用到各種有趣的技術與架構設計。是很值得分享的案例。

比較可惜的是專案規模不算特別大,多方考量下沒有實作更多現代化串流音樂商的功能。不過對於一般商家的營業用店播音樂來說,算是非常夠用的。

另一方面,我們也已經開始著手加點播播App的開發,預計在App開發完成後,可以提供更多網站上所沒有的功能,例如手機端背景播放等等。

如果你們想要尋找高品質的店播音樂服務,歡迎前往《加點播播》網站。如果你們也想製作網站,有許多疑難雜症需要專業廠商協助解決,歡迎聯絡我們

Image for post
Image for post

夏木樂網頁設計-分享空間

NEW HORIZONS AND BEYOND

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store