iT邦幫忙

DAY 16
3

你不能不知道的Polymer開發實戰系列 第 16

VoiceTube元件解析 - 了解組裝元件的開發方式

今日目標: 了解源代碼與組裝元件的開發方式

一、元件結構

目前使用的元件清單如下

<voice-tube>

負責整合抓取字幕、youtube影片,然後產生整個影片的所有句子

<x-sentence>

負責將句子拆解出每個單字,然後透過 x-word元件產生輸入框

<x-word>

負責將單字轉成輸入框,並提供輸入、驗證、發音的功能

<google-youtube>

Google提供的WebComponent,可參考這裡

今天先講怎麼整voicetube字幕和google-youtube元件

二、如何取得voicetube影片字幕

voicetube 站台有切一個dns專門存放相關資源,叫做 cdn.voicetube.tw ,這也不是什麼秘密,只要用開發者工具就可以很清楚看到

當載入影片時,也會載入這個js檔案,可以看到這隻js直接將字幕放到 captions 這JS Object,再到console模式看一下,英文字幕、中文字幕已個別放好,而且每句句子的時間長短資訊也都有了,所以我們只要透過ajax jsonp就可以拿回來用

每個句子的資訊

三、voice-tube 元件解析

voice-tube.html 元件的程式寫法

如上面程式碼,拿到字幕後,先放到元件本身的captions屬性,然後等google-youtue 元件ready (google-youtube元件初始化完成,會fire "google-youtube-ready" 事件),所以我們的程式只要監聽這事件就可以了

不過由於某些影片並沒有中文字幕 @@a ,所以判斷有中文的話就放在同一個陣列中 ,程式碼第41行,也就是 my.captions.en 陣列裡面,這裡每個陣列元素就是一個句子,然後有中英文對照,就這樣.

值得提醒的是,這程式做了一個假設,假設讀字幕檔永遠比google-youtube元件初始化來得快! 通常是這樣沒錯啦,但網路速度難說,也可能後發先至。所以這程式是很偷懶的寫法 ,應該用 promise 之類的JS library來保證順序性,反正程式碼都在github了,有興趣就自行修改吧.

好,多虧 VoiceTube網站,字幕檔有了,再來就是組裝 google-youtube元件,Google-youtube元件用法就請自行參考官方說明

四、google-youtube 元件解析

<google-youtube> 標籤寫法

我將google-youtube元件封裝在 voice-tube元件內,在第6~8行,id為 youtube,在shadow DOM裡面元素id不會和外部有衝突,所以取名也可以大方一點 XD

然後在 voice-tube 元件的 ready callback方法裡面,取得 google-youtube 播放器,程式碼如下

然後用控制 youtube 播放前,要先載入影片 id ,每個youtube 影片都有一個唯一的id,通常是在網址後面,如下

但在voicetube因為是embedded HTML5 player,所以必須在播放器上按滑鼠右鍵取得,如下所述

Web應用的html,設定youtubeid

voice-tube元件的html,直接和 videoid binding

所以我們只要等 google-youtube-ready 事件觸發後,就可以透過 this.player 控制 youtube播放器了,真是輕鬆愜意啊

播放器控制方法,簡單列出我用到的

this.player.play(); 開始播放

this.player.pause(); 暫停播放

this.player.seekTo(start); 移動到指定影片的時間點 (例如1.23秒)

就這樣,不過有個小問題,挖 google-youtube 元件程式碼出來看,會發現沒辦法控制播放的時間長度,這樣就沒辦法只播放一句,怎麼辦呢? 我又用了一個偷懶的做法,好吧,我承認我時間不多,也很懶。就交給 setTimeout 來幫忙吧,時間到了就暫停 XD

另外還有一個需求,就是如果句子很長講很久,我不想每次都從頭開始聽怎麼辦? 所以再多寫一個 setInterval 來記錄目前播放時間,這樣我就能從我指定的起點進行播放了 (10ms對講話間隔而言應該夠短了)

大概這樣, voice-tube 產生每個句子是用 template 搭配 repeat ,這些用法之前都說過了,不再贅述。voice-tube元件只專心做好整合工作,句子功能交給句子元件處理 x-sentence (舉手!),句子中的每個單字比對、輸入則交給 x-word 元件(舉手!)去處理,這就是元件式開發的重點,元件實現特定功能,經由組裝元件來實現我們要的Web應用。

今日總結

做好的元件,可以讓開發者,又很快地重複用在其他應用上,實現高度彈性與擴充性,所以一些開發者很專心打造很酷的元件,一些開發者專心做出很棒的Web應用,以Web應用日益複雜的趨勢來看,未來WebComponent 會紅也是理所當然的事,所以大家一起來學Polymer吧~


上一篇
自己的英文自己救~結合VoiceTube
下一篇
用 JavaScript 實現人臉追蹤
系列文
你不能不知道的Polymer開發實戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
oxxo
iT邦研究生 1 級 ‧ 2014-10-06 15:25:50

Cool!!!!

0
weiclin
iT邦高手 4 級 ‧ 2014-10-09 20:12:51

太強大了 xD

我要留言

立即登入留言