Eddy@Joomla!

上一篇大概說明了一下HTML5中關於audio的標籤用法及相關情況，在Sencha Touch中的kitchensink範例中的Audio範例中，可以看到它是怎麼使用Audio。它使用的是Ext.Audio這個專門處理Audio的元件。在官方的API文件上有一個注意事項：

On Android devices, the audio tags controls do not show. You must use the play, pause and toggle methods to control the audio.
在Android設備上，audio標籤controls是不會顯示的。你需要使用play, pause和toggle方法來控制audio.

Android目前2.2及2.3的機種中，得到的結果都是類似的，至少在目前雖然有"支援"但沒"控制列"，所以你還需要自己用控制方法+ui來處理這個聲音檔。（註：相關資訊：http://code.google.com/p/android/issues/detail?id=10546）

在這個範例中可以看到用了兩次的判斷目前的觀看者作業系統是否為Android的語法，這是一個三元判斷式：

Ext.os.is.Android ? <code1> : <code2>

如果是Android設備，則利用一個button來處理撥放和暫停：

{
 xtype : 'button',
 text : 'Play audio',
 margin: 20,
 handler: function() {
 var audio = this.getParent().down('audio');
if (audio.isPlaying()) {
 audio.pause();
 this.setText('Play audio');
 } else {
 audio.play();
 this.setText('Pause audio');
 }
 }
 }

在handler函式中，audio變數是要對應<audio>這個標籤中的值，用的是抓取同一Container的其他元素的方式（this.getParent().down()），也就是要抓取前面加入Ext.Audio元件（註：xtype:audio）的：

{
 xtype: 'audio',
 cls: 'myAudio',
 url: '../audio/crash.mp3',
 loop: true,
 enableControls: false
 }

Container的down()方法是抓取包含在Container其下（應該算其中）的元件，回傳就是找到的元件，另外對應的還有up()方法，就是要找包含此元件這個的上層元件了。

這個範例除了在Android設備中，使用hidden的方式，再加上自己的控制方法外。在其他的瀏覽器，也可以利用Ext.Audio中的hidden屬性來隱藏audio檔案，不然它是會自動出現控制列的。

註：Ext.os.is.Android的用法是來自Ext.env.OS，目前這個函式庫官網上還沒有文件，可以查閱原始碼在src/env/OS.js。可以提供各種觀看者設備的作業系統偵測。

評論：

Tags: android | html5 | sencha touch