web网页音频声音标签大合集
本文参考：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
小伙伴们如有更好解决方式或发现错误，欢迎来评论补充或纠正~~~谢谢 (^ - ^ )
