CSS多媒體音頻標(biāo)簽是一種HTML標(biāo)簽,被用來添加音頻到網(wǎng)頁中。它定義了一個音頻的音頻流。
<audio src="path/to/audio/file.mp3"></audio>
在上面的代碼中,<audio>
標(biāo)簽定義了一個音頻,而src
屬性指定了音頻文件的路徑。當(dāng)頁面加載時,瀏覽器會自動加載并播放音頻。
除了src
屬性,<audio>
標(biāo)簽還有其他屬性:
<audio src="path/to/audio/file.mp3" controls loop autoplay></audio>
controls
屬性添加音頻控件,使用戶可以控制音頻的播放、暫停、音量等。loop
屬性允許音頻循環(huán)播放。autoplay
屬性將音頻自動播放。
此外,<audio>
標(biāo)簽還有以下子元素:
<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>
標(biāo)簽定義了音頻文件的不同格式,使得在瀏覽器不支持當(dāng)前音頻格式時,瀏覽器可以使用其他格式。同時,<audio>
標(biāo)簽也支持<track>
標(biāo)簽,定義添加音頻文本軌道。
與其他HTML標(biāo)簽一樣,<audio>
標(biāo)簽也可以使用CSS樣式屬性來增強(qiáng)和自定義音頻控件。
<style> audio { width: 100%; max-width: 500px; } audio::-webkit-media-controls-volume-slider { height: 8px; } </style>
在上面的CSS樣式中,我們設(shè)置了音頻播放器的最大寬度為500像素,并修改音頻控件中音量滑塊的高度。
在結(jié)尾處添加一個文本提示使得當(dāng)瀏覽器無法播放音頻時,會顯示該文本。即使沒有文本提示,瀏覽器在無法播放音頻時,也會顯示默認(rèn)的文本提示。
Your browser does not support the audio tag.