实例

一段简单的 HTML 5 音频:

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

亲自试一试

浏览器支持

IE Firefox Chrome Safari Opera
         

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 标签。

注释:Internet Explorer 8 以及更早的版本不支持 <audio> 标签。

定义和用法

<audio> 标签定义声音,比如音乐或其他音频流。

HTML 4.01 与 HTML 5 之间的差异

<audio> 标签是 HTML 5 的新标签。

提示和注释

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

属性

new : HTML5 中的新属性。

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

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

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

src url 要播放的音频的 URL。

audio标签的更多相关文章

  1. HTML5的Audio标签打造WEB音频播放器

    目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...

  2. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

  3. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  4. 使用audio标签播放音频文件

    HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等. 例如 ...

  5. H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度

    最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...

  6. <video>和<audio>标签

    一.<video>基本格式: <video width=" " heigh="" src=""> </vide ...

  7. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  8. HTML5 <Audio>标签API整理(一)

    简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...

  9. 关于HTML5中audio标签在手机中的autoplay

    这个问题是我最头疼的: 问题描述:在开发手机网页的时候,苹果和三星的一些浏览器不能自动开始播放 解决办法:在这个页面上弹出一个层来触发audio标签的play()方法,或者你还可以 谷歌一下----& ...

  10. <audio> 标签简介

    定义和用法 <audio> 标签定义声音,比如音乐或其他音频流. 实例 一段简单的 HTML 5 音频: <audio src="someaudio.wav"&g ...

随机推荐

  1. Redis和消息队列使用实战

    消息队列是在乐视这边非常普遍使用的技术.在我们部门内部,不同的项目使用的消息队列实现也不一样.下面是支付系统的流转图(部门兄弟画的,借用一下): 从图中可以看到,里面用到了kafka消息队列.作用是做 ...

  2. logstash结合zabbix报警安装部署

    cd /usr/share/logstash/ vim Gemfile source "https://ruby.taobao.org/" ##修改成国内镜像站 source &q ...

  3. 用Redis实现优先级队列

    在最近在面试过程中,张先森遇到一个面试官这么问,如果一个并发很大的消息应用,想要根据请求的优先级来处理,该怎么做.我当时只是笼统地回答用redis,面试官点了点头,这个问题就此通过. 那么用redis ...

  4. 记一次VS Code崩溃的解决(Win10扫描自动回复系统文件)

    早上修改Vue.js框架搭建的项目,正高兴着,突然电脑崩溃,重启后VS code打不开,报错如下: DWrite.dll丢失 然后查看了一下 C:\windows\system32\下  DWrite ...

  5. vue调试工具vue-devtools安装及使用

    本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装:  1.到github下载: ...

  6. Jquery $(this).attr和$(this).val用法示例

    以下是个人心得整理,有兴趣朋友可以参考参考 $(this).attr(key); 获取节点属性名为key的值,相当于getAttribute(key)方法 $(this).attr(key,value ...

  7. 在fetch方法中添加header后遇到的预检请求问题

    今天在使用fetch方法 fetch('xxx.com',{header:{bbbbbbb:111}}) 浏览器返回的请求信息中,header变成了 :authority:koss.nocorp.me ...

  8. ORACLE SEQUENCE跳号总结

      在ORACLE数据库中,序列(SEQUENCE)是使用非常频繁的一个数据库对象,但是有时候会遇到序列(SEQUECNE)跳号(skip sequence numbers)的情形,那么在哪些情形下会 ...

  9. 【渗透课程】第三篇-体验http协议的应用

    之前我们都了解了,访问网页时,客户端与服务端之间的请求与响应数据交互.本篇就浅谈它的应用. 利用HTTP拦截突破前段验证 比方说,我们在某个网页提交某些数据(例如留言.上传.插入xss等),发生错误( ...

  10. c++中find函数的用法

    find函数主要实现的是在容器内查找指定的元素,并且这个元素必须是基本数据类型的.查找成功返回一个指向指定元素的迭代器,即元素在容器中的下标,查找失败返回end迭代器. 头文件 #include &l ...