位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML5 使用audio

提问人:刘团圆发布时间:2020-11-23

■知识点

HTML5新增的<audio>标签可以播放声音文件或音频流,支持OggVorbis、MP3、WAV等音频格式。

用法如下:

    <audio src="samplesong.mp3" controls="controls"></audio>

    其中src属性用于指定要播放的声音文件,controls属性用于设置是否显示工具条。<audio>标签支持属性如表所示。

autoplay

autoplay

如果出现该属性,则音频在就绪后马上播放

controls

controls

如果出现该属性,则向用户显示控件。如播放按钮

loop

loop

如果出现该届性,则每当音频结束时重新开始播放

preload

preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放;如果使用 autoplay,则忽略该属性

src

URL

要播放的音频的URL

■实例设计

    <audio>标签可以包裹多个<s0Urce>标签,用来导入不同的音频文件,浏览器会自动选择第一个可以识别的格式进行播放。

<audio controls〉

    <source src="medias/test.ogg" type="audio/ogg">

    <source src="medias/test.mp3" type=naudio/mpeg">

    <p>你的浏览器不支持HTML5 audio,你可以<a href="piano.mp3">下载音频文件</a> (MP3, 1.3 MB)</p>

</audio>

    以上代码在Chrome浏览器中的运行结果如图3.5所示,这个audio元素(含默认控件集)定义了两个音频源文件,一个编码为Ogg,另一个为MP3。完整的过程同指定多个视频源文件的过程是一样的。浏览器会忽略它不能播放的,仅播放它能播放的。

    支持Ogg的浏览器(如Firefox)会加载piano.ogg。Chrome同时理解Ogg和MP3,但是会加载Ogg文件,因为在audio元素的代码中,Ogg文件位于MP3文件之前。不支持Ogg格式,但支持MP3格式的浏览器(IE10)会加载test.mp3,旧浏览器(如IE8)会显示备用目息。

■小结

    <source>标签可以为〈video〉和<audio>标签定义多媒体资源,它必须包裹在<video>或<audio>标识符内。<source>标签包含如下3个可用属性。

    media:定义媒体资源的类型。

    src:定义媒体文件的URL。

    type:定义媒体资源的MIME类型。如果媒体类型与源文件不匹配,浏览器可能会拒绝播放。

    可以省略type属性,让浏览器自动检侧编码方式。

    为了兼容不同浏览器,一般使用多个<sourCe>标签包裹多种媒体资源。对于数据源,浏览器会按照声明顺序进行选择,如果支持的不止一种,那么浏览器会优先播放位置靠前的媒体资源。数据源列表的排放顺序应按照用户体验由高到低,或者服务器消耗由低到高列出。

    例如,下面代码将在页面中插入背景音乐:在<audio>标签中设置autoplay和loop属性。

<audioautoplay loop>

    <source src="medias/test.ogg" type="audio/ogg">

    <source src="medias/test.mp3" type="audio/mpeg">

您的浏览器不支持<audio>标签。

</audio>


继续查找其他问题的答案?

相关视频回答
回复(0)

特邀嘉宾

软件开发工程师——刘团圆

软件开发专业科班出身,擅长软件开发课程培训。

向TA咨询

该嘉宾的QQ群

更多>>
    返回顶部
    国产电影_2020最新好看的内地国产电影推荐_国产电影排行榜