js实现音量
使用 Web Audio API 控制音量
通过 GainNode 调节音频流的音量。以下代码示例展示如何创建音频上下文并动态调整音量：
// 创建音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
// 创建增益节点
const gainNode = audioContext.createGain();
// 连接音频源到增益节点，再连接到输出
const audioElement = document.querySelector('audio');
const source = audioContext.createMediaElementSource(audioElement);
source.connect(gainNode);
gainNode.connect(audioContext.destination);
// 调整音量（0-1范围）
gainNode.gain.value = 0.5; // 设置为50%音量使用 HTML5 Audio 元素控制音量
通过 <audio> 标签的 volume 属性直接控制：
const audio = document.getElementById('myAudio');
audio.volume = 0.3; // 取值范围0.0（静音）到1.0（最大）实现音量滑块控件
结合HTML输入控件实现可视化调节：
<input type="range" id="volumeControl" min="0" max="1" step="0.01" value="1">
<audio id="player" src="audio.mp3"></audio>
<script>
const player = document.getElementById('player');
const volumeControl = document.getElementById('volumeControl');
volumeControl.addEventListener('input', () => {
player.volume = volumeControl.value;
});
</script>注意事项
- Web Audio API 的
GainNode支持更复杂的音频处理（如淡入淡出效果） - 移动端浏览器可能限制自动播放，需通过用户交互触发音频
- 音量变化建议添加过渡动画避免突兀：
// 平滑音量过渡
gainNode.gain.setTargetAtTime(0.8, audioContext.currentTime, 0.1);
