1 音频处理
-
new AudioContext()和new window.AudioContext()的区别
| 场景 | 推荐写法 | 说明 |
|---|---|---|
| 现代浏览器（无兼容性需求） | new AudioContext() |
简洁直接，无需额外处理。 |
| 需兼容旧浏览器（如需前缀） | new (window.AudioContext || window.webkitAudioContext)() |
处理 webkitAudioContext 的前缀问题。 |
| 严格模式或模块作用域 | new window.AudioContext() |
避免作用域问题，确保全局变量的访问。 |
通过结合 window 对象和前缀检查，可以确保代码在不同环境下的兼容性和可靠性。
- 两种音频幅值的调节方法
bars.value = bars.value.map((bar, index) => {
let amplitude = frequenceData[index] / 255 * 100 // 转为0-100的音量值
amplitude = Number.isNaN(amplitude) ? 2 : amplitude
amplitude = Math.max(2, Math.min(100, amplitude)) // 钳制在2-100范围
return {
height: amplitude
}
// 非线性放大 + 动态范围控制
let amp = Math.pow(frequenceData[index] / 255, 3) * 80;
amp = Number.isNaN(amp) ? 2 : amp
amp = Math.max(2, Math.min(100, amp)) // 钳制在2-100范围
return { height: amp }
})
- 打包后可能发生权限问题，需更改主进程配置
调用麦克风时，目前只需要在渲染进程（Vue组件）中做如下配置
navigator.mediaDevices.getUserMedia({ audio: true })
.then((stream) => {
audioContext = new AudioContext()
const source = audioContext.createMediaStreamSource(stream)
const analyser = audioContext.createAnalyser()
source.connect(analyser)
analyser.connect(audioContext.destination)
console.log('麦克风接入成功', source)
})
.catch((error) => {
console.log('麦克风接入失败', error)
})
且打包后也暂时没有出现不可使用的错误，但不排除后续在其他平台上可能会发生权限错误，现记录解决办法，更改主进程配置
如果主进程添加了一些安全配置
webPreferences: {
// 安全配置
contextIsolation: true,
sandbox: true,
// 其他配置
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
// 关键点：允许媒体访问
media: true,
}
则必须在主进程处理权限请求：
app.on('web-contents-created', (event, contents) => {
contents.session.setPermissionRequestHandler((webContents, permission, callback) => {
if (permission === 'media') {
callback(true); // 允许麦克风、摄像头
} else {
callback(false);
}
});
});
