audio 標籤的呈現

[WillyYeh]

雖然現階段 <audio> 屬於 RS不需支援的HTML元素與CSS屬性，
但是 EPUB 書檔內有 <audio> 標籤，
以現階段諸多 RS 都是以 browser 核心呈現書檔內容（App 多使用 WebView），
該 <audio> 的樣式就會是由瀏覽器決定。
但是多半高度與寬度較小，
在行動載具上就不方便觸控開啟播放。
過往 Readmoo 有收過內含 JS 自訂播放/停止按鈕的 EPUB 書檔，
也有 EPUB3 版式 + <audio> 的作法（如：語言學習雜誌）。
由於 CSS 只能控制 <audio> 的寬度，
因此最近 Chrome 修改 <audio> 呈現樣式的同時也增加了高度，
對於版式應用就可能會遮到其他內容。
在此詢問各位是否有較佳的解法？

[bobbytung]

是，直排書遇到<audio>與<video>標籤時，會有顯示上的問題，目前無解。

維持體驗的方式有二。

一是使用EPUB 3.0時代的epub:trigger來呼叫Media Player來直接播放聲音。這在Apple iOS iBooks與Microsoft Edge裡有實做，但其他多數的RS沒有支援，甚至在EPUB 3.1裡被刪除。

二是使用JS加上播放按鍵（如圖片）來呼叫Media Player或使用Render Engine來播放。目前BookWalker App支援前者。BookWalker這邊可以提供JS範本供測試。

前者是比較標準化的做法，後者則會遇到支援性的問題。選擇前者的話，我會希望在EPUB 3.2的會議中提出回復EPUB trigger支援；選擇後者的話則是在大家測試後，提出通用聲音播放JS範本供制作使用。

我推薦後者。

[ccyanni]

工作組會議上大家均認同，雖然影音書不在初版指引的範圍內，但影音內容十分常見。若在指引中有一個標準的做法，也可避免製作者產生許多不同的格式，造成呈現與支援的問題。因此建議在工作組第二階段建立 EPUB Sample 與 CSS Template 的同時，製作一些簡單的 sample 讓各平台進行測試與調整，再產出結論納入指引中。