
Web Audio and Web Radio Design
網路音訊與網路收音機
The origin of multimedia was slide show. As the IT development, it includes text, image, music, animation, video and interactivity.
網路多媒體除了靜態的文字、圖像之外,還包括動態的影音應用:動畫、視訊、數位音樂、與網路互動-即網路資料庫應用。數位音樂的播放,又有背景式與外掛收音機式。可使用播放清單,製作編排影音節目。網路收音機的應用,則牽涉與瀏覽器、媒體播放器(網路收音機圖示)的搭配。
網路音訊與網路收音機應用
網路音訊通常以背景音樂,或網路收音機播放。我不建議設背景音樂,而應設計網路收音機,由使用者控制。
網路收音機不是背景音樂,因為使用者無法控制背景音樂,如果不聽,只能關硬體喇叭,而關硬體喇叭不是正格的使用網路音訊的方法。
當前網站設計中有網路收音機的相對較少,一則打字、貼圖容易,但各網站能夠自製音樂的很少;二則網路收音機的程式設計較繁複,在YouTube 興起後,各網站的影音物件,經常直接抓YouTube 嵌入程式,即使只有音樂,也佔用一個沒作用的大螢幕。
網路收音機位置
因為網路收音機的圖示相對較少見,有些使用者沒有用過,不知道在那裡,甚至發生「視而不見」的現象。
網路收音機的位置,通常在首頁右上。
Html5 Coding of Web Radio
使用Html5 <audio>設計網路收音機
5 大瀏覽器共用程式
<audio style="width:240px" controls>
<source src="../Music/Going Away-Dm-Voice.mp3" type="audio/mpeg">
<source src="../Music/Going Away-Dm-Voice.wav" type="audio/wav">
<source src="../Music/Going Away-Dm-Voice.ogg" type="audio/ogg">
Your
browser does not support the audio element. 你的瀏覽器不支援 Html5 音訊。
</audio>
<audio>標籤
<audio></audio>音訊設定。
controls
設定出現收音機。
style
以 css 設計收音機形式,此為寬 240px。
注意:只能設定寬度,不宜設定高度;高度為各瀏覽器預設值,如果設定高度,若低於預設值,收音機會消失不見,如少於
40px,則 Firefox 的收音機會消失;若高於預設值,只會增加收音機的上下空白。
source
音訊位址。
建議將音樂集中放在/Music資料夾中。
注意:IE
只能使用絕對位址;亦即,如果使用相對位址,必須上傳伺服器後,才能夠播放
type
指定音訊格式,譬如:
type="audio/mpeg" 是一個MIME類型,type="audio/mpeg" 表示類型為 audio:子類別型為: mpeg,指定音訊格式為 mp3。
如果音訊格式只有1種,則僅須列1個<source>,省略另外2個。
如果音訊格式3種都有,則會以順序優先播放。
autoplay
自動播放,通常只用在首頁,所以本例沒有使用。
如果要使用,就加在 controls 之後。
如果一頁有2個以上收音機,絕不能使用,避免相互干擾。
代替出現文字
如果使用者的瀏覽器不支援 Html5 音訊,就會出現以下代替文字:
「Your browser does not support the audio element. 你的瀏覽器不支援 Html5 音訊。」
設計結果
Html5 <audio>進階設計
自動播放
如果希望出現網頁時,自動播放「1次」,則加 autoplay 屬性如下。
<audio style="width:240px" controls autoplay>
<source
src="../Music/Going Away-Dm-Voice.mp3" type="audio/mpeg">
Your
browser does not support the audio element.
</audio>
其他可用屬性
accesskey - this specifies a keyboard shortcut for a given element
class - this specifies a classname for a given element, to be used
in conjunction with a style sheet
contenteditable - specifies
whether a user is allowed to edit the content
contextmenu -
specifies the context menu for a given element
dir - specifies
the direction of the text for content in a given element
draggable - specifies if a user is allowed to drag a given element
dropzone - specifies the event that occurs when an item or data is
dragged and dropped into a given element
hidden - specifies if a
given element is hidden or not
id - specifies a unique
identification for a given element
lang - specifies a language
code for the content in a given element
spellcheck - specifies if
a specific element will need to be subjected to a spelling and
grammar check
style - defines an inline style for a specific
element
tabindex - specifies the tab order of a specific element
title - specifies a title for a specific element
自訂播放器
自訂播放器的程式設計如下:
<audio id="player" src="../Music/Going Away-Dm-Voice.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume +=
0.1">Vol+ </button>
<button onclick="document.getElementById('player').volume
-= 0.1">Vol- </button>
</div>
結果顯示如下:
Html5 <audio>限制
Html5 <audio>雖然好用,但當前只支援 3 種音訊格式:MP3, Wav, Ogg。
且除了MP3外,其他2種格式,5 大瀏覽器不一定全部支援。
所以,若要播放當前所有的音訊格式,必須考慮改用各 html 通用的<embed>。
右鍵下載練習示範曲 Going Away-Dm-Voice.mp3
選擇更多免費音樂
Background Audio 背景音樂設計
Playlist 播放清單設計
Special Topics in Digital Music Zone 數位音樂特區
We have a specific part to discuss audio, music and MIDI.




