顯示具有 iPad 標籤的文章。 顯示所有文章
顯示具有 iPad 標籤的文章。 顯示所有文章

2024年11月23日 星期六

以 OpenAI Whisper 轉語音備忘錄為字幕格式逐字稿

2024年11月23日 星期六
有老師問到,平常都用 iPhone 在錄音,也可以使用 OpenAI Whisper 來將錄音轉為逐字稿嗎?

使用我建構在 Google Colab 中的 OpenAI Whisper (或 Faster Whisper) ,只要有網頁瀏覽器,基本上就可以使用。它們的聲音來源接受影音網站公開分享的網址,也可用電腦或是裝置中的影音檔案。所以手機使用 OpenAI Whisper 來將錄音轉為逐字稿的關鍵,是將錄音工具中的語音儲存為檔案。

語音備忘錄儲存到檔案

以 iOS 中內鍵的錄音工具「語音備忘錄」來說,錄好的語音怎麼變成可上載的檔案?

  • 開啟「語音備忘錄」
  • 在錄音清單中,按一下想儲存的錄音。
  • 按一下標題右側「三個點點」的圖示「更多動作」(或是「分享」的圖示)。
  • 點選「儲存到檔案」(看不到就向下找找)。
  • 指定想儲存到哪個地方及檔案名稱。
  • 按「儲存」。

[圖1] iOS語音備忘錄儲存到檔案

那可以將錄音儲存到雲端硬碟中嗎?

當然沒問題,想儲存到哪個地方完全自己決定就好。

有了語音檔案了,接下來,就跟在電腦上操作 Colab 裡的 OpenAI Whisper 類似步驟。

OpenAI Whisper 轉語音備忘錄為逐字稿

經過前面的程序,將轉語音備忘錄儲存為檔案以後,我們就可以開啟 OpenAI Whisper 了。有兩個選擇,可以使用 OpenAI Whisper,或是 Faster Whisper,如果尚未使用過,可以先在電腦上,參考底下兩篇舊文,裡面有操作示範的影片:

如果想直接使用 Whisper ,就用底下的連結來開啟工具:

小技巧:

  • 上載音檔:
    在手機上,因為是直拿的版面,先按畫面左上角的「三條線」圖示,再按「顯示檔案瀏覽器」。這樣就可以看到「虛擬機」的檔案及目錄了(有時可能要稍等一下,等虛擬機啟動連線,請參考 [圖2] [圖3] 或示範影片)。
  • 格式選擇:
    2024.11.21 以後,格式的選項中,新增了「.srt.txt」的項目。它會輸出帶有時間的字幕格式逐字稿,但是因為檔名結尾為「.srt.txt」,在手機或是平板中會被視為純文字檔案,就可以直接開啟來查看內容。(請參考 [圖4])
  • 自動鎖定:
    手機、平板有省電的機置,可能會因為「自動鎖定」進入省電模式而自動關閉螢幕,導致 Whisper 的程序被中斷;所以在行動裝置在使用 Whisper,iOS 可能要暫時在「設定」「螢幕顯示與亮度」中,將「自動鎖定」關閉。建議如果時間較長的錄音檔,將錄音錄儲存到雲端硬碟,再使用電腦來轉逐字稿較理想。
在手機中上傳音檔的程序如 [圖2] 所示:
[圖2] 在手機中上傳音檔

上傳好音檔後,按一下檔名,再按一下右側的「三個點點」,出現選單就按「複製路徑」。
[圖3] 複製音檔的路徑
將音檔的路徑貼入 url 的欄位中,將格式設定為 .srt.txt ,其它選項則依需求自行設定,都設定完就按左上角的「播放」圖示來開始執行程序 [圖4]  :
[圖4] 設定 & 執行

完成後記得參考 [圖5] ,進行中斷連線並刪除程執行程序的動作:
[圖5] 中斷連線並刪除程執行程序

示範影片

註: 影片有中文字幕並分章節。

相關連結


2022年12月26日 星期一

JavaScript: Touch 和 Mouse 事件的觸發順序

2022年12月26日 星期一

以前 LimeJS framework 寫的 程式中遇過設了 click 事件的處理程序,在 iOS 中沒有執行的情形,當時也沒去深入研究,索性就避免使用 click,改以 touchstart 和 mousedown 來取代。這兩天為了解決「HTML5 分數小教具」在行動裝置上會滑動的問題,監控了最底層元件的 touchstart、touchmove,哈!在 iOS 中的分數小教具,所有的按鈕通通失效了,想想,多半是因為 click 的動作中有含 touchstart 的部份,而它被底層元件攔劫走了,就無法進行後續的程序了。

