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.

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題