更新时间: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)保存上述代码，在浏览器中查看运行效果，如下图所示。
音频播放器效果
上图中的音频播放器效果类似于视频播放器的播放控件。如果不添加controls属性，则页面看到的是空白，此时只能通过JavaScript对音频播放器进行控制。
JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
电商视觉设计
软件测试
新媒体+短视频
产品经理
集成电路应用开发
.jpg)