audio 标签简介
定义和用法
<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 标签简介相关推荐
- HTML5 Audio标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- 第六节:用audio标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- HTML5 Audio标签API整理(一)
简单实例: <audio id="myAudio"></audio><script>var myAudio = document.getElem ...
- audio标签控制音量_html中audio标签的使用
在HTML5标准网页里面,我们可以运用audio标签来完成我们对声音的调用及播放.以下是最经常见到的运用HTML5三种基本格式: 1.最少的代码 2.带有不兼容提醒的代码 Your browser d ...
- HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函 ...
- audio标签下方有空隙的原因与解决方法
audio标签下会与相邻标签产生空隙,如图所示 原因: 块级元素包含内联元素时,内联元素默认是和父级元素的baseline(基线)对齐的,而baseline又和父级元素底边有一定的距离(这个距离和fo ...
- php中文歌词,详细介绍HTML5使用Audio标签实现歌词同步的效果
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签.通过本文给大家介绍HTML5使 ...
- HTML5 audio 标签-在html中定义声音的标签
2019独角兽企业重金招聘Python工程师标准>>> 本文来源 169it HTML 5 <audio> 标签定义和用法 <audio> 标签定义声音,比如 ...
- HTML5 Audio/标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style>#volumeSlider .slider-selection {background:#bababa;} </style&g ...
最新文章
- 第五周周记(国庆第七天)
- 带你看懂LayoutInflater中inflate方法
- php的封装继承多态,PHP面向对象深入理解之二(封装、继承、多态、克隆)
- Netty入门之Netty的基本介绍和IO模型
- Mysql8 group replication组复制集群单主多主模式切换
- Spring MVC遭遇checkbox的问题解决方式
- xss攻击-跨站脚本漏洞修复 Springboot项目
- node中封装MongoDB
- 最新AxureUX WEB端交互原型通用组件模板库 组件仍然是这套作品的核心内容,这套作品的组件由通用组件、数据录入、数据展示、信息反馈
- IOS开发之——硬件开发-蓝牙介绍(05)
- Symbian智能手机特殊号码搜集(转)
- c语言编程身高体重测量,身高体重测量系统设计.doc
- android模拟器字体,真正免root的ifont字体软件详细使用教程
- iOS获取当前设备型号等信息总结 包含iPhone7和iPhone7P
- 终端常用的命令及功能
- Linux服务器卡顿如何排查
- 微信小程序如何设置背景图片
- python string转float原来如此简单,集合set的操作,对于动态变化的训练集操作
- 什么是Socks5代理?
- 查看linux系统CPU和内存命令