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

HTML5 标签audio添加网页背景音乐代码[通俗易懂]分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!               html5&n

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

html5 <audio> 是 HTML 5 的新标签,定义声音,比如音乐或其他音频流。

HTML 5 <audio> 标签

HTML5 audio让音乐东山再起

HTML5 运用aduio标签打造音乐播放器

 

可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

1
2
3
4
<
audio
autoplay
=
"autoplay"
controls
=
"controls"
loop
=
"loop"
preload
=
"auto"
            
src
=
"http://demo.mimvp.com/html5/take_you_fly.mp3"
>
      
你的浏览器不支持audio标签
</
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>

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

 

浏览器音频控件:没有两个是完全相同的

html5-audio-add-background-music-01

一旦您决定要在网站上提供音频,将面临一个有趣的设计选择。每个浏览器都有与众不同的外观,看起来像是有意识地故意使其与众不同。下面的图 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.net/193443.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • awk命令详解+示例

    awk命令详解+示例WK数据过滤工具(类似于grep,比grep强大)Awk编程语言/数据处理引擎创造者:Aho、Weinberger、Kernighan基于模式匹配检查输入文本,逐行处理并输出通常用在Shell脚本中,获取指定的数据,单独使用时,可对文本数据做统计#whichawk#rpm-qf/bin/awk语法格式:格式1:前置命令|awk[选项]‘条…

    2022年7月11日
    23
  • window下彻底卸载删除SQL Serever 2012

    window下彻底卸载删除SQL Serever 2012对于刚刚涉足数据库软件的小白们,肯定会遇到由于下载的数据库是英文版的,但是又由于自身的英文水平有限,一些专业的英文单词看的并不是很明白想着是否能够将英文的SQLserver2012汉化,但是由于有中文版的SQL,汉化这件事就很少有人弄了,所以在网上很少出现中文包大家肯定有过怎样才能将SQL彻底的卸载干净,毕竟安装目录加上实例目录加上就有10G,由于一些实例目录默认在系统C盘,占据了很大的一部

    2022年10月2日
    2
  • idea全局搜索找不到问题

    idea全局搜索找不到问题今天在使用idea全局搜索的时候,发生了存在关键字,但搜索不到的问题这里,解决方法:清楚缓存[File]-&gt;[InvalidateCaches]除此之外,查阅其他资料,发现jdk不生效也可用次方法解决。如果帮助到你,麻烦点个赞~十分感谢…

    2022年6月23日
    315
  • 2019-1024杂记「建议收藏」

    今天1024,程序员的节日。这个节日对我来说从陌生到熟悉,在到自己成为节日的“主角”。想到自己选择的工作,程序员的工作,有时候真的是自己想干的嘛,其实我也不知道。由于历史的某个偶然的选择,成就了当下的必然结果。当下的某个选择,又会影响未来的发展。被时间裹挟向前一年复一年…

    2022年2月28日
    45
  • CSGO开箱网站大全_csgo哪个开箱网站能直接取

    CSGO开箱网站大全_csgo哪个开箱网站能直接取csgo开箱网站有哪些?csgo开箱网站大全##以下国内知名CSGO开箱网站官网直达链接优惠码/推广码网站状态incsgocsgogo直接取回skinsdogcsgogo直接取回88skinscsgo直接取回skskinscsgogo直接取回npskinscsgogo直接取回fateskinscsgo直接取回yskins暂无可取回coolkaixiangcsgo直接取回piggycasecsgogo

    2022年10月6日
    2
  • JMeter下载安装以及使用教程

    JMeter下载安装以及使用教程JMeter下载1、下载地址:https://jmeter.apache.org/download_jmeter.cgi2、下载后无需安装,解压后即可使用。解压后目录如下:3、打开JMeter中bin目录下面的jmeter.bat双击即可打开JMeter了,打开的时候会有两个窗口,Jmeter的命令窗口和Jmeter的图形操作界面,不要关闭命令窗口,打开界面如下:4、打开jmeter软件,发现显示的为英文,更改为中文步骤如下:点击菜单栏【Options】按钮然后依次单击【Cho

    2025年6月16日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号