iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >如何在html5中使用audio支持音频格式
  • 815
分享到

如何在html5中使用audio支持音频格式

2023-06-09 13:06:25 815人浏览 安东尼
摘要

如何在HTML5中使用audio支持音频格式?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。浏览器和音频兼容性浏览器制造商并非都同意使用某种音频文件格式。对于图像,PNG、JPE

如何在HTML5中使用audio支持音频格式?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

浏览器和音频兼容性

浏览器制造商并非都同意使用某种音频文件格式。对于图像,PNG、JPEG 或 GIF 格式的文件在任何浏览器上都能加载到您的网页里。遗憾的是,音频文件并非如此。表 1 展示了网页中可以使用的音频文件格式,但是并非所有格式都能用于所有浏览器。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 浏览器不支持 WAV 文件,这是一种使用非压缩格式且正在衰败的标准。

HTML5浏览器和音频格式兼容性

音频格式ChromeFirefoxIE9OperaSafari
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&Prime; />    <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” /></audio>

看完上述内容,你们掌握如何在html5中使用audio支持音频格式的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网精选频道,感谢各位的阅读!

--结束END--

本文标题: 如何在html5中使用audio支持音频格式

本文链接: https://www.lsjlt.com/news/256225.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何在html5中使用audio支持音频格式
    如何在html5中使用audio支持音频格式?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。浏览器和音频兼容性浏览器制造商并非都同意使用某种音频文件格式。对于图像,PNG、JPE...
    99+
    2023-06-09
  • html5支持哪些音频格式
    这篇文章将为大家详细讲解有关html5支持哪些音频格式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 html5支持的音频格式有:1、MP3格...
    99+
    2024-04-02
  • mp3格式是html5支持的音频格式吗
    本文小编为大家详细介绍“mp3格式是html5支持的音频格式吗”,内容详细,步骤清晰,细节处理妥当,希望这篇“mp3格式是html5支持的音频格式吗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起...
    99+
    2024-04-02
  • html5支持的音频格式有哪些
    这篇文章给大家分享的是有关html5支持的音频格式有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。html5不支持所有音频格式。html5的“<audio>”用于在网页中插入音频,只支持MP3、W...
    99+
    2023-06-06
  • 如何使用HTML5音频元素
    本篇内容主要讲解“如何使用HTML5音频元素”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用HTML5音频元素”吧! x新引入的HTML5<aud...
    99+
    2024-04-02
  • H5页面如何使用audio标签播放音频
    本篇内容主要讲解“H5页面如何使用audio标签播放音频”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“H5页面如何使用audio标签播放音频”吧!H5页面播放音乐其实很简单,只需要用<au...
    99+
    2023-07-05
  • IE6.0中如何使用Javascript支持png格式图片
    这篇文章主要为大家展示了“IE6.0中如何使用Javascript支持png格式图片”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“IE6.0中如何使用Javas...
    99+
    2024-04-02
  • 怎么在Python中使用pydub模块转换音频格式
    这篇文章将为大家详细讲解有关怎么在Python中使用pydub模块转换音频格式,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1.需要下载的Python模块和ffmpeg多媒体处理工具需要的P...
    99+
    2023-06-15
  • 如何在ArchLinux中安装和使用多媒体编解码器以支持音视频播放
    在ArchLinux中安装多媒体编解码器以支持音视频播放可以通过安装一些常见的多媒体库和软件包来实现。以下是一个简单的步骤指南: ...
    99+
    2024-04-02
  • Android 是否可支持 exFAT 格式 U 盘?如何使 Android 设备支持 exFAT
    Android 是否可支持 exFAT 格式 U 盘?如何使 Android 设备支持 exFAT exFAT 文件系统是一种适用于移动设备和嵌入式系统的文件系统,它具有更好的兼容性和更高的性能。然而...
    99+
    2023-10-12
    android Android
  • Android中如何使WebView支持HTML5 Video全屏播放
    这篇文章主要介绍Android中如何使WebView支持HTML5 Video全屏播放,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 1)需要在Andro...
    99+
    2024-04-02
  • 如何在HTML5中使用video.js视频播放插件
    本篇文章给大家分享的是有关如何在HTML5中使用video.js视频播放插件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。看下默认例子:controls表示控制条,prload...
    99+
    2023-06-09
  • 如何在HTML5中使用video实现视频字幕
    这篇文章将为大家详细讲解有关如何在HTML5中使用video实现视频字幕,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。HTML5允许我们使用 元素为视频指定字幕。这个元素的各种属性允许我们指...
    99+
    2023-06-09
  • windows中goldwave如何进行批量的音频格式转换
    今天小编给大家分享一下windows中goldwave如何进行批量的音频格式转换的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后...
    99+
    2023-01-04
    windows goldwave
  • 在HTML5中如何使用MathML数学公式
    这篇文章给大家分享的是有关在HTML5中如何使用MathML数学公式的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。HTML5 的 HTML 语法允许我们在文档内使用 <ma...
    99+
    2024-04-02
  • 如何使用HTML5实现在线视频播放
    这篇文章主要为大家展示了“如何使用HTML5实现在线视频播放”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用HTML5实现在线视频播放”这篇文章吧。编码与...
    99+
    2024-04-02
  • 在Ubuntu内如何使用声音切换器切换音频源
    这篇文章将为大家详细讲解有关在Ubuntu内如何使用声音切换器切换音频源,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在Ubuntu中安装音频切换器:打开一个终端并且使用下面的命令在Ubuntu中安装音频...
    99+
    2023-06-16
  • 如何在HTML5中使用WebSocket
    本篇文章给大家分享的是有关如何在HTML5中使用WebSocket,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。客户端代码:<html><head>&l...
    99+
    2023-06-09
  • 如何在HTML5中使用weui
    如何在HTML5中使用weui?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。按钮<a href="javascript:;"...
    99+
    2023-06-09
  • postMessage如何在HTML5中使用
    本篇文章为大家展示了postMessage如何在HTML5中使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。页面内嵌套iframe,与iframe的消息传递页面与多个页面之间的传递消息针对这些令人...
    99+
    2023-06-09
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作