CSS多媒体音频标签是一种HTML标签,被用来添加音频到网页中。它定义了一个音频的音频流。
<audio src="path/to/audio/file.mp3"></audio>
在上面的代码中,<audio>
标签定义了一个音频,而src
属性指定了音频文件的路径。当页面加载时,浏览器会自动加载并播放音频。
除了src
属性,<audio>
标签还有其他属性:
<audio src="path/to/audio/file.mp3" controls loop autoplay></audio>
controls
属性添加音频控件,使用户可以控制音频的播放、暂停、音量等。loop
属性允许音频循环播放。autoplay
属性将音频自动播放。
此外,<audio>
标签还有以下子元素:
<audio> <source src="path/to/audio/file.mp3" type="audio/mpeg"> <source src="path/to/audio/file.ogg" type="audio/ogg"> Your browser does not support the audio tag. </audio>
这里的<source>
标签定义了音频文件的不同格式,使得在浏览器不支持当前音频格式时,浏览器可以使用其他格式。同时,<audio>
标签也支持<track>
标签,定义添加音频文本轨道。
与其他HTML标签一样,<audio>
标签也可以使用CSS样式属性来增强和自定义音频控件。
<style> audio { width: 100%; max-width: 500px; } audio::-webkit-media-controls-volume-slider { height: 8px; } </style>
在上面的CSS样式中,我们设置了音频播放器的最大宽度为500像素,并修改音频控件中音量滑块的高度。
在结尾处添加一个文本提示使得当浏览器无法播放音频时,会显示该文本。即使没有文本提示,浏览器在无法播放音频时,也会显示默认的文本提示。
Your browser does not support the audio tag.