多媒体audia元素_audio元素-CSDN博客

本文链接：https://blog.csdn.net/2402_83667710/article/details/144274367

src属性：通过src="movie.ogg"指定了音频文件的来源是名为 “movie.ogg” 的文件，这表明浏览器会尝试加载这个文件来进行播放。
controls属性：添加该属性后，浏览器会显示默认的音频播放控制条，包括播放 / 暂停按钮、进度条、音量调节等功能，方便用户操作音频播放。
loop属性：使得音频在播放结束后会自动循环播放，不断重复播放这段音频内容。
回退内容：在<audio>标签内的 “您的浏览器不支持<audio>元素” 这段文字是当浏览器不支持<audio>标签时显示的提示信息，起到一定的兼容性提示作用。

controls和loop属性：与第一个<audio>元素类似，controls提供播放控制条，loop实现循环播放功能。
autoplay属性：该属性会让音频在页面加载完成后自动开始播放。不过需要注意的是，在很多浏览器中，为了避免打扰用户体验以及节省流量等原因，对自动播放音频有一定限制，例如要求页面是用户主动交互后（比如点击过页面某个元素等）才允许自动播放，否则可能不会生效。
<source>标签：这里使用了两个<source>标签来指定不同格式的音频源文件。浏览器会按照顺序尝试加载这些音频文件，先尝试加载src="Simpsons.mp4"（类型为type="audia/ogg"，不过这里类型标注可能有误，通常.mp4是视频格式，如果是音频的话常见的是audio/mp4等正确的 MIME 类型标注），如果无法加载该文件或者不支持这种格式，就会尝试加载src="love.mp3"（类型为type="audia/mpeg"，正确的应该是audio/mpeg）。这种多源设置有助于提高音频在不同浏览器环境下的兼容性，因为不同浏览器对音频格式的支持情况有所不同。
回退内容：同样也有 “您的浏览器不支持<audio>元素” 作为浏览器不支持<audio>标签时的提示信息。

controls属性：显示音频播放控制条，便于用户操作播放。
preload="metadata"属性：该属性告知浏览器优先加载音频文件的元数据信息，比如音频的时长、音轨信息等，而不是立即加载整个音频文件内容。这样可以在用户未点击播放前就提前获取音频的一些基本信息，有助于页面更好地规划资源加载和显示相关提示信息等，同时相比直接预加载整个音频文件能节省一定带宽和加快页面初始加载速度（尤其是对于较大的音频文件）。
<source>标签：通过<source src="有没有.mp4" type="audia/mpeg"指定了音频源文件及格式（同样这里格式类型标注有错误，.mp4作为音频格式时 MIME 类型标注不准确），如果浏览器不支持该文件或格式，会显示 “您的浏览器不支持<audio>元素” 提示信息。