audio标签怎样使用？怎样定义audio标签？

更新时间:2023-06-06 来源:黑马程序员浏览量:

HTML.5提供的<audio>标签用来定义Web上的声音文件或音频流，它的使用方法与<video>标签基本相同，语法格式如下：

<audio src="音频文件路径"controls>
     浏览器不支持audio
</audio>

当使用<audio>标签时，我们还需要注意音频文件的格式问题。<audio>标签支持以下3种音频格式。

·Ogg：Ogg音频格式类似于MP3音频格式。同等条件下，Ogg格式音频文件的音质、体积大小优于MP3音频格式，其音频文件格式表示方式为audio/ogg。

MP3：是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3(MovingPicture Experts Group Audio Layer IⅢ，MP3)，它被用来大幅度地降低音频数据量，其音频文件格式表示方成为audio/mp3。

WAV：是录音时用的标准的Windows文件格式，数据本身的格式为PCM或压缩型，属于无损音乐格式的一种，其音频文件格式表示方式为audio/wav。

<audio>标签同样支持引入多个音频源，使用<source>标签来定义，语法格式如下：

<audio controls>
     <source src=”音频文件地址"type="audio/格式">
     <source src="音频文件地址"type="audio/格式">
</audio>

对<audio>标签有了基本了解后，下面演示如何使用<audio>标签定义音频播放器。

(1)创建C:\codelchapter02demo05.html,具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <audio src="audio/music.mp3" controls>
      您的浏览器不支持 audio
    </audio>
</body>
</html>

(2)保存上述代码，在浏览器中查看运行效果，如下图所示。

1686029743320_运行效果.png

音频播放器效果

上图中的音频播放器效果类似于视频播放器的播放控件。如果不添加controls属性，则页面看到的是空白，此时只能通过JavaScript对音频播放器进行控制。

上一篇：HTML中怎样通过表格标记创建表格？ 下一篇：Canvas怎样创建画布和绘制图形？

厦门中心

热门课程

audio标签怎样使用？怎样定义audio标签？

最新资讯

相关阅读

热门课程推荐