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


相关推荐

  • python常用库有哪些_怎么查看python的库

    python常用库有哪些_怎么查看python的库python之Sklearn库0前言1.数据集的预处理1.0下载数据1.1数据查看1.2标签清洗1.3标签编码1.4数据集得标准化1.5构建训练集和测试集2.八大分类算法2.1K近邻(KNN)2.1.1介绍2.1.2实现2.2朴素贝叶斯算法2.2.1介绍2.2.2实现2.3决策树算法2.3.1介绍2.3.2实现2.4逻辑回归2.4.1介绍2.4.2实现2.5支持向量机算法2.5.1介绍2.5.2实现2.6集成方法–随机森林2.6.1介绍2.6.2实

    2022年10月17日
    6
  • 宋宝华: 纪念金庸先生——程序员的武侠世界

    在漫天的星河中,有这样一颗星,他朴实无华,却又熠熠生辉,照亮了无数人的人生。他就是金庸先生。随着一代大侠的驾鹤西去,“飞雪连天射白鹿,笑书神侠倚碧鸳”,成为绝响。 每一个…

    2022年4月17日
    42
  • 好看的table css样式_html漂亮表格效果

    好看的table css样式_html漂亮表格效果<styletype=”text/css”> table{ border-collapse:collapse; table-layout:fixed; border-radius:5px; overflow:hidden; margin:10pxauto; border:2pxsolid#70aefb; background-color:…

    2026年2月3日
    3
  • 海量图片存储解决方案

    海量图片存储解决方案当今世界,互联网、大数据应用迅猛发展,物联网、人工智能、云计算技术日新月异,随之而来的是各种企业和个人应用持续不断地产生亿级甚至是百亿级的海量小文件。这些小文件的元数据管理、存储性能以及访问效率等问题因而成为学术界和工业界公认的难题。例如,国内目前最大的电商网站淘宝存储的商品图片超过200亿张,这些文件的平均大小仅为15KB左右,国外著名的社交网站Facebook存储的图片总量更是超…

    2022年7月12日
    22
  • Mysql04

    Mysql04

    2022年3月5日
    45
  • 传奇sf架设服务器_传奇怎么架设服务器

    传奇sf架设服务器_传奇怎么架设服务器传世SF私服搭建架设教程下载!传奇世界私服搭建教程2017是传世SF私服搭建教程!提供传奇世界h5一键服务端商业版+架设教程-服务器端!传世SF私服游戏介绍传奇世界单机版,小编第一次接触传奇世界是在03年,过去这么多年,发现这款经典游戏竟然还有生命力,在这里给大家整合了网友提供的最新单机版,辅助大家回味高中时代那些青涩的回忆。此单机版很给力。根据官网提供的版本制作,拥有全部的最新地图以及技能怎…

    2022年10月5日
    5

发表回复

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

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