audio标签是Html5新增的一个标签，那么audio标签怎么使用，audio在html标签中又有什么作用呢？下面本文将从audio标签的作用，audio标签怎么使用？audio的宽高如何控制？
audio标签的作用
audio标签用于播放音频。要播放的音频文件由src属性指定。
支持audio标签的浏览器及版本号
| 元素 | 谷歌浏览器 | Edge | 火狐 | Safari | Opera |
|---|---|---|---|---|---|
| audio | 4.0版本以上 | 9.0版本以上 | 3.5版本以上 | 4.0版本以上 | 10.5版本以上 |
以上为支持 audio 标签的主流浏览器版本。
audio标签怎么使用
在 audio和 audio之间，可以使用src属性来规定自己需要引入的音频文件路径，使用type属性来规定引入的音频文件的类型，目前在audio标签中支持的有以下3种文件格式：MP3、Wav、Ogg。
audio标签内置属性表格：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | ontrols | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 如果出现该属性，则音频输出为静音。 |
| preload | auto metadata none | 规定当网页加载时，音频是否默认被加载以及如何被加载。 |
| src | url | 规定音频文件的 URL。 |
controls和src属性是我们使用 audio标签时的必备属性，同时source标签也是必备标签之一，如果在audio标签不使用source标签就无法单独使用src成功引入音频文件；
当我们把loop属性值放入audio标签中时，当音频播放完毕后就会继续重新循环播放；
当我们在audio标签中设置把autoplay的值为autoplay的时候，使用a标签引入页面或者是使用Js特效操作才会实现真正的自动播放音频文件，而只是在audio标签中设置是不会自动播放音频文件的。
另外我们还可以直接使用a标签，把音频文件路径放入a标签的href属性值当中，这样点击这个a标签的链接之后就会跳转到浏览器默认的音频文件播放界面。
audio默认播放器宽高如何控制
当我们在html标签中使用audio标签时，显示出来的是浏览器解析的默认的audio标签的默认播放器宽和高，那么我们如何来改变audio默认播放器的宽度和高度呢？
- 直接在audio标签中加上宽度、高度属性并指定需要的值；
- 在Css里指定audio的宽度和高度。
在下面的实例中将具体的展示如何修改audio默认播放器宽度和高度。
audio标签使用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>audio使用实例</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #999;
background-color: #f8f8f8;
}
.container {
width: 1024px;
margin: 0 auto;
}
.audio {
display: flex;
flex-flow: column;
justify-content: space-between;
align-content: space-between;
align-items: center;
width: 600px;
height: 120px;
margin: 15px;
background-color: #fff;
}
.audio audio {
/*
当我们给audio设置width属性的时候，就会改变audio默认播放器的宽度；
width: 90%;
*/
margin: auto;
}
.audio p {
line-height: 36px;
}
</style>
</head>
<body class="container">
<div class="audio">
<!--width="320" height="240"为指定audio播放器宽度和高度-->
<audio controls autoplay="autoplay" loop width="320" height="240" loop>
<source src="LightG.mp3" type="audio/mpeg">
</audio>
<p>[抖音](http://www.dhaomu.com/douyin "抖音")好听的歌曲凯</p>
</div>
<a href="LightG.mp3">点击播放抖音好听的歌曲凯</a>
</body>
</html>本文通过对audio标签的作用、支持audio浏览器版本号、audio标签怎么用、audio播放器宽和高怎么控制以及一个audio标签使用实例，详细的记载了audio标签在html页面中的使用方法，希望通过本文能帮助到您。
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：duhaomu@163.com，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持。
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
