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>