Audio 标签是 HTML5 原生音频播放器，提供 currentTime、duration、paused 等属性，play()、pause()、load() 等方法，以及 canplay、ended、timeupdate 等事件，支持自定义控制、进度条、静音、倍速等功能。

Audio 标签本身是 HTML5 提供的原生音频播放器，它不仅支持基础播放，还暴露了丰富的 JavaScript API，可用于精准控制播放状态、音量、时间、缓冲等行为。 掌握这些 API 是实现自定义播放器、进度条、静音切换、倍速播放等功能的关键。

常用属性与状态获取

通过 audio 元素的 DOM 对象可直接读取当前播放状态和媒体信息：

• currentTime：当前播放时间（秒），可读可写（写入即跳转）
• duration：总时长（秒），加载完成前为 NaN，建议监听 loadedmetadata 或 canplay 事件后再读取
• paused：布尔值，true 表示已暂停（含未开始）
• ended：布尔值，true 表示播放自然结束
• volume：音量值（0.0–1.0），默认为 1
• muted：是否静音，设为 true 会覆盖 volume
• playbackRate：播放速率（如 0.5、1.0、1.5、2.0），支持变速
• buffered：返回 TimeRanges 对象，表示已缓冲的时间段，常用于绘制缓冲进度条

核心方法调用

所有控制逻辑都依赖以下几个关键方法：

• play()：启动或恢复播放；返回 Promise，失败时会 reject（例如用户未交互就自动播放被浏览器阻止）
• pause()：暂停播放，不重置 currentTime
• load()：重新加载音频源（如更换 src 后需调用）
• canPlayType(type)：检查浏览器是否支持某 MIME 类型（如 "audio/mpeg"），返回 "probably"、"maybe" 或空字符串

注意：play() 在移动端通常需由用户手势（如 click/tap）触发，否则会被静默拒绝。

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

重要事件监听

响应播放生命周期变化，必须监听对应事件：

• canplay：媒体已加载足够数据，可开始播放（但不一定能播完）
• loadedmetadata：元数据（时长、尺寸等）已加载完成
• timeupdate：播放时间更新时频繁触发（约每 200–250ms 一次），适合更新进度条
• ended：播放自然结束时触发
• error：加载或解码出错时触发，可通过 audio.error.code 判断错误类型（如 4 表示网络错误）
• waiting / playing：分别表示等待缓冲和开始播放（可用于显示加载中状态）

实用控制技巧

结合属性、方法与事件，可快速实现常见功能：

• 拖动进度条：监听 input/change 事件 → 设置 audio.currentTime = value → 触发 play()（若已暂停）
• 静音/取消静音：切换 audio.muted = !audio.muted，无需改 volume
• 音量滑块：绑定 input 事件 → audio.volume = slider.value（注意限制在 0–1）
• 播放速率切换：如 audio.playbackRate = 1.5，部分浏览器可能不支持非标准值
• 自动续播：监听 ended 事件 → 调用 audio.currentTime = 0; audio.play();

不复杂但容易忽略。

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！