active

Dynamic Audio Element

Safe
System VerifiedSafe

Demonstrates Web Audio API buffer playback by generating float32 PCM samples in JavaScript and playing them via AudioBufferSourceNode. Plays a 4-note arpeggio (A4, C5, E5, G5) through an AnalyserNode for real-time EQ visualization.

@api/dynamic-audio-element

audio
web-audio
pcm
waveform
audio-buffer

Dynamic Audio Element

Generates PCM audio samples in JavaScript and plays them via AudioBufferSourceNode.

Core Concepts

  • Float32 PCM sample generation (sine wave math with fade envelope)
  • AudioBuffer creation and population
  • AudioBufferSourceNode for sample-accurate playback
  • AnalyserNode for real-time EQ bar visualization

Usage

Automatic playback of a 4-note arpeggio (A4, C5, E5, G5). Each note is a freshly generated 450ms audio buffer played sequentially.

Dormant$0/mo

$20 more to next tier

Info

Created February 21, 2026
Version 1.0.0
User-invoked
HTML sandbox

Demo

Audio demo

Interactive sandbox

Embed

Add this skill card to any webpage.

<iframe src="https://skillslap.com/skill/6a26116c-4c00-4f5d-9cde-e950999bb9d5/embed"
        width="400" height="200"
        style="border:none;border-radius:12px;"
        title="SkillSlap Skill: Dynamic Audio Element">
</iframe>