当前位置：首页 > JavaScript

js实现声音

2026-02-02 09:07:15JavaScript

使用Web Audio API播放声音

Web Audio API是现代浏览器提供的强大音频处理接口，适合复杂音频操作。以下示例展示如何加载并播放音频文件：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const audioElement = document.createElement('audio');
audioElement.src = 'sound.mp3';

const source = audioContext.createMediaElementSource(audioElement);
source.connect(audioContext.destination);

audioElement.play().catch(e => console.error('播放失败:', e));

使用HTML5 Audio元素实现简单播放

HTML5的<audio>标签提供更简单的音频播放方式，适合基础需求：

const sound = new Audio('sound.mp3');
sound.play().catch(e => console.log('需要用户交互:', e));

// 控制方法
sound.pause();
sound.currentTime = 0; // 重置播放位置

生成动态音频

通过OscillatorNode可以生成各种波形的声音：

js实现声音

const ctx = new AudioContext();
const oscillator = ctx.createOscillator();
oscillator.type = 'sine'; // 正弦波
oscillator.frequency.value = 440; // A4音符
oscillator.connect(ctx.destination);
oscillator.start();
setTimeout(() => oscillator.stop(), 1000); // 1秒后停止

处理用户交互触发

多数浏览器要求音频播放必须由用户交互触发：

document.getElementById('playBtn').addEventListener('click', () => {
    const sound = new Audio('notification.mp3');
    sound.play();
});

加载音频缓冲

预加载音频文件到缓冲区可减少延迟：

js实现声音

async function loadSound(url) {
    const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    return await audioContext.decodeAudioData(arrayBuffer);
}

loadSound('sound.mp3').then(buffer => {
    const source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    source.start();
});

音量控制

使用GainNode调节音量：

const gainNode = audioContext.createGain();
gainNode.gain.value = 0.5; // 50%音量
source.connect(gainNode);
gainNode.connect(audioContext.destination);

空间音频效果

PannerNode可实现3D音效：

const panner = audioContext.createPanner();
panner.panningModel = 'HRTF';
panner.setPosition(1, 0, 0); // 右侧声源
source.connect(panner);
panner.connect(audioContext.destination);

音频可视化

通过AnalyserNode获取音频数据用于可视化：

const analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination);

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray); // 用于绘制频谱