如何使用原生html播放音樂(基礎篇)

以下有幾種方式可以嵌入音樂在網頁中(已測試可在Chrome, Firefox, Safari下正常執行)

使用embed 或 object

<embed height="50px" width="100px" src="song.mp3" />
<object height="50px" width="100px" data="song.mp3" ></object>

注意事項:

  • embed tag結尾需有 '/',或是用包起來,如: </embed>
  • object的部份最好以作結尾,部分瀏覽器並不接受
  • 若無給定height與width會有一預設大小
  • 若依舊無法正常播放,請檢查瀏覽器是否為最新版本,或查找該版本瀏覽器是否支援此html標籤與該檔案格式
  • 相關屬性設定可參閱此文章

使用HTML5

``` Your browser does not support this audio ```
  • 為確保瀏覽器可認得此html5的audio標籤,需在網頁最上方加入 
  • ogg是並免某些瀏覽器(部分版本的Firefox, Chrome, Opera)不支援mp3檔案格式的播放。(若發現第一個音檔不能執行便會往下一個音檔執行,依此類推)
  • 線上mp3轉ogg的converter

綜合解

``` ```

註:此綜合解包含了多種播放方式:html5的audio標籤會先去嘗試播放mp3或ogg檔案,若都失敗則會嘗試用html4的embed標籤播放,若都失敗則輸出錯誤。

範例網頁
 

Reference