2017年1月29日 星期日

HTML筆記6:插入音樂(Music)

媒體的網頁上,除了文字(Text)和圖片(Image)之外,當然還有音樂(Music)影片(Video:HTML筆記7)的資訊,音樂的設置可以依據開發者來讓使用者調整音樂,HTML支援的音樂檔案格式有mp3、ogg、wav。



音樂的標示為<audio/>,屬於單一標示(Single Tag),其控制屬性(Control Attribute)包含如下:

1. 播放(Play):又有Autoplay(自動播放:音樂載入完成時)、Loop(循環播放),這些需由開發者設定
2. 暫停(Pause)
3. 音量(Volume)

控制屬性(Control Attribute)主要就是供瀏覽者自己調整音樂相關的設定,反之如果不配置控制屬性(Control Attribute),則音樂設定就會隱藏起來變成BGM(背景音樂:Background Music)。

例如:插入音樂(BGM) 

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
   
<audio autoplay />
<source src="Music/MyMusic.mp3" type="audio/mpeg"/>

</body>

</html>

  
以上的<source>主要是負責告知音樂檔案的路徑和檔名,還有檔案的類型屬於哪一種,它也是屬於單一標示(Single)。另外這個例子的音樂是不供瀏覽者調整,所以在<audio>後面必須設置播放(Play)為自動撥放(Autoplay),否則音樂是不會播放的喔!

接著就來看看供瀏覽者調整的例子吧!其實步驟很簡單,只需在<audio>內加上controls即可

例如:插入音樂供瀏覽者調整

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
   
<audio controls autoplay />
<source src="Music/MyMusic.mp3" type="audio/mpeg"/>

</body>

</html>


結果:


可以看到加上controls(紅色標著)之後,網頁就會顯示如上圖的調整功能,其屬性包含就是文章一開始所說的播放(Play)、暫停(Pause)以及音量(Volume)。

沒有留言:

張貼留言