01-loops / Loop mixer

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Build a sound mixer using these four local audio files: ../../assets/audio/City_Loop_Light-rain_20s.mp3, ../../assets/audio/Forest_Loop_After-rain_20s.mp3, ../../assets/audio/Water_Loop_Light-swell_20s.mp3 and ../../assets/audio/Forest_Loop_Frost_20s.mp3. Each sound needs on/off and its own level slider. Several sounds can play together. Add a global stop and an output level. Keep the audio engine separate from the interface so we can change the design later. Show the file's duration before playback. Check stop, restart and loop boundaries. Keep it local and runnable without a build step.


02-events / Loops and events

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Extend the existing four-loop app. Add occasional sounds from the supplied assets folder, including a bell, a bird and a water sound. Each event needs enabled, level, shortest wait and longest wait. Enabled and playing now must look different. An event plays once. Choose a random wait after it ends, so one event does not overlap itself. Different event sources can overlap. Let me trigger one now and add or remove event sources while loops continue. Disabling or removing stops that source and cancels its pending triggers. Global stop stops everything and no event can come back afterwards. Show duration before play. Preserve the original loop controls.


03-import / Audio import

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Extend the loops-and-events app with an audio file picker. Show the imported file name and duration before it plays. Let me choose Loop or Event and its level. Use the existing event timing and stop rules. Start with MP3 and WAV. Show a useful error for an unsupported or damaged file. For now imports last only until reload: say this clearly. Choosing a file must not start it automatically. I want to try a sound I generated myself.


04-noise / Noise

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Make a noise listening app. Generate white, pink and brown noise in the browser with Web Audio and JavaScript, without downloading sound files. Give me a type selector, on/off and level. I want to switch colours at comfortable, comparable levels, without effects. Switching must not stack extra sources. Add a simple spectrum so I can see the different frequency balance. Explain in one short line what to listen for in each noise.


05-filters / Noise filters

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Extend the noise app with a filter on its generated sound: bypass, high-pass, low-pass and band-pass. Add a frequency control and Q. Label the frequency cutoff for high-pass and low-pass, and centre for band-pass. Start at conservative settings. Keep levels controlled when resonance increases. I want to hear the same source before and after the filter and see a simple visual of the response. Keep the noise colour and level controls.


06-envelope / Volume envelope

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Extend the filtered noise app with a volume envelope. Let me set attack, how long the noise takes to fade in, and release, how long it takes to fade out after stop. Keep the source level separate. Add an obvious start and release action and a global stop. Repeated starts and stops must not leave extra sound running. Show the envelope shape. I want a soft swell rather than a click.


07-lfo / LFO

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Extend the noise app with a sine-wave LFO. First let it move the noise volume around its base level. Give me rate, depth and off. Then let me choose filter frequency as an alternative destination, with a sensible range. Only the selected parameter should move. At 0.1 Hz I expect one cycle every ten seconds. Turning it off restores manual control. Keep attack and release. Show the movement while it runs. I want slow breathing textures as well as audible tremolo.


08-random / Smooth random

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Extend the app with smooth random movement of generated noise volume or filter frequency. Let me choose manual, LFO or smooth random so they don't fight over the same parameter. In random mode let me set minimum, maximum, time between new targets and transition duration. Move gradually to each random target. If a new target arrives before the old transition finishes, continue from the current value. Stay inside the bounds. Show this movement. Include a slow wind-like setting I can try, using generated noise.


09-lofi / Lo-fi chain

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Make a listening app that generates a simple warm chord and can also generate noise. Add a lo-fi chain: a filter, saturation with drive, and shallow tremolo with rate and depth. Let me bypass each stage and the whole chain. Keep comparison levels controlled so louder doesn't automatically sound better. Tremolo must move volume, not pitch or playback speed. Add a few useful settings from subtle warmth to an obviously worn texture. Make it pleasant enough to leave running.


10-reverb / Reverb

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Make a reverb listening app with a short generated pluck and a local event sample of a bell or a water drop from ../../assets/audio/. Use Web Audio convolution with a generated impulse response. Let me trigger the sound and set dry/wet and decay. Make the difference between a close sound and a distant sound easy to hear. Source stop may leave the reverb tail; global stop must silence it. Include a repeat option so I can compare several events in the same space. Don't download any reverb audio.


11-ring / Ring modulation

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Make a simple ring modulation app. Generate one tone and multiply it by another oscillating signal. Give me both frequencies, level, play/stop and bypass. Show a simple spectrum. Include a 440 Hz tone multiplied by an 80 Hz sine, so I can hear and see the new 360 Hz and 520 Hz components. Also give me a quieter, more musical setting I could use as part of a soundscape. Keep its level comfortable.


12-vocoder / Vocoder

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Build a basic vocoder experiment. Analyse the energy in frequency bands of one sound and use it to shape another sound. I need to hear the modulator, the carrier and the result separately. Use a generated rhythmic modulator and a generated sustained carrier so it works without a microphone or downloaded files. Let me optionally import a voice recording as the modulator. Include band, speed or sensitivity controls that make sense. Say clearly what each input does. I want to hear the rhythm and changing frequency shape transfer to the carrier.


13-granular / Granular synthesis

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Build a granular sound app using a local Forest or Water loop in ../../assets/audio/. Split the recording into short grains. Let me control grain length, density in grains per second, playback rate and position in the recording. Include position spread, play/stop and level. Give me a clear original-sample comparison. Include a gentle cloud setting and a more scattered setting. Avoid sharp clicks at grain edges. I want it to become an evolving atmospheric material, not just a technical test.


