定义和用法

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

实例

一段简单的 HTML 5 音频:

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

提示和注释

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

属性

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

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

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

src url 要播放的音频的 URL。

全局属性

<audio> 标签支持 HTML 5 中的全局属性。

事件属性

<audio> 标签支持 HTML 5 中的事件属性。

 播放暂定简单实例

        <audio id="myaudio"></audio><span class="btnOne" id="play" onclick="playAudio();">Play</span><input type="text" id="audiofile" size="80" value="../images/wind.mp3" /><script type="text/javascript">var currentFile = "";function playAudio() {if (window.HTMLAudioElement) {try {var oAudio = document.getElementById('myaudio');var btn = document.getElementById('play');var audioUrl = document.getElementById('audiofile');//判断时候有值if (audioUrl.value !== currentFile) {oAudio.src = audioUrl.value;currentFile = audioUrl.value;}//播放或停止if (oAudio.paused) {oAudio.play();btn.textContent = "Pause";} else {oAudio.pause();btn.textContent = "Play";}} catch (e) {alert(e);}}}</script>

简单实例2:使用Bootstrap按钮

<div class="container"><p>../content/audio/海阔天空.mp3</p><button class="btn btn-primary"><i class="glyphicon glyphicon-play"></i></button>
</div>
<audio id="myAudio"></audio>
<script>var currentFile = '../content/audio/海阔天空.mp3';//判断浏览器是否支持audioif (!window.HTMLAudioElement) {alert('您的浏览器不支持audio标签');} else {//绑定按钮事件
        $('.btn').click(function () {var icon = $(this).find('i');var myAudio = document.getElementById('myAudio');//播放if (myAudio.src.length <= 0) {myAudio.src = currentFile;}if (myAudio.paused) {myAudio.play();icon.removeClass('glyphicon-play').addClass('glyphicon-pause');} else {myAudio.pause();icon.addClass('glyphicon-play').removeClass('glyphicon-pause');}});}
</script>

audio 标签简介相关推荐

  1. HTML5 Audio标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  2. 第六节:用audio标签打造一个属于自己的HTML5音乐播放器

    上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...

  3. HTML5 Audio标签API整理(一)

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

  4. audio标签控制音量_html中audio标签的使用

    在HTML5标准网页里面,我们可以运用audio标签来完成我们对声音的调用及播放.以下是最经常见到的运用HTML5三种基本格式: 1.最少的代码 2.带有不兼容提醒的代码 Your browser d ...

  5. HTML5 Audio标签方法和函数API介绍

     问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函 ...

  6. audio标签下方有空隙的原因与解决方法

    audio标签下会与相邻标签产生空隙,如图所示 原因: 块级元素包含内联元素时,内联元素默认是和父级元素的baseline(基线)对齐的,而baseline又和父级元素底边有一定的距离(这个距离和fo ...

  7. php中文歌词,详细介绍HTML5使用Audio标签实现歌词同步的效果

    HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签.通过本文给大家介绍HTML5使 ...

  8. HTML5 audio 标签-在html中定义声音的标签

    2019独角兽企业重金招聘Python工程师标准>>> 本文来源 169it HTML 5 <audio> 标签定义和用法 <audio> 标签定义声音,比如 ...

  9. HTML5 Audio/标签Api整理(二)

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

最新文章

  1. 第五周周记(国庆第七天)
  2. 带你看懂LayoutInflater中inflate方法
  3. php的封装继承多态,PHP面向对象深入理解之二(封装、继承、多态、克隆)
  4. Netty入门之Netty的基本介绍和IO模型
  5. Mysql8 group replication组复制集群单主多主模式切换
  6. Spring MVC遭遇checkbox的问题解决方式
  7. xss攻击-跨站脚本漏洞修复 Springboot项目
  8. node中封装MongoDB
  9. 最新AxureUX WEB端交互原型通用组件模板库 组件仍然是这套作品的核心内容,这套作品的组件由通用组件、数据录入、数据展示、信息反馈
  10. IOS开发之——硬件开发-蓝牙介绍(05)
  11. Symbian智能手机特殊号码搜集(转)
  12. c语言编程身高体重测量,身高体重测量系统设计.doc
  13. android模拟器字体,真正免root的ifont字体软件详细使用教程
  14. iOS获取当前设备型号等信息总结 包含iPhone7和iPhone7P
  15. 终端常用的命令及功能
  16. Linux服务器卡顿如何排查
  17. 微信小程序如何设置背景图片
  18. python string转float原来如此简单,集合set的操作,对于动态变化的训练集操作
  19. 什么是Socks5代理?
  20. 查看linux系统CPU和内存命令

热门文章

  1. leetcode704. 二分查找
  2. 单链表不带头标准c语言实现
  3. Redis整合springboot实现哨兵模式
  4. 科目三电子路考哪些情况会被评判不合格
  5. 人生致命的八个经典问题
  6. 成功男士的健康心理特征
  7. 264,avs重要的变量:
  8. 认识高清视频编码(MPEG、H.264、WMV-HD、RMVB)
  9. H.264的CAVLC(编码.解码)过程详解
  10. springCloud - 第6篇 - 网关的实现:ZUUL