底下就來測試一下,touchstart、touchend、mousedown、mouseup 和 click 到底依什麼順序來被觸發?

在電腦或是有觸控螢幕的載具中按一下底下虛線方塊中的任何一點,看前面幾個事件出現的順序如何?


值得再進一步觀察的是,在電腦版跟手機版的結果其實是不同的,可以比較看看。

此外,如果在 touchstart 觸發時,加入「preventDefault()」,改變了原有觸發的程序,上面的結果又會有所不同。(註:如果操作的裝置沒有觸控的功能,底下可能會跟前一個實驗結果一樣。)


經過前面的實驗,可以知道,在行動裝置中,因為有觸控功能,是以 TouchEvent 為主,在電腦中則是 TouchEvent 和 MouseEvent 各自獨立運作;在行動裝置中,如果在第一個會觸發的 touchstart 中,呼叫了 event.preventDefault(),mousedown 及 click 就都不會再繼續觸發了,反之則會按順序觸發。

在 LimeJS framework 中,最底層的 director ,為了防止在行動裝置中針對其上的物件操作時,會讓整個畫面滑動,所以監控了 TouchEvent,同時也在 touchstart、touchmove 事件中,執行了 event.preventDefault(),所以如果沒有對應的事件處理程序,搶在 director 前處理,就會造成 click 事件失效。

相關連結

2022年11月22日 星期二

HTML5 : 我說你猜 : 比手畫腳

2022年11月22日 星期二

我說你猜,你說我猜;比一比,猜一猜;大家一起來比手畫腳。

比手畫腳很多人都玩過,朋友推了 TheEllenShow 頻道中的這部影片給我看:

利用平板或手機的陀螺儀(動作及方向感應器)來「翻牌」,滿方便的。2012年曾經研究過怎樣以 HTML5 加上陀螺儀來控制遊戲中的角色移動,哈!十年過去,只能重新研究,也因此,HTML5 FUN 的「 我說你猜」上線囉!

HTML5 Charades 成績報告畫面

HTML5 Charades 計時器選單畫面

特色與功能

「HTML5 我說你猜」有以下的功能與特色:

  • 以支援 HTML5 的瀏覽器來開啟頁面,即可使用,跨載具、跨平臺,不需要安裝。
  • 可以自訂題庫、題庫內容可以是文字、圖片,或是圖文混合;文字支援國字加注音的格式。
  • 可以自訂參數,例如每回合計時秒數及其它客製化的參數內容。
  • 手機、平板有陀螺儀,如果啟用感應器,目前會偵測裝置「垂直」、「往前傾」和「往後躺」三個動作,用來啟動、翻牌和表示「正確」「跳過」。
  • 在沒有動作及方向感器的電腦也可以玩,翻牌改以畫面中的按鈕操作。
  • 電腦支援「快速按鍵」預設以方向鍵右來按「正確」、「重玩」,方向鍵左來按「跳過」、「選單」,及方向鍵上下來捲動作答結果清單。(2022.11.23 明勳老師建議)
  • 有預覽題目的功能,在選定題庫後,顯示所有題目的內容,可以讓老師與學生事先討論遊戲策略。(2022.11.24 明勳老師建議)
  • 可匯入預先製作好的題庫檔案。
  • 支援語法產生器,可以將自製的遊戲嵌入 Blogger、Goolge Sites 或其它網站網頁中。

試玩與下載

