DEV Community

Ethern Myth
Ethern Myth

Posted on

3 3 3 3 3

Web Audio API

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

Web Audio API: Allows audio manipulation and synthesis directly in the browser. Perfect for creating music apps, interactive games, or audio visualizations, it provides low-latency, high-quality audio processing, enhancing user engagement and creativity on the web.

Additional Context

Example usage of the Web Audio API: this code would in a file like index.js

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
Enter fullscreen mode Exit fullscreen mode
async function loadAudio(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  return audioBuffer;
}
Enter fullscreen mode Exit fullscreen mode
async function playAudio(url) {
  const audioBuffer = await loadAudio(url);
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination); // Connects to speakers
  source.start(0); // Play immediately
}
Enter fullscreen mode Exit fullscreen mode
const audioUrl = 'audio.mp3';
playAudio(audioUrl);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay