audio标签的使用方式

全栈程序员-站长 • 2025年9月23日下午1:15 • 未分类 • 阅读 3

audio标签的所有常见属性
- - 常用的标签属性:
    - autoplay:自动播放
    - Controls:这个属性展示播放条
    - loop:标签会自动循环播放
    - Preload:音屏在加载时,就进行加载准备开始自动播放了
    - src:地址
    - muted:静音
  - 只读属性:
    - Duration:双进度浮点数,音屏的播放时长,以秒为单位。若音频不可用或者音频未加载，则返回NaN
    - paused:若音频被暂停或者未开始播放，则返回true
    - ended:音屏是否播放完毕播放完返回true
    - error:发生错误情况下的MediaError对象
    - currentSrc:返回正在播放或加载的音频的URL地址，对应于浏览器在source元素中选择的文件
    - seeking：用户是否在音频中移动或者跳跃到新的播放点
  - 可读可写属性:
    - autoplay：设置音频自动播放，或者查询音频是否设置autoplay
    - currentTime：返回音频当前的播放时间点，双精度浮点数，单位为秒。音频未播放，可用于设置音频开始播放的时间点。音频播放过程中，可用于设置音频播放时间点
    - loop：设置或者查询音频是否循环播放
    - volume：返回音量值，介于0-1之间的双进度浮点数，或者设置音量值
    - muted：设置或者查询是否静音
    - playbackRate：设置或者查询音频的播放速度，1表示正常速度，大于1表示快进，0-1之间表示慢进，0表示暂停（控制面板仍然是播放，仅仅是速度为0）
  - 特殊属性:
    - played:表示用户已经播放的音频范围，返回 TimeRanges 对象，其中TimeRanges对象包括一个length属性和start()、end()两个方法。
      - length：获取音频范围的数量，未开始播放为0，开始播放后至少为1
      - start(index)：获取某个音频范围的开始位置
      - end(index)：获取某个音频范围的结束位置
    - buffered:表示浏览器已经缓存的音频范围，返回TimeRanges对象，若音频已完全加载则buffered.length为1，buffered.start(0)为0，buffered.end(0)为音频时长
    - networkState:不常用
    - error
  - 方法:
    - play():播放音频，返回Promise，播放成功时为resolved，因为任何原因播放失败为rejected
    - pause(): 暂停音频，无返回值
    - load():重新加载src指定的资源
  - 常用事件
    - Loadstart:开始载入音频时触发
    - duracyionchange:duration属性更新时触发
    - Loadeddata:音频的第一帧加载完成时触发，此时整个音频还未加载完
    - Loadedmetadata:音频元数据加载完成时触发
    - Progress:音屏正在加载时触发
    - canplay:浏览器能够开始播放音频时触发
    - Canplaythrough:浏览器预计在不停下来进行缓冲的情况下，能够持续播放指定的音频时会触发
  - 其他事件
  <audio>可以在标签内部添加文字从而达到当一些浏览器不支持时,直接展示文字</audion>