2023年11月25日发(作者：)
web⽹页⾳频声⾳标签⼤合集
在HTML中播放⾳频不怎么容易！必须要知道很多技巧确保⾳频⽂件⽀持所有(或尽可能多)浏览器(IE, Chrome, Firefox, Safari, Opera) 和
所有(或尽可能多)设备(PC, Mac, Android, iPhone, Pad)。
⼀、HTML ⾳频 - 最佳⽅案
⽤HTML5元素+元素，才是最佳⽅案 。下例⽤元素播放MP3或播放OGG⽂件, 若失败, 代码会继续执⾏
元素:
<audio controls>
<source src="3" type="audio/mpeg">
<source src="" type="audio/ogg">
<embed height="50" width="100" src="3">
audio> 当今2021年及之后的新浏览器均已⽀持HTML5，作为⽼旧浏览器兼容性处理的备⽤⽅式，基本不会有不能播放 ⾳频⽂件的情况，可放⼼使⽤。若都不⽀持，要么电脑或⼿机是⼗⼏年前的，要么就是代码有问题。 缺点：必须包含不同的⽂件格式(需把⾳频⽂件转换成不同的格式)；元素若失败(浏览器都不⽀持时)，不能显⽰⽂字提⽰ 的错误信息。 也可酌情考虑在下⾯加⼀⾏⽂字提⽰信息(不推荐)，如下： <audio controls> <source src="3" type="audio/mpeg"> <source src="" type="audio/ogg"> <embed height="50" width="100" src="3"> 您的浏览器不⽀持 audio 元素，请尽快更新浏览器版本以获得更好体验。 audio> 这样当不⽀持时，仍⽣效可播放⾳频并紧跟提⽰⽂字信息(可能会影响页⾯布局)；若 提⽰信息(这种情况基本不存在)。这样主要作⽤就是督促⽤户更新浏览器，可作为⼀种选择吧。 ⼆、⾳频标签(HTML5新增) ⽬前⽀持的3种⾳频⽂件格式：MP3、Wav、Ogg。可在和之间放⽂本提⽰信息，当浏览器不⽀持时会显 ⽰该信息。适⽤于当今浏览器。 缺点：不兼容特别⽼旧的浏览器，需把⾳频⽂件转换成不同的格式。 <audio controls> <source src="" > <source src="3" > 您的浏览器不⽀持 audio 元素。 audio> <audio src="/i/" controls="controls"> 您的浏览器不⽀持 audio 元素。 audio> 其中，⽅式⼀指定⼀个MP3⽂件(⽀持IE, Chrome, Firefox 21+, Safari)，⼀个OGG⽂件(⽀持旧版本Firefox和Opera)，这是浏览器兼 容性处理。⽅式⼆因⽂件格式单⼀，不同浏览器不同版本可能会⼩概率出问题。 三、使⽤插件，通过标签或标签 插件是扩展浏览器功能的⼩程序。插件可⽤标签或标签嵌⼊到⽹页中。这俩标签都是定义了⼀个引⽤外部内容 (⾮HTML内容)的容器，包括来源(通常是⾮HTML资源), 依赖类型, 判断显⽰在浏览器中，或通过⼀个外部插件正常⼯作。下例展⽰在页⾯中 嵌⼊⼀个MP3⽂件(样式可能会因浏览器不同变丑但不影响播放)，和分别展⽰: <object height="50" width="100" data="3">object> <embed height="50" width="100" src="3"> 缺点：不同浏览器⽀持不同的⾳频格式，MP3⽂件⽀持IE, Chrome, Firefox 21+, 和 Safari,OGG⽂件⽀持旧版本的Firefox和Opera； 若浏览器不⽀持⽂件格式，没有插件⾳频不会被播放；若⽤户的电脑没有安装相关插件，⾳频不会被播放。 object和embed的区别： 1）定义嵌⼊的对象。标签⽤于包含对象，⽐如图像、⾳频、视频、Java applets、ActiveX、PDF、Flash、插件。可 规定对象的数据/参数以及⽤来显⽰和操作数据的代码。 定义嵌⼊的内容，⽐如插件。 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标签。 若超链接的地址是多媒体⽂件,⼤部分浏览器会⾃⼰调⽤“插件”播放该⽂件。下例超链接地址是MP3⽂件，若⽤户点击浏览器会调⽤ 插件进⾏播放: <a href="3">Play the sounda> 另：1、若对⾳频/视频有更复杂的操作需求，请参考如下⼿册： 2、关于使⽤ ⾃动播放⾳频⾳效 的提⽰ 若你计划使⽤⾃动播放是⾳频⾳效，要注意了，因为⼤部分⽤户会觉得这很烦⼈。⼀部分⽤户也有可能在浏览器中关闭⾃动播 放⾳频⾳效。最好建议是在⽤户 期望 听到声⾳的页⾯或页⾯某部分放⼊⾳频操作的元素，供⽤户主动选择是否播放，如⽤户点击⼀个链接 听⼀⾸歌曲。 3、HTML多媒体标签 定义⼀个嵌⼊对象 定义⼀个嵌⼊对象 定义⼀个对象参数 定义⾳频内容(HTML5新增) 定义视频或电影(HTML5新增) 为多媒体元素(和定义⽂本跟踪(HTML5新增) ⾄此结束。 ⼩伙伴们如有更好解决⽅式或发现错误，欢迎来评论补充或纠正~~~谢谢 (^ - ^ )
发布评论