html audio颜色,HTML audio 标签

HTML 简介

HTML 元素用于在文档中表示音频内容。

元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者 元素来进行描述； 浏览器将会选择最合适的一个来使用。

因为这个标签是 HTML5 引入的，是 HTML5 中的新属性。

对于不支持 元素的浏览器， 元素也可以作为浏览器不识别的内容加入到文档中。

除了 HTML 以外，你还可以使用 JavaScript 直接生成和控制音频流，具体详情参见 JavaScript 音频 API

本页介绍的内容，源码托管在 Github 上：https://github.com/axihe/api-html/blob/master/audio-video/tag-audio.html

提示和注释

提示：可以在 和 之间放置文本内容，这些文本信息将会被显示在那些不支持 标签的浏览器中。

HTML 标签功能

标签定义声音，比如音乐或其他音频流。

目前， 元素支持的 3 种文件格式：MP3、Wav、Ogg。

浏览器

MP3

Wav

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

YES

YES

YES

Safari

YES

YES

NO

Opera

YES

YES

YES

HTML 使用上下文

内容类别

流内容，短语内容，嵌入内容。

如果具有控件属性：交互内容和可触知的内容。

允许内容

如果元素包含 src 属性：零个或多个 元素，其后紧跟不包含 或者 媒体元素的透明内容。

或者：零个或多个 元素，其后紧跟零个或多个 元素，其后紧跟不包含 或者 媒体元素的透明内容。

标签是否可省略

不允许，开始标签和结束标签都不能省略。

允许的父级元素

任何接受嵌入内容的元素。

Permitted ARIA roles

application

DOM 接口

HTMLAudioElement

HTML 标签用法

基本用法

老铁，你的浏览器不支持 audio 元素.

上图的代码和 MP3 资源放在了 Github 上：https://github.com/axihe/api-html/blob/master/audio-video/tag-audio.html

使用 source 元素的 audio 元素

Your browser does not support the audio element.

您的浏览器不支持 audio 元素。

这个如果支持ogv, 播放第一个，不支持就使用第二个 Mp3；

注意；上面的代码在 IE9 下跑是播放第二个axihe.mp3格式的资源，而不是第一个horse.ogv

如果我们把代码放到 IE9 以下的模式来运行，发现是不能正常跑的；这时候我们设置的文字就有效果了；

如下图

浏览器支持

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 标签。

注释： IE 8 或更早版本的 IE 浏览器不支持 标签。

HTML4 与 HTML5 之间的差异

标签是 HTML5 的新标签。

属性

New ：HTML5 中的新属性。

属性

值

描述

autoplayNew

autoplay

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

autobuffer废弃

false/true

如果指定，音频将会自动开始加载，即使没有设置自动播放。

buffered

该属性包含一个 TimeRanges 对象

你可以通过该属性获取已缓冲的资源的时间段信息

controlsNew

controls

如果出现该属性，则向用户显示音频控件(比如播放 / 暂停按钮)。

loopNew

loop

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

mozCurrentSampleOffset

数值

在音频播放时，表示相对于音频开始处的偏移量的一个数值。

mutedNew

muted

如果出现该属性，则音频输出为静音。

played

一个 TimeRanges 对象

表示所有已播放的音频片段。

preloadNew

auto

metadata

none

规定当网页加载时，音频是否默认被加载以及如何被加载。

srcNew

URL

规定音频文件的 URL。

volume

值从 0.0 (无声) 到 1.0 (最大声)

音频播放的音量。

autoplay

布尔属性；如果指定(默认值为”false”！)；指定后，音频会马上自动开始播放，不会停下来等着数据载入结束。

autobuffer

已废弃 Gecko 2.0

布尔属性；如果指定，音频将会自动开始加载。即使没有设置自动播放。直到媒体缓存满了或者全部音频文件加载完毕，即使是在首次进入时。该属性应该仅仅用在用户可能会选择播放的音频上；例如用户通过“播放音频”链接来到的一个页面。该属性已在 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 中移除，使用 preload 属性取而代之。

buffered

你可以通过该属性获取已缓冲的资源的时间段信息。该属性包含一个 TimeRanges 对象。

controls

如果设置了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

loop

布尔属性；如果指定，将循环播放音频。

mozCurrentSampleOffset

在音频播放时，表示相对于音频开始处的偏移量的一个数值。

muted

表示是否静音的布尔值。默认值为 false，表示有声音。

played

一个 TimeRanges 对象，表示所有已播放的音频片段。

preload

枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：

none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；

metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。

auto: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。

空字符串 : 等效于 auto 属性。

假如不设置，默认值就是浏览器定义的了(不同浏览器会选择自己的默认值)， 即使规范建议设置为 metadata.

使用备注

autoplay 属性优先于 preload 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置 autoplay 和 preload 属性在规范里是允许的。

规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。

src

嵌入的音频的 URL。 该 URL 应遵从 HTTP access controls. 这是一个可选属性；

你可以在 audio 元素中使用 元素来替代该属性指定嵌入的音频。

volume

音频播放的音量。值从 0.0 (无声) 到 1.0 (最大声).

时间偏移量目前是指定为 float 类型的值，表示偏移的秒数。

阿 西 河 提 示： HTML 5 规范中，时间偏移量值的定义还没有完成，有可能会变更。

全局属性

标签支持 HTML 全局属性。

事件属性

标签支持 HTML 事件属性