Prompt
Develop a comprehensive web application that generates a simple pop song structured around the classic I–V–vi–IV chord progression, ensuring that the entire process is handled through frontend technologies like HTML, CSS, and JavaScript with the Web Audio API at its core to handle all audio synthesis and manipulation, where you must create four oscillators to act as a virtual piano, each one carefully programmed with ADSR envelopes to provide natural decay and sustain on every note played, allowing for a more organic and musical feel that mimics real instrument performance, while also incorporating a user-adjustable tempo control through a slider interface that ranges from 60 to 140 BPM to accommodate various song paces, and include a transposition feature that lets users shift the key by semitones using precise mathematical calculations based on frequency ratios, all of which should be integrated into a grid-based step sequencer built with HTML and CSS elements to visually represent each chord change across a detailed 32-bar loop, where the grid not only displays the progression but also features interactive controls such as play, pause, and reset buttons that utilize CSS animations to highlight the active beat in real-time, making the user experience more engaging and intuitive, and furthermore, add a dynamic volume control slider for overall audio level adjustment along with a simple reverb effect implemented via a ConvolverNode that uses a preloaded impulse response file to add depth and space to the sound, while the chord visualization is dynamically updated on-screen using SVG elements to show the current chord diagram, ensuring that every aspect from audio generation to visual feedback is meticulously synchronized for a seamless creative process.
A system prompt was added to support web rendering