HTML5播放音樂

HTML5 除了增加影片標籤外,也增加了音樂標籤,用法和影片雷同。目前也有瀏覽器支援的問題:

Format IE Firefox Opera Chrome Safari
Ogg Vorbis No 3.5+ 10.5+ 3.0+ No
MP3 9.0+ No No 3.0+ 3.0+
Wav No 3.5+ 10.5+ 3.0+ 3.0+

表格出自於W3Schools

基本語法為:

<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

支援多種音樂格式的程式範例如下(瀏覽器會根據支援類型讀取):

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  <source src="song.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>

  • autoplay=“autoplay”:自動播放音樂。
  • controls=“controls”:顯示音樂控制列。
  • loop=“loop”:自動重新播放。
  • preload=“preload”:讀取頁面時自動載入音樂。如果autoplay則沒有作用。
  • src=“(網址)“:指定音樂位置。

關連文章:通用HTML(4)-【物件插入篇】