美文网首页
HTML 5 音频

HTML 5 音频

作者: 透支未来 | 来源:发表于2019-01-14 11:18 被阅读2次

HTML5 提供了播放音频的标准。

Web 上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

音频格式

当前,audio 元素支持三种音频格式:

| | IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
| Ogg Vorbis | | √ | √ | √ | |
| MP3 | √ | | | √ | √ |
| Wav | | √ | √ | | √ |

如何工作

如需在 HTML5 中播放音频,您所有需要的是:

<audio src="song.ogg" controls="controls">
</audio>
</pre>

control 属性供添加播放、暂停和音量控件。

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的:

实例

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
</pre>

亲自试一试

上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:

实例

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</pre>

亲自试一试

Internet Explorer

Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。

<audio> 标签的属性

| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
| loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
| preload | preload |

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

|
| src | url | 要播放的音频的 URL。 |

相关页面

参考手册:HTML 5 <audio> 标签

相关文章

  • HTML5视频与音频

    @(HTML5)[HTML5视频与音频] [TOC] 十二、HTML5视频与音频 简单介绍HTML5 对视频和音频...

  • HTML 5 音频

    HTML5 提供了播放音频的标准。 Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准。 今天,大...

  • HTML 5 基础单词

    HTML 5 基础单词 1.1 如何在HTML中加入音频和视频。 音频 主要单词 audio 添加音频 cont...

  • html5视频和音频

    html5视频和音频

  • 【重构前端知识体系之HTML】HTML5视频播放的方式

    【重构前端知识体系之HTML】HTML5视频播放的方式 引言 上节讲了HTML5的音频播放,和音频播放一样,需要借...

  • 2020-04-02

    1.如何在 HTML5 页面中嵌入音频?HTML 5 包含嵌入音频文件的标准方式,支持的格式包括 MP3、Wav ...

  • HTML 5 多媒体

    HTML 5 多媒体 在HTML4.01时候想插入音频,视频,必须借助flash, 1. 视频音频了解 1.1. ...

  • html5之音频视频详解

    html5已经为我们提供了音频和视频的控制让我们不必在依赖于Flash。本次我将为大家讲解html5的音频和视频操...

  • audio使用

    html: -controls: 显示标准的 HTML5 视频/音频播放器控制条、控制按钮。 -a...

  • 一篇文章教会你使用HTML5加载音频和视频

    【一、前言】 HTML5 特性,包括原生音频和视频支持而无需 Flash。 HTML5 和 标签让我们给站...

网友评论

      本文标题:HTML 5 音频

      本文链接:https://www.haomeiwen.com/subject/aqjddqtx.html