HTML5 标签audio添加网页背景音乐代码[通俗易懂]

详见此处)。不是所有的浏览器都支持MP3 OGG之类的，每个浏览器因为版权的问题支持的格式都是不一样的。 浏览器和音频兼容性 浏览器制造商并非都同意使用某种音频文件格式。对于图像，PNG、JPEG 或 GIF 格式的文件在任何浏览器上都能加载到您的网页里。遗憾的是，音频文件并非如此。表 1 展示了网页中可以使用的音频文件格式，但是并非所有格式都能用于所有浏览器。例如，Chrome、Internet Explorer 9 (IE9) 和 Safari 浏览器不支持 WAV 文件，这是一种使用非压缩格式且正在衰败的标准。 HTML5浏览器和音频格式兼容性 音频格式 Chrome Firefox IE9 Opera Safari OGG 支持 支持 支持 不支持 不支持 MP3 支持 不支持 支持 不支持 支持 WAV 不支持 支持 不支持 支持 不支持 没有一种通用的文件格式让每个浏览器都使用单个文件格式意味着至少有 2/5 的浏览器无法播放某些声音。这不是无法在单一音频标准中达成一致的浏览器制造商不妥协的问题，而是涉及专利权和特许权使用费的法律和财务问题。不受软件专利限制的 OGG 格式旨在一劳永逸地解决这个问题。然而，在撰写本文时，Opera 和 Safari 都不支持 OGG。与 OGG 格式的文件相比，可用的 WAV 和 MP3 文件数量要更多，因此毫无疑问，浏览器制造商考虑到了这一点。MP3 作为事实的标准是个很好的解决方案。 解决方案：使用三种文件类型和<audio>标签 鉴于目前的状况，您可能认为目前还不是在 HTML5 页面上使用音频的黄金时刻。在某些方面可能的确如此，但是 HTML5 提供了一个解决方案，使您喜欢的浏览器能够找到一种兼容的格式。 与 <audio> 标签结合使用时，<source> 标签可以嵌套在 <audio> 容器内。假设您是一个瓦格纳迷，想在 HTML5 网页上听他的歌剧 Ride of the Valkyries（《女武神》）。首先，您需要获得三种文件类型的音乐，即 OGG、MP3 和 WAV。将这些音乐文件与 HTML5 文件放在同一个文件夹内。然后，将每个文件名放在单独的 <source> 标签里，并且音频容器中的所有源标签都由<audio></audio> 构成，如下所示。 <audio controls> <source src=”http://demo.mimvp.com/html5/take\_you\_fly.ogg” /> <source src=”http://demo.mimvp.com/html5/take\_you\_fly.mp3″ /> <source src=”http://demo.mimvp.com/html5/take\_you\_fly.wav” /></audio> 无论访问者使用什么浏览器，它都将自动选择所读取的第一个文件类型，并为您播放声音。 浏览器音频控件：没有两个是完全相同的 一旦您决定要在网站上提供音频，将面临一个有趣的设计选择。每个浏览器都有与众不同的外观，看起来像是有意识地故意使其与众不同。下面的图 1 展示了这些浏览器控件的外观。 图1：不同浏览器上的音频控件 除了 Chrome 浏览器外，所有浏览器都有开始/暂停控件、进度条、滑块、播放秒数、音量/静音控件，还显示声音文件的总秒数。使用HTML5 标准和浏览器支持，开发人员可以相信用户将拥有与 HTML5 音频类似的体验，因为浏览器控件是类似的。您还可以使用 Flash 和 Silverlight 等插件创建控件，但是对于不同的用户，体验可能会有所不同。 某些浏览器（如 IE9）甚至有自己的声音控制条，在浏览器本身之外运行。用户打开有声音的任何网站时，他们可以从 Windows 任务栏控制声音，并能够预览当前正在播放的声音。 html代码 (隐藏播放控件) 1 2 3 < audio autoplay = "autoplay" > < source src = "http://demo.mimvp.com/html5/take_you_fly.mp3" type = "audio/mpeg" > </ audio > 代码演示 (隐藏播放控件) 1 2 3 < audio autoplay = "autoplay" controls = "controls" > < source src = "http://demo.mimvp.com/html5/take_you_fly.mp3" type = "audio/mpeg" > </ audio > 演示实例： http://demo.mimvp.com/html5/audio.html 给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/193443.html原文链接：https://javaforall.cn 【正版授权，激活自己账号】： Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺 【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号... 标签音乐 赞 (0) 全栈程序员栈长 0 0 生成海报 (window.slotbydup=window.slotbydup||[]).push({ id: "u6837114", container: "_fzhq8x5v0b4", async: true }); 相关推荐 Linux安装redis和redis安装常见错误 Linux安装redis和redis安装常见错误 全栈程序员栈长 2021年11月23日 全栈程序员社区-公众号 用SpringBoot手把手教你写出优雅的后端接口 点击上方“全栈程序员社区”，星标公众号 重磅干货，第一时间送达 前言 一个后端接口大致分为四个部分组成：接口地址（url）、接口请求方式（get、post等）、请求数据（reque… 全栈程序员栈长 2021年6月23日 (adsbygoogle=window.adsbygoogle||[]).push({}); idea phpstrom2021激活码_通用破解码「建议收藏」 phpstrom2021激活码_通用破解码，https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧！ 全栈程序员栈长 2022年3月17日 Hadoop3.3.0安装与使用 Hadoop3.3.0安装与使用 全栈程序员栈长 2021年5月15日 Hadoop学习之编译eclipse插件 Hadoop学习之编译eclipse插件 全栈程序员栈长 2022年1月28日 JAVA 二分法 JAVA 二分法JAVA 二分法 全栈程序员栈长 2022年4月23日 发表回复您的电子邮箱地址不会被公开。 必填项已用*标注document.getElementById("comment").setAttribute("id", "a5d0fcad15de821b0540318fcdc6c1ff");document.getElementById("j265fd99e5").setAttribute("id", "comment");昵称：邮箱：网址： 记住昵称、邮箱和网址，下次评论免输入 提交 全栈程序员栈长 本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区” 54.5K 文章 0 粉丝关注 最近文章 QTcpSocket – client通俗易懂 myeclipse jdbc连接mysql数据库_怎样把navicat连接到eclipse decltype用法_指针声明符 腾讯云免费ssl证书有几个_腾讯云ssl cs和bs比较_cs和bs的区别与联系 常用C#代码「建议收藏」 会产生classcastexception_服务异常是什么原因 webstorm 插件_vscode插件开发文档 java中jbpm工作流_状态机和工作流的区别 centos7 command not found_centos7 failed to start LSB (window.slotbydup=window.slotbydup||[]).push({ id: "u6837122", container: "_58auf8w3dmd", async: true });最新发布 lombok插件安装 idea 搜不到_idea本地安装lombok插件失败 2022年9月7日 idea怎么离线安装lombok插件_如何导出idea的插件 2022年9月7日 lombok idea插件_idea怎么导入插件 2022年9月7日 idea 删除一行快捷键_excel删除一行快捷键 2022年9月7日 联系我们 行业动态 专题列表 用户列表 Copyright ©2018-2022 版权所有 晋ICP备19011774号 Powered by 全栈程序员必看 var _wpcom_js={"webp":"","ajaxurl":"https:\/\/javaforall.cn\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/javaforall.cn\/wp-content\/themes\/justnews","slide_speed":"5000","is_admin":"0","js_lang":{"copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"lightbox":"1","post_id":"193443","user_card_height":"356","poster":{"notice":"\u8bf7\u957f\u6309\u4fdd\u5b58\u56fe\u7247\uff0c\u5c06\u5185\u5bb9\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"482","fixed_sidebar":"1","font_url":"https:\/\/javaforall.cn\/wp-content\/uploads\/wpcom\/fonts.9b34824582affe8e.css","follow_btn":"<i class=\"wpcom-icon wi\"><svg aria-hidden=\"true\"><use xlink:href=\"#wi-add\"><\/use><\/svg><\/i>\u5173\u6ce8","followed_btn":"\u5df2\u5173\u6ce8","user_card":"1"}; var _wpmx_js={"ajaxurl":"https:\/\/javaforall.cn\/wp-admin\/admin-ajax.php","plugin_url":"https:\/\/javaforall.cn\/wp-content\/plugins\/wpcom-member\/","post_id":"193443","js_lang":{"login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c"},"login_url":"https:\/\/javaforall.cn\/login","register_url":"https:\/\/javaforall.cn\/register","errors":{"require":"\u4e0d\u80fd\u4e3a\u7a7a","email":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u5b50\u90ae\u7bb1","pls_enter":"\u8bf7\u8f93\u5165","password":"\u5bc6\u7801\u5fc5\u987b\u4e3a6~32\u4e2a\u5b57\u7b26","passcheck":"\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4","phone":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u8bdd\u53f7\u7801","terms":"\u8bf7\u9605\u8bfb\u5e76\u540c\u610f\u6761\u6b3e","sms_code":"\u9a8c\u8bc1\u7801\u9519\u8bef","captcha_verify":"\u8bf7\u70b9\u51fb\u6309\u94ae\u8fdb\u884c\u9a8c\u8bc1","captcha_fail":"\u4eba\u673a\u9a8c\u8bc1\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5","nonce":"\u968f\u673a\u6570\u6821\u9a8c\u5931\u8d25","req_error":"\u8bf7\u6c42\u5931\u8d25"}}; var QAPress_js={"ajaxurl":"https:\/\/javaforall.cn\/wp-admin\/admin-ajax.php","ajaxloading":"https:\/\/javaforall.cn\/wp-content\/plugins\/qapress\/images\/loading.gif"}; 🔥 🔥 🔥 点击查看：JetBrains官方授权账号,激活自己专属帐号,省出来找激活码的时间，提高效率敲代码不好吗，JetBrains全家桶16款软件通用，安全省心，售后保障🔥 🔥 🔥(function(){ var bp=document.createElement('script'); var curProtocol=window.location.protocol.split(':')0; if(curProtocol==='https'){ bp.src='https://zz.bdstatic.com/linksubmit/push.js'; }else{ bp.src='http://push.zhanzhang.baidu.com/push.js'; } var s=document.getElementsByTagName("script")0; s.parentNode.insertBefore(bp, s); })(); { "@context": { "@context": { "images": { "@id": "http://schema.org/image", "@type": "@id", "@container": "@list" }, "title": "http://schema.org/headline", "description": "http://schema.org/description", "pubDate": "http://schema.org/DateTime" }}, "@id": "https://javaforall.cn/193443.html", "title": "HTML5 标签audio添加网页背景音乐代码通俗易懂", "images": "http://cdn-blog.mimvp.com/wp-content/uploads/2015/09/html5-audio-add-background-music-01.jpg", "description": "HTML5 标签audio添加网页背景音乐代码通俗易懂分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大...", "pubDate": "2022-09-15T16:36:00", "upDate": "2022-09-15T16:36:00" } jQuery(function ($){ setup_share(1); });

音频格式

Chrome

Firefox

IE9

Opera

Safari

OGG

支持

支持

支持

不支持

不支持

MP3

支持

不支持

支持

不支持

支持

WAV

不支持

支持

不支持

支持

不支持

1 2 3

< audio autoplay = "autoplay" > < source src = "http://demo.mimvp.com/html5/take_you_fly.mp3" type = "audio/mpeg" > </ audio >

1 2 3

< audio autoplay = "autoplay" controls = "controls" > < source src = "http://demo.mimvp.com/html5/take_you_fly.mp3" type = "audio/mpeg" > </ audio >

音频格式

Chrome

Firefox

IE9

Opera

Safari

OGG

支持

支持

支持

不支持

不支持

MP3

支持

不支持

支持

不支持

支持

WAV

不支持

支持

不支持

支持

不支持

1 2 3

< audio autoplay = "autoplay" > < source src = "http://demo.mimvp.com/html5/take_you_fly.mp3" type = "audio/mpeg" > </ audio >

1 2 3

< audio autoplay = "autoplay" controls = "controls" > < source src = "http://demo.mimvp.com/html5/take_you_fly.mp3" type = "audio/mpeg" > </ audio >