本文參考：php學習-HTML聲音/音頻 http://www.phpxuexi.net/html/html_sounds.html (這篇對web音頻使用寫的相當詳細！可直接去看,下文是我對這篇的整理)
在HTML中播放音頻不怎么容易！必須要知道很多技巧確保音頻文件支持所有(或盡可能多)瀏覽器(IE, Chrome, Firefox, Safari, Opera) 和所有(或盡可能多)設備(PC, Mac, Android, iPhone, Pad)。
一、HTML 音頻 - 最佳方案
用HTML5<audio>元素+<embed>元素，才是最佳方案 。下例用<audio>元素播放MP3或播放OGG文件, 若失敗, 代碼會繼續執行<embed>元素:
<audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio>
當今2021年及之后的新瀏覽器均已支持HTML5<audio>，<embed>作為老舊瀏覽器兼容性處理的備用方式，基本不會有不能播放音頻文件的情況，可放心使用。若<embed>都不支持，要么電腦或手機是十幾年前的，要么就是代碼有問題。
缺點：必須包含不同的文件格式(需把音頻文件轉換成不同的格式)；<embed>元素若失敗(瀏覽器都不支持時)，不能顯示文字提示的錯誤信息。
也可酌情考慮在<embed>下面加一行文字提示信息(不推薦)，如下：
<audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> 您的瀏覽器不支持 audio 元素，請盡快更新瀏覽器版本以獲得更好體驗。 </audio>
這樣當<audio>不支持時，<embed>仍生效可播放音頻並緊跟提示文字信息(可能會影響頁面布局)；若<embd>也失敗，則只剩文字提示信息(這種情況基本不存在)。這樣主要作用就是督促用戶更新瀏覽器，可作為一種選擇吧。
二、<audio>音頻標簽(HTML5新增)
目前支持的3種音頻文件格式：MP3、Wav、Ogg。可在<audio>和</audio>之間放文本提示信息，當瀏覽器不支持<audio>時會顯示該信息。適用於當今瀏覽器。
缺點：不兼容特別老舊的瀏覽器，需把音頻文件轉換成不同的格式。
<!-- 方式一(推薦) --> <audio controls> <source src="horse.ogg" > <source src="horse.mp3" > 您的瀏覽器不支持 audio 元素。 </audio> <!-- 方式二 --> <audio src="/i/horse.ogg" controls="controls"> 您的瀏覽器不支持 audio 元素。 </audio>
其中，方式一指定一個MP3文件(支持IE, Chrome, Firefox 21+, Safari)，一個OGG文件(支持舊版本Firefox和Opera)，這是瀏覽器兼容性處理。方式二因文件格式單一，不同瀏覽器不同版本可能會小概率出問題。
三、使用插件，通過<object>標簽或<embed>標簽
插件是擴展瀏覽器功能的小程序。插件可用<object>標簽或<embed>標簽嵌入到網頁中。這倆標簽都是定義了一個引用外部內容(非HTML內容)的容器，包括來源(通常是非HTML資源), 依賴類型, 判斷顯示在瀏覽器中，或通過一個外部插件正常工作。下例展示在頁面中嵌入一個MP3文件(樣式可能會因瀏覽器不同變丑但不影響播放)，<object>和<embed>分別展示:
<object height="50" width="100" data="horse.mp3"></object> <embed height="50" width="100" src="horse.mp3">
缺點：不同瀏覽器支持不同的音頻格式，MP3文件支持IE, Chrome, Firefox 21+, 和 Safari,OGG文件支持舊版本的Firefox和Opera；若瀏覽器不支持文件格式，沒有插件音頻不會被播放；若用戶的電腦沒有安裝相關插件，音頻不會被播放。
object和embed的區別：
1）<object>定義嵌入的對象。標簽用於包含對象，比如圖像、音頻、視頻、Java applets、ActiveX、PDF、Flash、插件。可規定對象的數據/參數以及用來顯示和操作數據的代碼。
<embed>定義嵌入的內容，比如插件。
2）為兼容不同瀏覽器，IE只支持對Object的解析；火狐，谷歌，Safari只支持對Embed的解析。
3）object標簽用clsid表示控件的唯一id，而embed標簽用type表示插件的唯一名稱。如flash插件type為：application/x-shockwave-flash，mp3播放插件type為audio/mpeg。
4）為兼容多個瀏覽器，可通過ie瀏覽器動態加載Object標簽，非ie瀏覽器動態加載embed標簽；或在object標簽里面嵌入embed標簽。
四、使用超鏈接<a>標簽
若超鏈接的地址是多媒體文件,大部分瀏覽器會自己調用“插件”播放該文件。下例超鏈接地址是MP3文件，若用戶點擊瀏覽器會調用插件進行播放:
<a href="horse.mp3">Play the sound</a>
另：1、若對音頻/視頻有更復雜的操作需求，請參考如下手冊：
菜鳥教程--HTML音頻/視頻DOM參考手冊 https://www.runoob.com/tags/ref-av-dom.html
2、關於使用 自動播放音頻音效 的提示
若你計划使用自動播放是音頻音效，要注意了，因為大部分用戶會覺得這很煩人。一部分用戶也有可能在瀏覽器中關閉自動播放音頻音效。最好建議是在用戶 期望 聽到聲音的頁面或頁面某部分放入音頻操作的元素，供用戶主動選擇是否播放，如用戶點擊一個鏈接聽一首歌曲。
3、HTML多媒體標簽
<embed> 定義一個嵌入對象
<object> 定義一個嵌入對象
<param> 定義一個對象參數
<audio> 定義音頻內容(HTML5新增)
<video> 定義視頻或電影(HTML5新增)
<source> 為多媒體元素(<video>和<audio>)定義媒體來源(HTML5新增)
<track> 為多媒體元素(<video>和<audio>)定義文本跟蹤(HTML5新增)
至此結束。
其他參考文章：html中object和embed標簽的區別 https://blog.csdn.net/byxdaz/article/details/60467224 作者byxdaz
小伙伴們如有更好解決方式或發現錯誤，歡迎來評論補充或糾正~~~謝謝 (^ - ^ )