數位整合傳播
week15 課程介紹
一、作業檢視
1.互動裝置設計紙盒完整規劃設計:
(1)【ADT104128_謝可惟_BTP104117洪瑩萱】: 自學多種感應器(繼電器、溫溼度感應器+...)，完成創意互動裝置設計，Good Job.
(2)【ADT104115_吳婉瑄_ADT104123_張雅萍】: 發現新天地，國歌音效製作太厲害了，Yes!
(3)【ADT104145_黃郁喬_week14.htm】:
合作無間、勇往直前，Good!
(4)【ADT104107翁宇彤_ADT104118蕭宇哲_ADT104146莊汶樺】:
努力偵錯、精神可嘉，Good!
2.基本javascript程式設計複習，確認每一個執行步驟，繼續加油!
二、課程流程參考
1.各組作品介紹與分享。
2.HTML、Javascript、實體按鍵感應器的 audio/video 觸發使用
A. HTML5 多媒體影音基本介紹
(1) 網際網路上的多媒體主要包括聲音、音樂、影片、和動畫，主要以video 和 audio 格式分類。
(2) video格式參考如下:
|
格式 |
附檔名 |
說明 |
|
MPEG |
.mpg |
由Moving Pictures Expert Group發展.大部分的瀏覽器皆支援，但是 HTML5不支援. |
|
AVI |
.avi |
AVI (Audio Video Interleave). 發展. 在Windows 平台支援，但 internet 瀏覽器並不直接支援。 |
|
WMV |
.wmv |
WMV (Windows Media Video). 由Microsoft發展. 在Windows 平台支援，但 internet 瀏覽器並不直接支援。 |
|
QuickTime |
.mov |
QuickTime. 由Apple 支援. 在Mac 平台支援，但 internet 瀏覽器並不直接支援。 |
|
RealVideo |
.rm |
RealVideo. 由Real Media發展。在外掛串流TV 平台支援，但 internet 瀏覽器並不直接支援。 |
|
Flash |
.swf |
Flash. 由Macromedia 發展.須由 internet 外掛執行，未來 HTML5將不支援。 |
|
Ogg |
.ogg |
Theora Ogg. 由Xiph.Org 發展. HTML5 環境支援此播放格式. |
|
WebM |
.webm |
WebM. 由Mozilla, Opera, Adobe, and Google 發展，HTML5 環境支援此播放格式. |
|
MP4 |
.mp4 |
MP4. 由the Moving Pictures Expert Group發展. HTML5 環境支援此播放格式. |
(3) audio格式參考如下:
|
格式 |
副檔名 |
說明 |
|
MIDI |
.mid |
MIDI (Musical Instrument Digital Interface). 電子音樂格式，一般電腦平台，但internet瀏覽器不支援。 |
|
RealAudio |
.rm |
RealAudio. 由Real Media 發展。internet瀏覽器不支援。 |
|
WMA |
.wma |
WMA (Windows Media Audio). 由Microsoft 發展. internet瀏覽器不支援。 |
|
AAC |
.aac |
AAC (Advanced Audio Coding). 由Apple 發展，internet瀏覽器不支援。 |
|
WAV |
.wav |
WAV. 由 IBM 和 Microsoft 發展. HTML5 支援此播放格式. |
|
Ogg |
.ogg |
Ogg. 由Xiph.Org 發展. HTML5 支援此播放格式. |
|
MP3 |
.mp3 |
MP3 files 是 MPEG 的部分檔案格式.所有瀏覽器接支援。 |
|
MP4 |
.mp4 |
MP4 是影音格式，同樣可做為音效使用。所有瀏覽器接支援。 |
B. HTML5 基本影音設定
(1) 使用 video 標籤格式參考
在 HTML5 網頁中，基本標籤格式
<video width="320" height="240" controls
或
autoplay
或
沒有
>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
你的瀏覽器不支援此格式!
</video>
* 影音對應格式參考
*
MP4 => video/mp4 ; WebM => video/webm ; Ogg => video/ogg
(2) 使用 audio 標籤格式參考
在 HTML5 網頁中，基本標籤格式
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
你的瀏覽器不支援此格式!
</audio>
* 音效對應格式參考
* MP3 => audio/mpeg ; Ogg => audio/ogg ; Wav => audio/wav
C. HTML video/audio 重要的執行方法(method)
(1)Play(): 播放 audio/video
(2)Pause(): 暫停 audio/video.
D. HTML、Javascript 使用 audio/video 參考
(1)在 HTML <body> </body> 內
* 建立 audio 或 video 物件
* 建立對應的 【button】可觸發 onlick=’函數名稱’
<button onclick="playPause()">Play/Pause</button>
(2)在 <script> </script> 內
* 將 audio 或 video 物件讀入
var myaudio = document.getElementById(‘audio01’);
或
var myVideo = document.getElementById("video1");
* 建立對應的函數，如: playPause()
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
3. 使用互動裝置實體觸發 audio/video 函數處理
* 設計 超音波感應互動設計
* 由超音波感應程式內，觸發對應的 audio/video 函數
三、作業參考
1.互動裝置設計感應器觸發網頁音效/影音設計，將詳細實作重點紀錄於學習日誌，以為未來參考。
2.規劃自己的期末互動裝置設計，將規劃上傳於【16_0_期末初步規劃設計】，以為下周分享檢視參考。