html5音频标签

作者: 卿卿木子七 | 来源:发表于2016-07-14 16:18 被阅读97次

1. HTML <audio> 标签

* 注意只有Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 标签

一段简单的html5音频

<audio src="/test.wav">您的浏览器不支持audio标签</audio>

以上代码不会显示音频控制也不会播放音频
它需要一些其余的属性:

属性 描述
s s s
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
loop loop 如果出现该属性,则每当音频结束时重新开始播放
muted muted 规定视频输出应该被静音
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放.如果使用 "autoplay",则忽略该属性
src src 要播放的音频的 URL

程序举例:打开页面自动播放并且显示播放按钮

<audio src="/test.wav" autoplay="autoplay" controls="controls"> Your browser does not support the audio element. </audio>

测试音频文件的链接

2. HTML <audio> 标签注意事项

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

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

上面的例子使用一个 Wav 文件,适用于Firefox、Opera 以及 Safari 浏览器。
要确保适用于 IE 9 浏览器,音频文件必须是 MP3 类型
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:

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

相关文章

  • CSS3新增1

    一、HTML5 新增标签 新增语义化标签 使用语义化标签的注意 二、多媒体音频标签 多媒体标签有两个,分别是 音频...

  • html5音频标签

    1. HTML

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

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

  • H5与CSS3

    HTML5音频标签 您当前浏览器版本过低,请更换浏览器! 标签内的文字只在不认识标签的低版本中显示音频标签基本AP...

  • HTML5 音频<audio>和视频<vide

    HTML5 特性,包括原生音频和视频支持而无需 Flash。 HTML5 和 标签让我们给站点添加媒体变得...

  • HTML5 向网页嵌入视频和音频

    现在很多网站上都会使用到视频和音频,HTML5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用 标签,而...

  • HTML5 向网页嵌入视频和音频

    现在很多网站上都会使用到视频和音频,HTML5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用 标签,而...

  • HTML标签-->HTML5新增

    HTML的Form新增属性 HTML新增标签 HTML5新增结构标签 视频和音频 CSS 引入css 基本选择器

  • 关于audio

    Audio 标签用于定义声音,比如音乐或其他音频流,HTML5 的 Audio 标签在很大程度上取代了 Flash...

  • HTML5视频与音频

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

网友评论

本文标题:html5音频标签

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