热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML格式的语音打不开,html5中audio支持音频格式的解决方法

html5audio标签能够支持wav,mp3,ogg,acc,webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持。不

html5 audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持。不是所有的浏览器都支持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 作为事实的标准是个很好的解决方案。

解决方案:使用三种文件类型和标签

鉴于目前的状况,您可能认为目前还不是在 html5 页面上使用音频的黄金时刻。在某些方面可能的确如此,但是 html5 提供了一个解决方案,使您喜欢的浏览器能够找到一种兼容的格式。

与 标签结合使用时, 标签可以嵌套在 容器内。假设您是一个瓦格纳迷,想在 html5 网页上听他的歌剧 ride of the valkyries(《女武神》)。首先,您需要获得三种文件类型的音乐,即 ogg、mp3 和 wav。将这些音乐文件与 html5 文件放在同一个文件夹内。然后,将每个文件名放在单独的 标签里,并且音频容器中的所有源标签都由 构成,如下所示。

无论访问者使用什么浏览器,它都将自动选择所读取的第一个文件类型,并为您播放声音。

总结

以上所述是小编给大家介绍的html5中audio支持音频格式的解决方法,希望对大家有所帮助



推荐阅读
  • 本文探讨了通过数组操作、事件委托、插件化开发、字符串拼接优化、HTML5 Data属性的使用、优先采用原生JavaScript以及JavaScript文件的压缩等方法,来提升jQuery应用程序的性能。 ... [详细]
  • 手把手教你构建简易JSON解析器
    本文将带你深入了解JSON解析器的构建过程,通过实践掌握JSON解析的基本原理。适合所有对数据解析感兴趣的开发者。 ... [详细]
  • 本文深入探讨了Java注解的基本概念及其在现代Java开发中的应用。文章不仅介绍了如何创建和使用自定义注解,还详细讲解了如何利用反射机制解析注解,以及Java内建注解的使用场景。 ... [详细]
  • 探索PWA H5 Web App优化之路(Service Worker与Lighthouse的应用)
    本文探讨了如何通过Service Worker和Lighthouse工具来优化PWA H5 Web App,旨在提升用户体验,包括提高加载速度、增强离线访问能力等方面。 ... [详细]
  • [转] JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别
    ECMAScript将对象的属性分为两种:数据属性和访问器属性。每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过for-in循环 ... [详细]
  • 无脚本 JSP 的 Web 页面设计
    探讨了Web页面设计人员是否需要掌握Java技能,以及他们如何快速学习表达式语言(EL)。虽然EL的应用前景尚不明朗,但本文将重点介绍如何通过JSP的include指令有效整合页面元素。 ... [详细]
  • 使用 NDB 提升 Node.js 应用调试体验
    本文介绍了由 Google Chrome 实验室推出的新一代 Node.js 调试工具 NDB,旨在为开发者提供更加高效和便捷的调试解决方案。 ... [详细]
  • 解决CSS因MIME类型不匹配导致的加载失败问题
    本文详细介绍了在Web开发过程中,遇到CSS文件因MIME类型不匹配而无法正确加载的问题及其解决方案,适合前端开发者阅读。 ... [详细]
  • 本章深入探讨了如何在JavaScript游戏中有效地管理和使用图像(精灵)及声音资源,包括加载、绘制和播放等关键步骤。 ... [详细]
  • 本文介绍如何使用Python编写一个简单的爬虫程序,从知乎问题页面抓取美腿图片。环境配置包括Windows 10操作系统,Python语言及其相关库。 ... [详细]
  • 本文探讨了如何利用自定义URI方案和注册表编辑,在Windows操作系统中实现从Web浏览器启动本地应用程序的方法,同时强调了这一过程中的安全考虑。 ... [详细]
  • 本文探讨了如何在不同域名下,通过浏览器直接下载PDF文件而非预览的问题,并提供了两种解决方案:一是利用原生JavaScript编写下载函数,二是使用第三方库简化下载流程。 ... [详细]
  • 本文档详细介绍了如何利用 HTMLUnit 进行 Web 页面的自动化测试和数据抓取,包括环境配置、基本用法及高级功能。 ... [详细]
  • 深入解析Pytest Fixture与Conftest的高级应用
    本文详细探讨了Pytest中的Fixture机制及其在conftest.py文件中的全局配置应用,涵盖Fixture的基本概念、定义、多种使用场景以及作用域等内容,适合希望深入了解Pytest测试框架的开发者。 ... [详细]
  • Mario Peshev,自1999年起从事编程工作,现任DevriX首席执行官。本文最初发布于Quora,探讨了计算机技术与编程语言的区别及其对软件开发的影响。 ... [详细]
author-avatar
迦迦奥特曼_897
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有