教學上要如何應用,可以參考這一篇記錄:

    「HTML5 我說你猜」可以在 HTML5 FUN 網站中找到,可以試玩,或是下載打包好的程式及範例題庫;也可以使用本文章後面的「語法產器」來改題目,立即玩或是製作語法,放入自己的網站中。

    HTML5 FUN 的網址如下:

    「HTML5 我說你猜」的圖示是:

    HTML5 我說你猜的圖示

    找到圖示,按下去,即可玩範例題庫;覺得不過癮,就參考下一小節的說明,來自製遊戲吧!

    自製遊戲

    如果想製作自己的遊戲題目,又想利用手機、平板的動作偵測來控制遊戲的進行,建議使用 HTML5 FUN 烘焙機來輸入題庫,並製作語法,再將遊戲放到 Blogger 、Google Sites 或是其它有支援合法「HTTPS」的(經認證過的)網站。主要是因為較新的手機、平板系統(尤其是 iOS 12 以後),對「動作及方向感應器」的啟用,基於安全的理由,有網站的限制。

    按一下底下的按鈕,即可打開「HTML5 FUN 烘焙機」,啟動烘焙機以後,只要透過三大步驟,來更換自己的題庫,並利用「其它選項」,來做一些客製化的設定。試玩沒問題,最後就能按按鈕,輸出自製遊戲的嵌入語法。

    最新版的烘焙機請按這裡:

    Q&A

    底下將一些可能會遇的問題列出來:

    • Q:快速按鍵可以自訂嗎?
      • A:當然可以自訂快速按鍵;利用「語法產生器」中,「設定其它參數」裡的「正確時的快速按鍵名稱」和「跳過時的快速按鍵名稱」即可設定。可用的按鍵的名稱可以由主設定檔「charades_set.js 」中的「keyCodes」找到。
    • Q:為什麼無法啟用感應器?
      • A:較新的系統,像 iOS 13 以後,遊戲必須放在支援 HTTPS 的網站中才能使用感應器。
      • A:如果前一次的啟用不是按「允許」,瀏覽器會記住設定,即使按了「重新整理」也沒有用,必須要先關閉瀏覽器,重新再打開瀏覽器,才能再次設定是否允許使用感應器。
    • Q:題庫可以不要選單嗎?
      • A:可以的,有兩種方式讓遊戲跳過題目選單。
        方法1:如果題庫設定中,只有一個牌組,也就是只有一行題目,就不會出現選單。
        方法2:參考範例題庫設定檔「question-set-2.js」在題庫設定中,每一行只放一個題目,都不加任何欄位分隔符號(預設為兩個井字號),這樣子,程式會自動將每一行合成一個牌組,不用打任何分隔符號,是不是比較方便!

    相關連結

    更新記錄

    • 2023.09.22 題庫內容新增支援圖片,所以可用純文字、純圖片或是文字加圖片來當作卡片的內容。
    • 2023.09.21 遊戲結束時,停止鍵盤的監聽,以免因為連續按下一題,誤按了重玩的功能,造成成績報告被跳過,需要重玩或是回選單的功能,就以按畫面中的按鈕來執行。
    • 2023.08.18 v1.1 修改分數頁面的重玩、選單按鈕在畫面出來後兩秒才能按,以免因為連續按正確或跳過時有誤觸的情形,以致看不到答題分數及記錄。
    • 2023.08.17 v1.0 題庫支援國字加直式注音的格式。
    • 2023.07.04 v.0.9 題庫的設定如果某行沒有內容,會造成題庫解析錯誤而陷入無窮迴圈,問題已解決。
    • 2022.11.25 v.0.8 增加匯入題庫檔的功能,可以將預先製作好的題庫載入使用。
    • 2022.11.25 v.0.7 單行題庫時,未去掉第一欄的問題解決;新增 preview_col_number 的參數,用來自訂預覽時要以幾欄的方式呈現所有題目。
    • 2022.11.24 v.0.6 加入「預覽題目」的功能,如果啟用預覽,在選完題目後,會顯示所有的題目,並有 1~5 分鐘倒數計時後,自動進入該回合遊戲。
    • 2022.11.23 v.0.5 調整感應器啟用的程序,並提供更多錯誤訊息;加入快速按鍵的功能,供電腦操作。
    • 2022.11.22 程式發布。
    • 2022.11.20 HTML5 FUN charades 專案新建。 


    2022年11月19日 星期六

    HTML5 : 測試瀏覽器內建的合成語音

    2022年11月19日 星期六

    目前 HTML5 FUN 網站中的合成語音是使用 Google 的 TTS 合成後,當 MP3 來播放;在思考一個問題,如果哪一天,那個 API 無法使用時,該怎麼辨?之前曾想直接利用瀏覽器內建的合成語音,但是沒有找到相關的資料,才會使用 Google 的 TTS,結果昨天在找為什麼 iOS 上無法使用「devicemotion」的「accelerationIncludingGravity」來抓 iPad 翻轉的座標時,才看到如何使用瀏覽器內建的合成語音範例。這樣一來,合成語音的 Plan B 出現了!

    參考底下 MDN 的範例:

    將它小修改以後,可以在這個頁面中,輸入想合成語音的文字,然後聽聽利用內建合成語音輸出的聲音。

    測試內建的合成語音

    在輸入區中輸入一些文字,按 Play 鈕,或是由下拉式選單更換語言後,就可以聽到瀏覽器的合成語音。

    速度:
    1
    1

    測試心得

    測試完,目前大概有幾個發現 :

    • 在 Window 中的 Chrome 使用「Mircorsoft Anna」的聲音,只有英文可以合成。
    • 如果選的聲音是 Google 的,中文、英文都可以合成。
    • 在 iOS 中,必須是能認得中文字(漢字)的語言才會合成中文字的部份,因此選中文系列的才能正常念出來。
    • 在 FireFox 中,只能合成英文。
    • Android 手機則還要看系統內建了什麼文字轉語音,像我的 Samsung 手機,如果是用預設的 Samsung 文字轉語音,居然也是沒有中文的;幸好它可以自己選用  Google 的,不過得進系統設定中去設定(設定/一般管理/語言及輸入/語音/文字到語音/慣用語音辨識引擎);設定完,還得將瀏覽器關掉再重開,才能看到 Google 的文字轉語音的語言清單。
    • 系統本身有沒有支援文字轉語音是重點,像我的 iPad 4 (iOS 10.3.4) 就沒有支援,所以在語言清單上,什麼也沒有。

    程式編寫重點

    MDN 的範例基本上已經很完整了,不過,我想,它可能沒有在 iOS 上測試過,iOS 很多功能都得先跟使用者「互動過」,才能正常運作,包括合成語音也是。

    在 iOS 上,想要發出聲音,它必須將 speak 放在「touchend」或是「click」(click 的程序中有 touchend,所以主因還是 touchend),不然 speak 就不會執行。所以範例中的的 Play 按鈕,改成用 onclick (這樣子沒有觸控的系統也能使用) 來觸發,而不是用原來的「submit」。

    另外,輸入的文字如果太長,它會被中斷,然後下一次再呼叫 speak 時,就卡住不動了,所以為了要確保不會發生這樣的情形,在建立新的合成語音之前,可能要先呼叫 .cancel() 來清除之前累積的。

    查看原始碼

    參考資料

    2022年9月21日 星期三

    LimeJS : 偵測是否在 iOS 的裝置中

    2022年9月21日 星期三

    忘了是從什麼時候開始,用 LimeJS 開發的 HTML5 程式,在行動載具上,會有一個問題不大,但卻令人困擾的小臭蟲。常常會遇到載入程式時,畫面的比例、位置不太對,明明利用 LimeJS 框架寫的程式會自動計算,並按設定的比例,盡量填滿瀏覽器視窗的,卻會有如底下兩個截圖的差異:

    [圖1] 正常的畫面
    [圖2] 未正常調整比例的畫面

    以我寫的 HTML5單字高手來說,會像在 [圖1] 左下角有版本戳記;但是在 iOS 上,常常會變成 [圖2] 的樣子,比例稍大,然後周圍的部份就會被截掉。早期並沒有這個問題的,很明顯地,在 iOS 的 Safari,一定有改了什麼,而 LimeJS 這個古董級的框架沒跟上。

    我後來發現,只要將載具旋轉一下,由橫拿變直拿,再由直拿變成橫拿,畫面就可以由 [圖2] 變成 [圖1]。不過,雖然這個方法可以解決問題,不但麻煩,也不是每個人都知道啊!

    這兩天在寫新的程式,對這個問題實在覺得感冒,決定好好地追一下問題出在哪裡。

    在 LimeJS 的原始碼中,控制畫面比例,包括啟始大小的計算、改變大小及旋轉......等,都是由 director.js 在控制。在 director.js 中,「invalidateSize_ 」就是負責計算調整大小的程序,所以在好幾個系統事件中,都會去執行它。

    追一下有關行動載具相關的,有以下的片段:

    //todo: look for a less hacky solution
    if(goog.userAgent.MOBILE && !goog.global['navigator'].standalone){
    var that = this;
    setTimeout(
    function(){window.scrollTo(0, 0);that.invalidateSize_()}
    ,100);
    }

    在 director.js 中,它利用了「goog.userAgent.MOBILE」來判斷是不是行動載具,如果是,就會執行將畫面往上拉到頂,並重新計算大小、調整位置。

    針對 goog.userAgent.MOBILE 偵錯,在 iOS 10.3.4 中,它得到的值是 True;而在 iOS 15 上,則為 False。這和在 iOS 10.3.4 中可以正確地調整大小,而在 iOS 15 不正常的結果是吻合的。這樣子,看來問題出在 goog.userAgent.MOBILE 並沒有正確地偵測到 iOS。

    這讓我想起,之前寫「HTML5 幾A幾B」時,曾經有研究過如何偵測是否為 iOS,使用了這個判斷式:

    if( /iPad|iPhone|iPod/.test(navigator.platform)
    || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
       )

    最重要的其實是「navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1」,細節可以用這個當關鍵詞搜尋看看。

    不過,如果是應用在 LimeJS 的「壓縮編碼」,navigator.maxTouchPoints 要改成 navigator['maxTouchPoints'],以免因為 maxTouchPoints 被編碼,又無法正常判斷。

    綜合前述的測試結果,LimeJS 原始碼中的 director.js 中的這部份:

    //todo: look for a less hacky solution
    if(goog.userAgent.MOBILE && !goog.global['navigator'].standalone){
    var that = this;
    setTimeout(
    function(){window.scrollTo(0, 0);that.invalidateSize_()}
    ,100);
    }

    修改為:

    //todo: look for a less hacky solution
    if((goog.userAgent.MOBILE 
      ||  /iPad|iPhone|iPod/.test(navigator.platform)
      || (navigator.platform === 'MacIntel' && navigator['maxTouchPoints'] > 1)
    )
    && !goog.global['navigator'].standalone){
    var that = this;
    setTimeout(
    function(){window.scrollTo(0, 0);that.invalidateSize_()}
    ,100);
    }

    這樣子,在 iOS 中,就可以自動調整位置及大小了。

    有空再將 HTML5 FUN 中的程式,一個個重新編譯,並更新。


    2022年7月21日 星期四

    DIY : 簡易混音器

    2022年7月21日 星期四

    2021 年時,想用手機錄畫面,才發現 Android 錄畫面時,錄不到輸出的聲音,查了半天資料,找到了關鍵字「audio loopback」,然後參考了這篇「Audio Loopback Dongle」:

    它主要是將原本要輸出給耳機的聲音,導回給麥克風;而在錄畫面時,麥克風的聲音是可以同步錄下的,這樣一來,就能把原本錄不到的聲音,用跳板的方式,同步錄下來了。

    參考「Audio Loopback Dongle」的電路圖,稍微修了一下,另外加上 TRRS 母座,可以插耳麥接聽輸出的聲及說話。這個簡易混音器,試了一下,搭配 Kimcy929a 的 Screen Recorder :

    就可以解決我 Android 手機無法同時錄影跟錄音的問題 (如果 Android 的版本較新,這個問題應該已經解決,不過,我的手機只能到 Android 9)。

    後來看到有人在討論 Google Meet 除了用「分頁模式」,遠端學生無法聽到老師聲音的問題;前面的簡易混音器再度登場,它可以將電腦本來要輸出給喇叭的音源和麥克風混音以後,再由麥克風的途徑輸入給電腦,這樣子,無論 Google Meet 使用任何模式分享畫面,遠端都可以同時聽到電腦的輸出的聲音及麥克風的聲音。

    不過,在使用後,才發現,如果沒有音量調整實體鈕來控制電腦輸出聲音的大小,有時會蓋掉麥克風的人聲,所以後來又幫簡易混音器加上了一個電位器,這樣使用時更方便。[圖1] 是修改過後的電路圖:

    [圖1] 簡易混音器電路圖

    [圖2] [圖3] 的混音器是利用舊電話拆下來的電位器(R3: 50kΩ)、舊平板拆下來的 TRRS 母座(J2) 及一個全新的 TRRS 端子(J1)所組成的。

    [圖2] 簡易混音器
    [圖3] 簡易混音器

    使用時,左側的 J2 可以插上耳麥監聽及說話;右側的 J1 則插到手機或是平板的耳麥插座,如果是接桌機,則可以用一母(TRRS)轉二公(TRS)的轉接線 [圖4],將 J1 分為耳機插頭跟麥克風插頭,再插到電腦的耳機與麥克風插孔中。

    [圖4] TRRS 轉 TRS x 2 的轉接線

    看到這邊,哇!可以應用在手機或平板,是不是就可以解決 Google Meet 在 iPad 上無法分享聲音的問題?

    iPad 與 Google Meet 分享聲音

    關於 Google Meet 在 iPad 分享聲音的問題,可以看一下我錄的測試影片:

    影片中使用的簡易混音器是 [圖5] 這個:

    [圖5] 可斷開麥克風功的簡易混音器

    測試影片中的 iPad 有成功在 Google Meet 中分享聲音給遠端,主要是有特別去將「耳機」的音量及「電話」的音量調小,前者用虛擬調整鈕調整,後者用 iPad 的實體按鈕調整。

    不過,只要使用麥克風講話,或是遠端的人有發言,分享的聲音就可能因為回授的關係而變小或是消失,所以需要將 [圖1] 右側中的 J1 插掉後重插(有可能因為這樣而讓 Google Meet 斷線)。如果音量調整得不好,或是大家都很多話,會很不穩定。

    所以結論是,使用 Google Meet 分享聲音,還是筆電或是桌機比較穩定而容易些。

    立體麥克風

    前面 [圖2] 和 [圖5] 的混音器,設計時,因為考慮可以直接插手機或是平板,所以都是針對 TRRS 的端子設計,也就是麥克風都是單聲道而已,所以只用一個電位器來調整音量。

    個人常用的麥克風是以前 AIWA 隨身聽附的立體電容式麥克風,為了讓它保持立體聲,所以我利用光碟機拆下來的控制板 [圖6] :

    [圖6] 光碟機的控制板

    改裝成 [圖7] 的混音器:

    [圖7] 光碟機控板改裝的簡易混音器

    我將接到電腦喇叭和麥克風的外接線改了一下,加裝了 2.54 的母座,這樣就可以直接插在三根 2.54 的針腳上,喇叭的音量可以用雙聲道的電位器來調整大小聲,然後再串接到麥克風的左、右聲道,這樣子,就可以維持麥克風的立體聲。


    2022年2月15日 星期二

    JavaScript : iOS 將內容複製到剪貼簿

    2022年2月15日 星期二

     最近幾支 HTML5 程式有將內容複製到剪貼簿的需求,在電腦上,在 Android 系統上都沒有問題,就是 iOS 上一直搞不定。花了一點時間研究到底問題出在哪裡。

    首先,如果有將文字複製到剪貼簿的需求,可以參考 w3school.com 底下這篇中的範例:

    2022年1月26日 星期三

    JavaScript : Blob URL

    2022年1月26日 星期三

     因為想幫 HTML5 FUN 中的工具寫個所視即所得的題庫編輯器,最近一直在研究「content editable」,簡單的說,就是在 HTML 的 tag,例如常用的「div」加一個屬性「contenteditable="true"」,它就能變成一個可以允許使用者更改內容:


    <div contenteditable="true">


    哈!要讓使用者填資料,以前都是用 input、textarea 等元件,它們的缺點是比較單調些,只能純填入文字。利用 div 就什麼都能放了,像我的題庫中可以是文字、圖片或聲音,後兩者在題庫編輯器中,如果能夠直接呈現預覽的樣子,使用者就不會被一堆又臭又長,更看不懂的字串給嚇壞了。

    「content editable」玩了兩、三天,目前在我的 HTML5 樂透摸彩機中,已經有一點雛形,可以試試看:

    2021年12月9日 星期四

    HTML5 : iOS 私密瀏覽模式中無法正常執行程序

    2021年12月9日 星期四

     為了讓 HTML5 筆順練習程式的顯示/拆解部件可以更輕巧,少耗一些資源,研究了幾天的 Canvas API 的 Path2D,較新版的瀏覽器當然是沒什麼問題,考慮到可能有人是使用較舊的載具,於是拿出 iPad Mini 第一代(iOS 7.1.2) 來測試,果然如預期,它的瀏覽器不支援 Path2D。想說,那就順便測試一下 HTML5 FUN 中的程式吧!

    第一關,有了!

    可加為主畫面圖示的說明


    第二關,Yes !有載入程式中的訊息

    載入程式中的訊息

    然後就這麼一直「Starting」,凍結不動了!

    想說完了!以前明明都好好的程式也都不能執行,只好打開原始碼,開始一段段的除蟲。不過,以同一部 iPad min 開啟未將 JavaScript 壓縮(最佳化)過的 HTML5 筆順練習程式,是可以順利載入程式的,並執行到「下載筆順資料」的對話框,接下來是卡在將資料寫入瀏覽器的 localStorage 空間這個程序。顯示的錯誤訊息是:


    QuotaExceededError: Dom exception 22: An attempt was made to add something to storage that exceeded the quota


    訊息是空間不足,不過,查了一下載具,明明使用量沒有多少;為了證明是不是真的空間不足,猶豫了一會兒,還是按下了 Safari 設定中的「清除 Cooke 和資料」,好的!把人家的資料清除了,果然問題還是存在,錯誤訊息還是一樣。

    用錯誤訊息找到了這一則:


    裡面有人提到了「私密瀏覽模式」,我才注意到 iPad mini Safari 頁面上緣的顏色不太一樣,拿出 iPad 4 (iOS 10.3.4),切換到「私密瀏覽」測試 HTML5 FUN 的網頁,果然也是卡在「Starting」就不動了。

    私密瀏覽 HTML5 FUN

    所以結論是在較舊版的 Safari 中,「私密瀏覽」的模式會無法使用 localStorage 來暫存資料,也無法載入最佳化過的 JavaScript 來執行。想繼續使用程式,只好關閉「私密瀏覽」模式後,重新開啟網頁。

    iOS 10.3.4 關閉私密瀏覽模式


    為了這個問題,耗去了不少時間在「摸象」,不過,還是有收穫,下回會先確認一下瀏覽器是否進入不同的國度了!



    2020年8月25日 星期二

    iOS : iFiles Upload

    2020年8月25日 星期二

     iPad 第一代好久沒拿出來用,想到裡面有 iFiles 可以讓小孩聽英文,趕緊把它充電。iFiles 內建 web service ,可以直接上載檔案,在當時沒有雲端硬碟,可是很好用的。不過沒想到它上載檔案居然是用 Flash 寫的,現今的瀏覽器不支援 Flash Player,這下該如何上載檔案?

    沒關係,山不轉路轉,路不轉人轉!我的電腦中有安裝 curl 這個命令列的工具,可以扮演瀏覽器,來執行上載檔案的任務。

    iFiles 如果沒有設密碼管制,要上載檔案,只要知道:

    • 網址
    • 表單欄位的名稱

    來觀察一下 iFiles 的上載頁面的網頁原始碼:

    用「type="file"」搜尋,可以找到表單的欄位名稱為「nameFileUpload1」。

    假設:

    • 要上載目前資料夾中的檔案,檔名為「test.zip」
    •  iFiles 網頁的網址是: http://192.168.2.104:8080/
    curl 上載的完整命令為:

    curl -F nameFileUpload1=@test.zip  http://192.168.2.104:8080/

    如果像我同時要上載 test1.zip、test2.zip、test3.zip、test4,zip 和 test5.zip ,在 Windows 中,還可以搭 for 的命令來批次上載,將上面的命令改為:


    for /L %a in (1,1,5) do ( curl -F nameFileUpload1=@test%a.zip  http://192.168.2.104:8080/ )


    哈~成功把小孩所有要聽的 mp3 檔一次上載了,已經買了快十年的 iPad 繼續上工!


    2013年10月7日 星期一

    Windows : Edimax EW-7811Un 變基地台

    2013年10月7日 星期一
    學校目前每一間教室都至少有一台桌上型的教室電腦及單槍投影機,如果想要讓行動裝置可以在教室上網、投影......等應用,勢必得有同一網段內的無線網路。目前我們的現況是教室電腦和學校的無線網路分屬不同網段,且受防火牆管制。為了解決這個問題,自行加一個無線基地台是一種方法,但是它還牽涉到網路設定的問題,對一般老師而言,其實有一點的難度。另一種方式就是買一個 USB 的無線網卡,並將它設為「基地台」模式即可。

     Edimax EW-7811Un 是我用過,安裝設定容易,模式切換簡單的一個 USB Wireless Dongle,新台幣 300 元左右搞定,還滿推薦的。底下就把安裝、設定的主要過程抓了一下圖,給有需要的人參考。

    2013年9月4日 星期三

    iPad : 以「Stage」的攝影+白板功能進行共同訂正

    2013年9月4日 星期三
    剛開學,接新的一批學生,習慣的養成很重要。以作業的習寫及訂正來說,如果有 Webcam 、帶有攝影鏡頭的行動裝置,甚至是實物影機,直接將作業投射到大螢幕後解說,孩子們會更清楚努力的目標及老師的要求是什麼。這學期因為教室電腦擺放位置離黑板有一點距離,因此,除了使用 Wiimote 電子白板以外,iPad 透過無線網路投影的方案也綜合使用。今天為了講解作業如何訂正,啟用了 iPad 鏡像的功能後,再利用 iPad 內建的「相機」,將學生的作業投射到大螢幕後,跟學生解說批改的符號及如何訂正。不過這個「相機」並不具有電子白板的畫記功能,變成只能比手畫腳或是真的在學生的本子上寫寫畫畫。明明記得試過一個 可以一邊攝影一邊畫記的 App,要用時卻忘了。回家後仔細的找,終於想起「Stage」這個 App。


    這個 App 是我看完「iPad as th Teacher's Pet」那篇的建議後安裝的,重新進入「Stage」後我才想起那時把玩的片段,只能說,現在的記憶力真的有減退了!

    2013年8月18日 星期日

    iPad : 以 NTPdate 網路對時

    2013年8月18日 星期日
    2010 年底買的 iPad 時鐘一直快十分鐘,天真的以為在它時間設定中的「自動」是會透過網路自動對時,可是並沒有啊!有人說它的「自動」是有和電腦同步時或是連3G網路時才會「自動」對時,哈!自從上次 iOS 更新為 4.3.3 以後就沒將 iPad 同步過。咦!unix like 一般不是有透過 time server 對時的 NTP,為什麼 iOS 不用這種方式?沒關係,這臺 iPad 已經 JB 過了,Cydia 裡面找一下,有個「NTPdate」可以補強一下。

    2013年8月11日 星期日

    iPad : XBMC 構建家庭影音系統

    2013年8月11日 星期日
    家裡2010年底買的 iPad 記憶體只有 256 MB,雖然 iOS 昇級至 4.3.3 就止住,使用時,不但很多新的 Apps 無法安裝,連看個網頁也經常「閃退」。最近決定讓它退休,雖然不用再隨著我南征北討,在家待命,總還是得發揮一點功用。
    前一陣子原本打算利用 Raspberry PI + Raspbmc 來當家庭影音系統的,不過它的效能還是不夠好,影片經常會播一半卡住。測試了一下,這臺原本可能會閒置的 iPad ,以 XBMC 來播放多媒體,流暢多了。確定可行後,我上網花不到半張「小朋友」買了一條非原廠的「Apple Digital AV Adapter Dock to HDMI 轉換線」,把 iPad 的畫面透過 HDMI 傳到電視,讓家裡的視聽系統更完整一點。底下就把目前運作的方案記錄一下。

    2013年7月28日 星期日

    FaceTime : 多個裝置共用一個 Apple ID 通話

    2013年7月28日 星期日
    2010年底買的 iPad 因為記憶體實在太少,使用時經常「閃退」,這次一口氣買了 iPad 4 (整修品) 和 iPad mini,大的自己留著用,mini 則給老婆用。為了共用的考量,兩台使用了同一個 Apple ID。
    昨天用新版的 iPad 來玩 FaceTime ,第一次用,手忙腳亂的。由於兩個裝置用的都是同一個 Apple ID ,將它們設定為不同的電子郵件地址來通話即可連線通話。但是同樣的方法用在 MBP 上卻一直失敗,弄到最後,iPad 4 可以和 MBP 通話,但是 MBP 可以和 iPad mini 連線,視窗上卻出現「null」的文字,而且兩邊都只有「切斷」的按鈕,沒有接聽鈕。明明三個裝置設定的是不同的電子郵件地址,卻只有兩個可以通。
    早上看到 Apple 說明文件中的這句話「在 iPad、iPod touch 或 Mac 版 FaceTime 上註冊 FaceTime 時所用的 Apple ID 必須是電子郵件地址。」這句話,哈!豁然開朗。

    2013年2月27日 星期三

    Windows : 無法找到程序輸入點 sqlite3_wal_checkpoint

    2013年2月27日 星期三
    自從某次更新過 Windows XP 上的 iTunes 以後,開機進入 Windows 總會出現找不到 SQLite3.dll 的誤錯訊息:

    由於對系統也沒什麼大礙,就沒去理它,剛剛心血來潮,用錯誤訊息中的關鍵字「AppleSyncNotifier.exe」和「SQLite3.dll」把問題解決了。

    2012年4月5日 星期四

    iPad : 透過 TeamViewer 來遠端控制電腦

    2012年4月5日 星期四
    以前有一臺 Palm T3 PDA 和 Dropod 818 Pro 的手機,於是試著用 SallingClick 來遠端控制電腦,甚至還可以輸入文字,現在 T3 和 818 Pro 退下來,身邊有的是一支搭載 Android 2.2 的手機和 iPad,隨著技術的演進,應該可以更方便的控制電腦吧!夢想中的操作方式是手持裝置的畫面是被控制電腦的畫面,當我用手指頭操控手持裝置的面板時,遠端電腦的滑鼠指標也會產生對應的動作。想要如同前述的方法操控電腦,現在有很多方法可以達到。
    • 在電腦端安裝特殊的「服務程式」,然後在手持裝置也安裝對應的「客戶端程式」來控制電腦。
    • 在電腦端和手持裝置都安裝特定的「客戶端程式」,然後連線到程式指定的外部伺服器交換資料並進行控制。
    這兩種的差異在第二種方式必須連到被控端和主控端以外的第三者,如果對外網路不順暢時速度會明顯的受到影響,甚至無法使用。但是由於主控端和被控端都是以客戶端的角色在連線,因此可以突破有防火牆管制的環境,這對沒有辦法更改網路管制規則的人來說,可是一大優勢。像本文中所要介紹的 TeamViewer 就是屬於這一種。

    2012年2月27日 星期一

    Life : iPad 外衣 DIY

    2012年2月27日 星期一

    每一年都會跟我們家老婆要大記事本,封皮有的很精美,丟了可惜,去年把其中一個封皮改裝成 iPad 的外衣。用久了,固定用的粗橡皮鬆了,中間連接的部份也破了,不太牢固,為了預防萬一,今天把它拆了,重新做了一個。

     
    雄::gsyan © 2009. Design by Pocket