14-textures / Procedural textures

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Build a soundscape using only synthesis in Web Audio, no samples. Short bursts of white noise can make crackles; filtered noise swells can suggest wind; noise moving across stereo can suggest something passing. Give me separate controls for wind, water-like texture, crackles and a passing sound. Modulate the synthesised sources with slow LFO and smooth random movement so they keep changing. Let me adjust intensity and movement speed. Include a calm and a more restless setting. Keep it atmospheric rather than a row of beeps.


15-tones / Drone, chord and phrase

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Make a small synthesised musical soundscape with oscillators, no audio files. I want to compare a drone, a soft chord and a short repeating phrase. Include waveform, root pitch, tempo for the phrase, level, attack and release. Give the generated sound slow volume and filter movement and an optional simple reverb. Choose a gentle starting sound. I want to hear how a musical layer can sit underneath an environment without taking over. Add global stop.

FOLLOW-UP / Student feedback
When I switch from the soft chord to Short phrase, the phrase becomes almost silent instead of playing the notes. Please fix this. Keep the drone and chord working, and check that switching modes and Stop all still work. Save what you changed and why.


16-soundscape / Soundscape

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Bring the working experiments together into one sound machine. I want three environments, City, Forest and Water. Each should have a recognisable continuous recorded background, occasional recorded events, and a synthesised atmospheric layer. The generated layer must move: slow volume swells, changing filter frequency and gentle stereo movement. Modulate the synthesis first, not only the samples. Let me shape intensity and movement without losing source levels and event timing. Offer a calm, a restless and a quiet musical direction. Use a subtle synthesised drone or sparse notes where useful, with space and lo-fi as optional treatments. The aim is an emotional, musical soundscape I could leave running, even if it is basic. Let the atmosphere develop rather than firing every event immediately. Keep the existing import, noise, filter, envelope, LFO and random capabilities accessible, with the detail controls in a separate panel if needed. Global stop must stop loops, notes, scheduled events, modulation and reverb. Keep the engine separate from the interface. Use only the supplied local recordings and generated audio. Do not use external services.


17-scenes / Scenes

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Extend the sound machine with named scenes. A scene saves the environment, selected sources, levels, noise settings, movement, event timing and processing. Let me save, load, rename and delete my own scenes and keep them across reloads on this browser. Loading settings must not unexpectedly start sound before I press play. Preserve imported sounds if feasible; otherwise clearly explain what happens to session-only files. Include three distinct listening examples: a sheltered forest, a distant city at night and slow open water. They should have different emotional and musical characters, not just different labels.


18-sleep / Soundscape and sleep timer

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Extend the scene-based sound machine with a sleep timer and a gradual fade. I can choose the duration and fade length, see the countdown, cancel it or restart it. At the end nothing should return: stop loops, notes, events, movement and effect tails. Add a ten-second demo so I can test it without waiting. Cancelling a fade should restore a sensible listening level. Keep the City, Forest and Water scenes. I want a calm, usable listening experience, with the detailed engine controls still available.


19-console / Sound desk

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Make an interface alternative for the completed soundscape. Keep the same audio engine and capabilities. This version is a sound desk: visible vertical channel controls, source types, events and processing, so I can see and adjust the composition at a glance. Keep play/stop, environment, scenes and timer easy to find. It should be a usable instrument, not a debugging page. Keep every capability reachable and preserve the previous app.


20-landscape / Atmosphere map

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Make a structurally different interface for the completed soundscape while using the same engine and preserving its capabilities. Use a two-dimensional atmosphere map: horizontal is calm to restless, vertical is close to spacious. Moving a point changes several relevant generated-sound parameters smoothly. Show what is changing. Keep direct source levels, event timing, import, scenes and timer available in a details panel. Include keyboard access to the map. The question is whether I can compose an atmosphere through one expressive gesture without losing control.


21-listening / Listening interface

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Make another interface for the same soundscape engine. This should feel like a simple listening object: choose City, Forest or Water, then use one large intensity control and one movement control. Keep space and the musical layer close by. Put detailed source levels, event rules, import, scenes and timer in an expandable panel so all capabilities remain reachable. The main screen should support listening with few distractions. Preserve the previous app and use the same engine.


22-seams / Loop boundaries

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Build an A/B loop-boundary experiment with one of the supplied 20-second environmental loops. Let me hear a hard repeat and an overlapping crossfade repeat. Show where the seam happens and let me jump to just before it, so I don't wait twenty seconds each time. Let me set the crossfade length. Keep levels comparable. Add a short generated texture with a deliberately poor join so the difference is easy to hear. Explain that an already seamless sample may not reveal a big difference.


23-event-time / Event timing

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Make an event-timing comparison with supplied 4-second environmental events and a quiet generated background. Compare fixed waiting after each event, random waiting after each event, and start-to-start timing that can overlap. Let me choose the wait range and event, show when sounds are playing and explain the selected timing rule in one sentence. Add a calm sparse setting and a busy setting so I can hear the emotional difference, not only inspect a schedule. Global stop must cancel future events.


24-resolution / Lo-fi comparison

I'm a product design student. I'm not familiar with the terminal or writing code. Please build this for me with HTML, CSS, JavaScript and native Web Audio. Make a simple, usable browser page, with no external libraries or internet services. Sound should start only after I click. Use comfortable initial levels. I need to play with the result, not read code. Make a lo-fi comparison using a generated chord and optional imported audio. Compare saturation with reduced bit depth and reduced sample resolution. These should be separate effects with separate bypass switches. Give me useful controls and keep levels comfortable. Let me compare clean, subtly worn and clearly degraded versions. Explain in a short line what each treatment changes. The goal is to hear different kinds of texture and decide what could suit a soundscape.

FOLLOW-UP / Student feedback
Please check the sound-source dropdown. Right now it contains only Generated chord. Make sure it has a separate Imported audio choice that becomes available when a file has been imported, so I can switch back and forth without importing again. Keep all three effects and the generated chord working.