2014年3月14日 星期五

用jQuery和AJAX讓你的音樂播放器不中斷

原文,作者Tony Zeoli,寫於2013年1月13日。 (http://netmix.com/making-your-audio-player-persistent-with-jquery-and-ajax/2013/01/13/5557/#sthash.KiVxWFa3.zWeOPKbV.dpbs)

什麼是一個音樂網站最重要的特色?

哎,別讓我們那麼容易考倒你,好嗎? 還在想?

好吧,讓我們幫你一下,當然是音樂播放器呀!

如果你有一個音樂網站,那你就需要有一個可運作的播放器,你的聽眾才能夠播放在你網站上或是在你手機網路應用程式裡的音樂(注意,我是說手機網路應用程式,不是手機應用程式)。在提供這些音樂單曲時,沒有什麼是比在瀏覽網站頁面時歌曲被中斷還要更令人抓狂的事了。那基本上意味著你無法使用任何播放器,你必須使用某種可維持延續性的東西來橫跨所有網站的頁面,允許在沒有明顯中斷的動作中瀏覽時,聆聽體驗不會改變。


等等,我們剛剛是說使用者能夠在頁面之間瀏覽,同時音樂播放器保持不變,而且它還不會干擾影音串流? 是的!那就是我們所說的。在多年的醜陋彈出播放器,和扼殺你網站SEO的.swf封裝器裡的Flash播放器之後,它終於是可能的了。許多網站現在都在使用它們,有些甚至還為WordPress以增強的音樂播放器體驗製作了主題,以至你可以免費或非常低的代價取得它們,相比於客製發展。Stylico - Dj Template就是以在左側欄,持續運作的HTML5播放器為特點。

在進到持續運作的影音播放器如何運作以及為什麼能這樣之前,這裡是ㄧ些更多成功使用這種播放器的範例網站。


8tracks.com (http://8tracks.com/)

手工打造網路電台最好的網站,其中使用者產生的播放清單正風靡時下,8tracks.com最近轉變成了持續運作的音樂播放器體驗。這項成就讓聽眾在瀏覽網站並追蹤他們最愛的DJ同時,得以享受不受間斷的音樂。這無可厚非地增加了與8tracks的參與度,然後就是,聽他個好幾小時。看一下底下截圖中的播放器,在底下。(作者是8tracks.com的顧問且在這家公司裡頭持有股份。)




Beatport.com (http://www.beatport.com/)

其中一個最早且最好,不中斷音樂播放器的實踐,Beatport首先以完全的Flash體驗發創。HTML5/CSS3和jQuqry的進步看著Beatport將他們整個體驗轉換成SEO友善的網站。這很聰明,兩個原因。第一,它改善了Beatport網站的搜尋引擎最佳化。Flash對於搜尋引擎去爬行是惡名昭彰地困難,因此轉換體驗至HTML能幫助Google、Bing和其它搜尋引擎有效率地爬行這個網站。

第二,使他們的音樂播放器能夠在Apple iPhone上運作。當Apple決定不支援Adobe的Flash播放器插件時,Beatport顧客就無法在iPhone或iPad上從現存的Flash網站播放音樂。這迫使Beatport快速地創新並想出一個為手機網路的方案,你能夠從以下貼上的截圖看到。



在Beatport首頁播放任何單曲,那首單曲就會被加到可以在亮綠色的「add to cart」按鈕右邊的下拉式箭頭中找到的播放清單裡面。你可以來回跳動並暫停或播放你選擇的單曲,然後還會有一個帶有游標,那首單曲的視覺代表在讓你知道你在那裏的時間軸裏頭。接著試試在頁面之間瀏覽,你會看到播放器持續地保持不動,而且音樂一直在播放。

注意這個體驗如何相似於iTunes,它總是有一個播放體驗在他們的可下載軟體裏,給予這網站的造訪者有能力去播放一首單曲並在整個商店或他們的保存庫裏頭瀏覽,如下所示。



為使用者找到一個方式在瀏覽網站時不受困擾地去聆聽音樂是Beatport其中一個對它敵人的競爭優勢,許多它的對手仍舊使用彈出播放器,而它基於一些理由會是有問題的。你可以在以下DJDownload網站截圖裏看到,彈出播放器擋住了視線。它不只彈出還遮住了頁面左側,造成使用者去瀏覽這網頁是很困難的。因為彈出播放器是在自己的瀏覽器視窗裏頭,只要在主頁面上點擊就會把主頁面帶到前面來,然後留下播放器在它的後面,讓它變得更難去使用。今天,一個音樂播放器應該總是在你的網站上保持不變。技術是可達成的,你只需要找到合適的開發者去讓它實現。




Pandora ① (http://www.pandora.com)
①因為授權限制,除了美國、澳洲和紐西蘭之外,其餘地方的訪客皆無法造訪。

另一個不中斷音樂播放器的成功使用在Pandora網站上。Pandora是其中一個在網路上最火熱的串流電台服務。這個實踐也是同著jQury和AJAX的HTML5/CCS3,兩種是可在瀏覽器中不停下音樂地觸發播放和讀取新頁面資訊的方法。不管你有沒有更換你偏好的電台或是點入你的使用者檔案裏頭,音樂播放器都會保持不動。





藝文人網路和獨立音樂發現的老爺爺,Reverb Nation最近也轉換了他們的網站和音樂器體驗。在這裡,不同之處是播放器是在頁面的下方而非上方。這是一項不同的採取策略,我們想知道當他們在計劃這特點時,什麼使用者測試是沒有被揭露的。基於頁面上位置的使用會帶來增加或減少? 我們想得到一些在這方面上的回饋。請你以在不中斷播放器體驗的放置上的想法,留給我們評論。哪一種對於使用者體驗更好? 頁面的下方或是上方?




新的MySpace已經登場,而它也有新的播放器體驗。如你所見,所有我們已聽過的標題都在可左右捲動的滑標裏頭。播放器坐落於頁面的底部,相似於Reverb Natoin。所有頁面以AJAX讀取,使得播放器不中斷。



這兒是new.myspace.com影音的視野。在任何單曲上點擊就會在頁面底下的播放器中播放,播放清單能夠與其他new.myspace.com的成員建立並分享。當然,沒有Facebook或是Twitter的整合,在考量競爭格局的情況下是可以理解的,但那將會使MySpace更為困難地去贏得社交成長。你不能從MySpace到Facebook或Twitter等等去跨貼文,所以MySapce必須決定他們是否要走向那條路。不過,我們越來越離題了,回到播放器議題。
②Myspace現已和Facebook、Twitter整合



過去至少17年透過我們音樂播放器經驗的簡短概覽

當不中斷音樂播放器在可下載桌面客戶端(iTunes)或是浸浴在Adobe Flash體驗裏頭已可利用很長一段時間,你看到他們被含入網路裏作為不中斷網路APP是才最近幾年的事。還有,就像所有在它之前出現的音樂播放器,要去實踐不是那麼容易。我是說,這不是一件全然隨插即用類型的事情,你必須利用一些東西來正確地實作它們。我們會說到那裏的,但讓我們先以一點小歷史開始。

當我們首先在這市場裏頭開始,串流音樂最廣為接受的方式是從Real Networks購買一台串流伺服器或是從一家投資在這技術裏頭的公司在一台伺服器上租用空間。使用Real的伺服器技術,你可以14.4kbps的速度廣播,今天10mbps下載速度的一小部分。

早期音樂播放器是相單簡陋的,它們只能算是一種串流音樂的工具,沒有其它太多。底下第一張圖片是Real Player 2.0,在1996年釋出。事實上,Netmix使用這個播放器串流了我們第一個DJ的混音作品,當我們在1996年發行的時候。



這裏是Real Player最後版本,第16版的一瞅,有不中斷播放器體驗。這軟體也扮演著帶有其它進階特色的媒體庫。如你看到的,Real Player已經在過去至少17個年頭裏大大地進步。



在帶寬變便宜之前,Real Networks會在網站上為一個十年的更好部份增強音樂(體驗),在因為HTTP、UDP(用戶數據報協議)、和RTSP(即時串流協定)被授與過時之前。在那個時候,微軟會與Real Networks競爭,產出了一個對著Real Audio的競爭者並稱它為,Windows Media。

這裏是原始的Windows Media Player。


最新版本是Windows Media 11
③Vista和XP是11,Windows 7、8、8.1則是12。



不被專美於前,Apple以它的QuickTime串流科技加入這個派對。全部都需要使用專用的串流伺服器去傳送資料封包給他們個別的桌面客戶端,而它們需要已被下載且安裝在終端使用者的機器上。有專利且昂貴(雖然所有公司皆提供免費但有限制連續連線次數的版本),這些產品成為需要一種用來串流為著公司公告、線上訓練、和網路研討會,同時擁護他們內容安全的網路廣播方法的公司寵兒。

這棵大樹在九零年代始終一直控制著串流音樂,直到MP3格式打斷了現狀。同時,Adobe將音樂播放器功能放入了它的Flash軟體開發套件,而它提供了一個建立沉浸式、互動式音樂播放器體驗的方法。在Flash中基於向量的工具給了設計者和開發者創新的許可去使用獨特且高度風格化,可橫跨整個網站持續不變的播放器。

縱使Real Networks發展了具有專利的標記語言-SMIL-去嵌入網頁和其它多媒體到Real Player中,Flash仍就大受歡迎,作為實作音樂到網頁體驗裡的最好方法。以Flash,任何一個人都可於頁面間瀏覽時,在聆聽一道連續且不會突然中斷的音樂串流下,遨遊可使用Flash的網頁。

dewplayer是一個設計者和開發者如何使用Flash去建立精密和輕量音樂播放器的好例子。播放器有許多選擇,從迷你(Mini)到被稱為播放清單(Playlist)的,就是展示一有許多檔案的清單去播放那種。以下在清單底下的播放器出現了一個仿黑膠唱片,實際上它每次一首新歌被播放時才從白色盒子後面冒出來。



要了解複雜的Real Audio科技如何為開發者使用,看看這個在2002年發行的Real Networks產品導覽吧,在一個仍運作的服務網站找到的。然後,這裡是如何使用Flash MX建立Flash音樂播放器的教學。

我們注意到Beatport曾經使用過Flash,整個網站是透過含有可播放網站並讓它有互動性的所有程式碼與圖片的.swf檔案來載入瀏覽器的。當Flash今天仍舊被使用,HTML5和jQuery能夠在標準的網頁上給你相似的功能,不需要載入專門的檔案去執行整個網站。你可以想見持續更新許多或許會執行大型網站的.swf檔案有多麼昂貴。即便這樣的成本,有些人仍偏愛建立只有Flash的體驗,但他們在過程中犧牲了搜尋引擎最佳化的最佳實踐。

一名就每宋的使用者曾針對Beatport從Flash到HTML5的移植表達了他的錯愕,為什麼要離棄Flash? Google是一個具權威性的搜尋引擎,它的網路爬蟲-搜查所有網站以對它們的內容和相關性建立索引的機器人-無法滲透Flash的.swf封裝器去給在Flash體驗裡的文字建立索引。當然,有變通方法指定一個瀏覽器去掃描將匯入文字到Flash裡的檔案,但當你只需要建立一個完全HTML5的體驗,而且不需要對Flash的搜尋引擎最佳化奮鬥時,這麼做就相當有問題。最後,建立一個HTML5體驗也比雇用一名時薪175美金的Flash開發者還要便宜。有些人或許會說Flash科技已活得比它對完整端對端網站的實用性還長了。

我們正處在Google搜尋能力和它爬蟲需求已降低沉浸式Flash體驗必要性的時候,隨著Flash在影音工業上支配性的減少,哪一種科技能提供相似的音樂播放器體驗? 現在,有javaScript(已進展可提供方案)。使用HTTP、UDP或是RTSP,任何人皆能夠藉由嵌入javaScript在他們的網站上以及從網路伺服器串流音樂給聽眾來使用javaScript播放器。現今這是可達成的,因為電纜公司已改善了帶寬的效率和速度,以前所未有更快的速率、更為可靠地去傳遞豐富的媒體到使用者的桌電或手機設備。此外,一個叫做簡易資訊聚合(Really Simple Syndication),在網路圈中以RSS被認識,允許聽眾去向傳送一集一集內容下載給筆電、桌電或手機的播客們訂閱。所有前面提及的進展都讓跨設備的音樂下載、傳送和分享音樂變得更為容易。

有一段時候,Yahoo是專注在建立開源產品上的。那段期間,其中一個他們的發展小組建立了沉浸式javaScript音樂播放器,Yahoo! Web Player,它也能夠在WordPress被安裝成插件。在底下的擷圖,你能夠看見一但安裝,播放器就會由頁面上的一個點擊動作開始載入。在以下圖片中的版本是整幅的影音體驗。


當試驗網站確實有連到只有音樂視野的連結,我們發現藉由在連結上為了只有音樂體驗的點擊,Chrome和Mac的Safari都在它們基於HTML5瀏覽器的音樂播放器裡頭返回音樂檔案,如下所示。



在這文當中,處理這項議題是很重要的,因為許多那些對開發和在網頁上與音樂幹活還很新的人或許不曉得音樂連結必須使用新的HTML5的download屬性,它會像這樣被添加在連結標籤裡:

<a href="http://www.google.com/.../logo2w.png" download="MyGoogleLogo">download</a>

開源內容管理系統,包括WordPress,不經意地促進了不中斷的音樂播放器體驗。免費下載和安裝,這些內容管理系統相當受DJ、樂團和音樂公司歡迎。任何有帳號的人都能快速成立部落格並在幾分鐘內發行播客或從像是Reverb Nation、Soundcloud或8tracks的服務,嵌入音樂播放器到他們的網站頁面裡頭。當來到了不中斷體驗,我們就開始看見使用jQuery和AJAX去傳送不中斷播放器的WordPress主題。粉絲開始能夠從這篇文章前面我們提到的網站更多地接觸。如果你是一名DJ、音樂人、樂團或是音樂公司,遲早會有一個時間點你的使用者在聆聽不受打擾的音樂時會期待能夠瀏覽你的網站或是手機頁面。

我們期待你下一個問題,像是「給我看看一些有不中斷音樂播放器,WordPress主題的例子?」哈!我們還在想你永遠不會問勒。我們有提到Stylico-DJ-Template,18塊美金可使用主題森林(Themeforest),一個主題和插件市集。這主題使用了history.js,它:
優雅地支援在所有瀏覽器裡的HTML5 History/State API (pushState、replaceState、onPopState)。包含資料、標題、replaceState、Supports jQuery、MooTools和Prototype。對HTML5瀏覽器來說,這代表你可以直接修正URL,不用在使用hash。對HTML4瀏覽器來說,它是使用老舊的onhashchange功能返回。
另一個使用history.js的WordPress主題建立一恆久播放器體驗的例子是一個大多數為迴響貝斯(dubstep)和混搭(mash-up)的網站,sosimpull.com。注意播放器被固定在左上方,你可以在每一個播放清單裡的標籤之間瀏覽,而且音樂會持續播放。




你如何建立不中斷音樂播放器?

在一點研究之後,我找到了一些我想要傳給你的連結清單,它們應該能幫助你開始搭建出你的不中斷音樂播放器體驗。

如果在試著使用AJAX到你的主題上你需要一點幫助,這裡是一些或許對你有幫助的連結。
最後,SEO對於建立這個很重要。如果你要AJAX你的網站頁面,你就會想要做些「深度鍊結」到內容。

對開發者來說,這份簡報母檔(slide deck)或許會有用。作者是Ronald Huereca,他在2010年的費城WordPress發表了這份簡報。



分享:
Share to Facebook Share on Google Plus Share on Tumblr Share to Twitter Email This Pin This