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


相关推荐

  • Java判断对象是否为空的方法:isEmpty,null,” “[通俗易懂]

    Java判断对象是否为空的方法:isEmpty,null,” “[通俗易懂]今天修改辞职同事遗留的代码才发现这个问题,不能用isEmpty来判断一个对象是否为null,之前没在意这个问题,在报了空指针之后才发现这个问题。查了一下关于判断为空的几个方法的区别,这里做一个简单的总结:null一个对象如果有可能是null的话,首先要做的就是判断是否为null:object==null,否则就有可能会出现空指针异常,这个通常是我们在进行数据库的查询操作时,查询结果首…

    2022年6月13日
    93
  • Ubuntu下安装Python3和IDLE3

    Ubuntu下安装Python3和IDLE3一、安装Python3:首先,输入命令:sudoapt-getinstallpython3然后会发现已经有python了。。。输入:python,就可以知道Python是否安装成功,并且可

    2022年7月6日
    25
  • 详解ThinkPHP支持的URL模式有四种普通模式、PATHINFO、REWRITE和兼容模式

    详解ThinkPHP支持的URL模式有四种普通模式、PATHINFO、REWRITE和兼容模式

    2021年10月17日
    42
  • Linux如何安装PHPMyAdmin

    Linux如何安装PHPMyAdmin1,我们要以root帐号登入。2,PHP支持模块安装。在CentOS操作系统安装完毕后,其实PHP支持模块并没有安装上去,如果想使用PhpMyAdmin,首先需要安装PHP支持模块,我们需要两个PHP支持模块:一,“PHPscriptinglanguageforcreatingdynamicwebsites”;二,“AmoduleforPHPapplicationsthat

    2022年5月7日
    35
  • eclipse如何使用svn_pr入门教程

    eclipse如何使用svn_pr入门教程一、Windows下安装SVN安装过程直接点击下一步即可,不想用默认位置的话,可以更改安装位置。二、检查安装是否成功1、检查环境变量中是否自动配置了系统变量。(默认是自动配置的)。2、安装根目录其中bin目录下是一些可执行文件(.exe)3、打开cmd窗口,输入命令svn–version检查版本号,查看安装是否成功。由于已经配置了环境变量,所以可以在任何位置使用svn…

    2022年9月26日
    2
  • pycharm选哪个版本_pycharm版本区别

    pycharm选哪个版本_pycharm版本区别在pycharm中点击file-&gt;setting-&gt;project-&gt;projectInterpreter。 在出现的projectInterpreter右边的齿轮形状的图标点击add如下图,可以选择自己的版本

    2022年8月26日
    9

发表回复

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

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