专栏首页米扑专栏HTML5 标签audio添加网页背景音乐代码

HTML5 标签audio添加网页背景音乐代码

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

HTML 5 <audio> 标签

HTML5 audio让音乐东山再起

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

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

1234

<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"            src="http://demo.mimvp.com/html5/take_you_fly.mp3">      你的浏览器不支持audio标签</audio>

属性

描述

autoplay

autoplay

如果出现该属性,则音频在就绪后马上播放。

controls

controls

如果出现该属性,则向用户显示控件,比如播放按钮。

loop

loop

如果出现该属性,则每当音频结束时重新循环开始播放。

preload

preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。

src

url

要播放的音频的 URL。也可以使用<source>标签来设置音频。

HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持(详见此处)。不是所有的浏览器都支持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>

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

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

一旦您决定要在网站上提供音频,将面临一个有趣的设计选择。每个浏览器都有与众不同的外观,看起来像是有意识地故意使其与众不同。下面的图 1 展示了这些浏览器控件的外观。

图1:不同浏览器上的音频控件

除了 Chrome 浏览器外,所有浏览器都有开始/暂停控件、进度条、滑块、播放秒数、音量/静音控件,还显示声音文件的总秒数。使用HTML5 标准和浏览器支持,开发人员可以相信用户将拥有与 HTML5 音频类似的体验,因为浏览器控件是类似的。您还可以使用 Flash 和 Silverlight 等插件创建控件,但是对于不同的用户,体验可能会有所不同。

某些浏览器(如 IE9)甚至有自己的声音控制条,在浏览器本身之外运行。用户打开有声音的任何网站时,他们可以从 Windows 任务栏控制声音,并能够预览当前正在播放的声音。

html代码 (隐藏播放控件)

123

<audio autoplay="autoplay"><source src="http://demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg"></audio>

代码演示 (隐藏播放控件)

123

<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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python 学习入门(13)—— 正则表达式

    Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式。Python 1.5之前版本则是通过 regex 模块提供 Emacs 风...

    阳光岛主
  • HTML中css和js链接版本号的用途

    在搜索引擎中搜索关键字 .htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样...

    阳光岛主
  • JavaScript学习笔记(O)——浏览器内核介绍

    浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如HT...

    阳光岛主
  • 计算机最早提高性能的方法

    随着本系列进展,我们知道计算机进步巨大,从 1 秒 1 次运算,到现在有千赫甚至兆赫的CPU,这是很大的计算量。

    硬核编程
  • H5和WebRTC实时通讯方案对比

    如果想要在浏览器上实现音视频的实时通讯,H5和WebRTC是两种可选方案,但是二者有明显的区别,优劣也比较突出。今天,我们就来简单了解一下。

    liuzhen007
  • 什么是伺服电机,伺服电机知识汇总

    “伺服”一词源于希腊语“奴隶”的意思。“伺服电机”可以理解为绝对服从控制信号指挥的电机:在控制信号发出之前,转子静止不动;当控制信号发出时,转子立即转动;当控制...

    机器人网
  • Chrome浏览器黑屏,左上顶角缩放三个按钮消失

    在 mac 下使用 chrome时,发现全屏后,浏览器缩放按钮找不到了!!!!

    JavaEdge
  • Code: 210. DB::NetException: Connection refused (localhost:9000)

    1、为啥子报这个错误呢,因为我在Clickhouse中使用了Mysql引擎,创建一个数据表。当我使用drop database删除数据库之后,发现删除不掉,然后...

    别先生
  • 黑色产业一 上了个“假”黄网,误入了7亿黑产的大门

    一切从一个"小黄片"的谎言开始,由各种入侵为过程,最后,谁能想到,机缘巧合中,竟扣开了一扇数亿元的黑产大门… 那个再平凡不过的夜里,我一如既往的用手机刷着新闻...

    用户1631416
  • 数据中台 - 数据质量维度

    在做数据中台-数据质量的过程中,通过调研方法论,可以对数据质量技术类校验类型划分6大维度,这些维度如下:

    夹胡碰

扫码关注云+社区

领取腾讯云代金券