李涛自留地
回到顶部
首页 > 前端 > html5中audio标签怎么使用？html5中audio标签使用实例

html5中audio标签怎么使用？html5中audio标签使用实例

文章目录

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标签的链接之后就会跳转到浏览器默认的音频文件播放界面。

html5中audio标签怎么使用？html5中audio标签使用实例

<audio> 默认播放器宽高如何控制

当我们在html标签中使用 <audio> 标签时，显示出来的是浏览器解析的默认的 <audio> 标签的默认播放器宽和高，那么我们如何来改变audio默认播放器的宽度和高度呢？

1、直接在audio标签中加上宽度、高度属性并指定需要的值；

2、在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>[抖音](https://www.leetao.cc/douyin "抖音")好听的歌曲凯</p>
    </div>
    <a href="LightG.mp3">点击播放抖音好听的歌曲凯</a>
</body>
</html>

最终显示效果图：

html5中audio标签怎么使用？html5中audio标签使用实例

本文通过对audio标签的作用、支持audio浏览器版本号、audio标签怎么用、audio播放器宽和高怎么控制以及一个audio标签使用实例，详细的记载了audio标签在html页面中的使用方法，希望通过本文能帮助到您。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。