"MediaElementSource 节点：媒体元素接入音频图"

---

title: "MediaElementSource 节点：媒体元素接入音频图"

keywords:

• MediaElementAudioSourceNode
• Web Audio
• 音频图
• 频谱可视化
• 效果处理

description: "介绍将 <audio>/<video> 元素通过 MediaElementAudioSourceNode 接入 Web Audio 图，进行分析与效果处理，提供示例与注意事项。"

categories:

• 应用软件
• 音乐软件

---

概述

MediaElementAudioSourceNode 允许将媒体元素的音频输出接入 Web Audio 图，用于频谱分析与效果处理。需注意跨域策略与自动播放限制。

示例

const ctx = new AudioContext()
const el = document.querySelector('audio')
const src = ctx.createMediaElementSource(el)
const analyser = ctx.createAnalyser()
src.connect(analyser).connect(ctx.destination)
const data = new Uint8Array(analyser.frequencyBinCount)
function draw(){ analyser.getByteFrequencyData(data); requestAnimationFrame(draw) }
draw()

工程建议

• 跨域与策略：跨域媒体需允许；在用户手势后 resume() 恢复音频上下文。
• 资源管理：避免为多个元素重复创建源节点；在元素移除时断开连接。
• 兼容：在不支持环境提供基础播放与少量处理。

参考与验证

• MDN MediaElementAudioSourceNode 文档：https://developer.mozilla.org/docs/Web/API/MediaElementAudioSourceNode