原生 无法直接继承扩展，因 chrome/firefox 禁止 extends htmlaudioelement，必须用 class myaudio extends htmlelement 封装内部 实例，并通过属性映射、事件同步与生命周期管理实现可复用控件。
原生 <audio></audio> 元素无法直接封装成可复用、带状态管理的自定义控件；必须用 customElements.define() 手动注册一个继承自 HTMLElement 的类，并在内部托管 <audio></audio> 实例——否则无法响应生命周期、无法暴露统一 API、也无法避免多次渲染冲突。
为什么不能直接 extends HTMLAudioElement
Chrome 和 Firefox 已明确不支持扩展原生媒体元素（如 HTMLAudioElement），调用 customElements.define('my-audio', class extends HTMLAudioElement {...}) 会抛出 TypeError: Illegal constructor。这是浏览器安全限制，不是 polyfill 能绕过的。
可行路径只有一条：自定义元素作为「容器」，内部创建并管理一个独立的 <audio></audio> 实例，通过属性/事件与外部通信。
- 不要尝试
class MyAudio extends HTMLAudioElement - 必须用
class MyAudio extends HTMLElement，并在connectedCallback中动态创建new Audio()或插入<audio></audio>标签 - 所有播放控制（
play、pause、currentTime）都作用于内部实例，而非自定义元素自身
如何正确绑定 audio 实例并同步属性
自定义元素需把传入的 src、loop、muted 等属性映射到内部 <audio></audio> 上，且监听变化。但注意：src 变更会触发重新加载，loop 和 muted 是布尔属性，需用 hasAttribute() 判断而非读 .loop 值。
- 在
observedAttributes中声明['src', 'loop', 'muted', 'preload'] -
attributeChangedCallback中：对src调用this._audio.src = newValue；对loop写this._audio.loop = this.hasAttribute('loop') - 避免在
connectedCallback里重复初始化_audio，应加if (!this._audio)防重入 - 对外暴露
play()、pause()方法时，必须先检查this._audio是否已 ready（例如监听loadedmetadata后才允许调用）
怎么处理 timeupdate 和用户拖拽进度条
自定义进度条本质是 <input type="range">，它和 timeupdate 事件形成双向绑定：播放时更新滑块值，拖拽时跳转 currentTime。但默认 timeupdate 触发频率高（≈4–60Hz），直接更新 DOM 易卡顿；而用户拖拽时又需暂停自动更新，否则滑块会“弹回”。
- 用
requestAnimationFrame节流timeupdate的 UI 更新，而不是每帧都设range.value = audio.currentTime - 拖拽开始时移除
timeupdate监听器或加 flag 屏蔽自动更新；松手后恢复监听 -
range的input事件中，先audio.currentTime = +event.target.value，再手动触发一次seeked事件供外部监听 - 注意：首次加载时
audio.duration为NaN，必须等loadedmetadata后才能设置range.max
autoplay 和 muted 的兼容性陷阱
现代浏览器禁止无交互自动播放有声内容，即使写了 autoplay 也会静默失败。唯一可靠方式是：等用户点击后，再调用 play() 并捕获 Promise reject —— 但这个错误无法通过 try/catch 捕获，只能靠 .catch()。
- 自定义元素不应默认执行
play()，即使有autoplay属性；应把该行为延迟到首次用户交互后 - 若同时存在
muted属性，则autoplay可立即生效，但需确保audio.muted = true在play()前已设置 - 不要依赖
autoplay属性值做逻辑分支；而是统一监听click或touchstart，再按需调用this.play() - 调用
this.play()后务必接.catch(e => console.warn('Autoplay prevented:', e))，否则静音失败也不会报错
真正难的不是写个能播的控件，而是让 currentTime 拖拽不跳、duration 加载不为空、play() 不被拦截、多次实例不互相干扰——这些都得在自定义元素的生命周期里逐层防御，而不是堆 DOM 操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
