HTML5 audio 属性和方法

文章热词:audio

日期:2019-03-04 09:40 by Mr. Yang 732 0 收藏
我要分享

摘要:HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。

属性:

    src:必需,音频来源;

    controls:常见,设置后显示浏览器默认的audio控制面板,不设置默认隐藏audio标签;

    autoplay:常见,设置后自动播放音频(移动端不支持);

    loop:常见,设置后音频将循环播放;

    preload:常见,设置音频预加载(移动端不支持);

    volume:少见,设置或返回音频大小,值为0-1之间的一个浮点数(移动端不支持);

    muted:少见,设置或返回静音状态;

    duration:少见,返回音频时长;

    currentTime:少见,设置或返回当前播放时间;

    paused:少见,返回当前播放状态,是否暂停;

    buffered:少见,一个TimeRanges对象,包含已缓冲的时间段信息,即加载进度。该对象包含一个属性length,返回一个从0开始的数表示当前缓冲了多少段音频;还包含两个方法,start()、end(),分别需要传入一个参数,即传入音频已加载的第几段,从0开始。start()返回该段的起始时间,end()返回该段的终点时间。举例:即传入0,第一段的起始是0,终止时间是17,单位秒;

    属性就介绍到这里,可能还有一些比较少用的属性如:playbackRate等,在视频播放中可能会用到,我就暂不讲解。

方法:

    play():开始播放音频;

    pause():暂停播放音频;

    事件:

    canplay:当前音频可以开始播放(只加载了部分buffered,并未全部加载完成);

    canplaythrough:可以无停顿播放(即音频全部加载完成);

    durationchange:音频时长发生变化;

    ended:播放结束;

    error:发生错误;

    pause:播放暂停;

    play:播放开始;

    progress:音频下载过程中触发,事件触发过程中可以通过访问audio的buffered属性获取加载进度;

    seeking:音频跳跃中触发,即为修改currentTime时;

    seeked:音频跳跃完成时触发,即为修改完成currentTime时;

    timeupdate:音频播放过程中触发,同时currentTime属性在同步更新;

    事件就介绍到这里,可能还有一些不常用的事件暂不讲解。

    最后再讲解一下一个音频从开始加载到播放结束过程中,所触发的事件流以及我们在不同时间段可以操作的属性:

    loadstart:开始加载;

    durationchange:获取到音频时长(此时可以获取duration属性);

    progress:音频下载中(将伴随下载过程一直触发,此时可以获取buffered属性);

    canplay:所加载的音频足够开始播放(每次暂停后开始播放也会触发);

    canplaythrough:音频全部加载完成;

    timeupdate:播放过程中(currentTime属性伴随着同步更新);

    seeking:修改当前播放进度中(即为修改currentTime属性);

    seeked:修改当前播放进度完成;

    ended:播放完成;

    这就是整个音频的大致事件流,可能有一些少用的事件没有列举出。

    在事件触发过程中,有一些属性在音频还没有开始加载的时候就可以设置,如:controls、loop、volume等等;


上一篇:智能机器人API接口说明

下一篇:前任3——经典语录


评论