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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 云服务器上装软件吗,云服务器能安装软件吗?[通俗易懂]

    云服务器上装软件吗,云服务器能安装软件吗?[通俗易懂]云服务器能安装软件吗?有些时候电脑需要杀毒软件是很正常的事情,但是相比于这些庞大的云系统来说,一般的杀毒软件是根本运作不起来的,因为一旦安装了杀毒软件,肯定是要全部杀毒的,不可能这个系统可以,那个系统就不可以,这就谈到了一个空间包含的问题。如果包含量太小的话,也是没有什么作用的,那么云服务器能安装什么杀毒软件呢?什么样的杀毒软件才能够更好的运转起这个庞大的空间系统呢?对于庞大的空间系统,很多厂家为…

    2022年5月23日
    50
  • SQL中decimal的相关使用[通俗易懂]

    SQL中decimal的相关使用[通俗易懂]decimal用于表示定点实数,具体使用格式为:decimal[(p[,s])],其中p表示精度,用于指定小数点左边和右边十进制数字的最大位数,取值在1-38之间,缺省值为18,s指定小数点右边十进制数的最大位数,取值在0-p之间缺省值为0(此时小数点后面没有小数位,所有输入的小数位都会被自动四舍五入)。故而定义了一个decimal类型的变量的时候,要注意这个否则就会发生越界的情况。…

    2022年7月20日
    29
  • 一定要用相同的Context 对同一个receiver进行registerReceiver与unregisterReceiver吗?

    一定要用相同的Context 对同一个receiver进行registerReceiver与unregisterReceiver吗?最近在开发一些功能,突然想到在动态注册和反注册receiver的时候一定要用相同的context吗?我不敢肯定咨询了同事,得到的答案是不行的,然而为了进一步佐证他的观点我自己尝试了一下。也就是查了一下相关代码。众所周知android的应用程序在ActivityThread的publicstaticvoidmain(String[]args)中开始调用我们写的代码,Application、A

    2022年9月11日
    0
  • 山西计算机中考操作题,2017山西中考物理实验操作试题发布

    山西计算机中考操作题,2017山西中考物理实验操作试题发布一、2017年山西省中考物理命题依据《义务教育物理课程标准(2011年版)》是2017年山西中考物理试题的唯一命题依据.二、2017年山西省中考物理命题原则1.总原则(1)内容:强化学科核心内容,弱化枝端末节内容.(2)结构:强化良好结构的知识,弱化零散的知识.(3)测查能力层次:强化概念、原理的理解与应用,及分析、综合等思维能力;弱化单纯的事实和内容记忆.(4)测查角度:强化学生理解了哪些,弱…

    2022年5月18日
    37
  • 大学最应该学习的 5 门课, 毕业后大厂 Offer 直接拿到手软!「建议收藏」

    大学最应该学习的 5 门课, 毕业后大厂 Offer 直接拿到手软!「建议收藏」时间如白驹过隙,我竟然已经是一名拥有13年编程经验的老油条了!有些自豪,因为自己从大一就开始学习的Java语言依然坚挺,几乎是编程语言中的霸主了;但也有些遗憾,大学的时候没有把这些计算机基础课程学好,有些甚至没有学,导致工作后有很长一段时间蛮吃力的,全靠近些年“废寝忘食”的补课,才有所好转。希望学弟学妹们,能从我这些经验中获得一些启发,少走一些弯路。1)计算机编程的基石——数据结构与算法2)计算机编程语言的母胎——C语言3)计算机组成原理4)计算机操作系统5)计算机网络一、数据结构

    2022年4月29日
    58
  • xp系统http服务器,WinXP HTTP500内部服务器错误的解决方法

    xp系统http服务器,WinXP HTTP500内部服务器错误的解决方法在系统造成500内部服务器错误有很多原因,而系统中出现的故障是用户最不想看到的,有时候就是因为这些故障让我们折腾个大半天才能够搞定。打开网站出现了HTTP500内部服务器错误的提示,这究竟是怎么一回事呢?下面我们就来说说WinXPHTTP500内部服务器错误的解决方法。具体解决方法如下:一、造成500错误常见原因有:ASP语法出错、ACCESS数据库连接语句出错、文件引用与包含路径出错、使用了服…

    2022年8月12日
    2

发表回复

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

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