We are going to create a single HTML file (index.html) that includes:
 - A grid of buttons (pentatonic notes) that when clicked, play a note with a synth and reverb.
 - A play/stop button that starts/stops an arpeggiator sequence.
 - A tempo control (input) to adjust the BPM of the arpeggiator.

 We have tone.min.js in the current directory, so we will include it with: <script src="tone.min.js"></script>

 Steps:
 1. Set up the HTML structure: a grid of buttons for the pentatonic scale, a play button, a stop button (or toggle), and an input for tempo.
 2. Style the grid and buttons with CSS.
 3. Write JavaScript using Tone.js to:
    a. Initialize a synth with reverb.
    b. Set up the pentatonic scale (for example, C major pentatonic: C, D, E, G, A).
    c. Assign click handlers to the grid buttons to play the corresponding note.
    d. Create an arpeggiator sequence that loops and plays the pentatonic notes in order.
    e. Allow adjusting the tempo.

 Important: Since we are writing everything in one file, we'll put CSS in a <style> tag and JS in a <script> tag.

 Pentatonic scale notes (C4 to A4): ['C4', 'D4', 'E4', 'G4', 'A4'].

 We'll create a grid of 5 buttons (one for each note) and arrange them in a row.

 For the arpeggiator, we'll use Tone.Loop to schedule a repeating event. We'll change the note index on each step.

 Let's design:
 - Play/Stop button: starts and stops the arpeggiator.
 - Tempo input: a range slider or number input to set the BPM.

 We'll use Tone.Transport for the arpeggiator timing.

 Implementation:

 HTML:
   <div id="grid">
     <button data-note="C4">C4</button>
     <button data-note="D4">D4</button>
     <button data-note="E4">E4</button>
     <button data-note="G4">G4</button>
     <button data-note="A4">A4</button>
   </div>
   <div>
     <button id="play">Play</button>
     <button id="stop">Stop</button>  <!-- Alternatively, we can use one toggle button -->
   </div>
   <div>
     <label for="tempo">Tempo (BPM):</label>
     <input type="number" id="tempo" min="30" max="240" value="120">
   </div>

 Alternatively, we can use a toggle button for play/stop.

 JavaScript:

   // Create synth with reverb
   const synth = new Tone.PolySynth().toDestination();
   const reverb = new Tone.Reverb().toDestination();
   synth.connect(reverb);

   // Set up the reverb parameters (optional)
   reverb.decay = 2;

   // Pentatonic notes
   const pentatonic = ['C4', 'D4', 'E4', 'G4', 'A4'];

   // Set up grid buttons
   document.querySelectorAll('#grid button').forEach(button => {
     button.addEventListener('click', () => {
       synth.triggerAttackRelease(button.dataset.note, '8n');
     });
   });

   // Arpeggiator state
   let arpeggioIndex = 0;
   let arpeggioLoop = null;

   // Tempo control
   const tempoInput = document.getElementById('tempo');
   tempoInput.addEventListener('input', () => {
     Tone.Transport.bpm.value = tempoInput.value;
   });

   // Play button: start the arpeggiator loop
   document.getElementById('play').addEventListener('click', () => {
     // If already playing, we stop and reset?
     // Instead, we'll have a stop button to stop the transport.
     Tone.Transport.start();
   });

   document.getElementById('stop').addEventListener('click', () => {
     Tone.Transport.stop();
     arpeggioIndex = 0; // reset index?
   });

   // Create the loop
   arpeggioLoop = new Tone.Loop((time) => {
     synth.triggerAttackRelease(pentatonic[arpeggioIndex], '8n', time);
     arpeggioIndex = (arpeggioIndex + 1) % pentatonic.length;
   }, '8n').start(0);

   // Set initial tempo
   Tone.Transport.bpm.value = tempoInput.value;

   // Start Tone context on user interaction (to avoid autoplay restrictions)
   // We'll start the context on the first button click (either grid or play)
   document.body.addEventListener('click', () => {
     if (Tone.context.state !== 'running') {
       Tone.context.resume();
     }
   }, { once: true });

 However, note: the above loop will run continuously once Transport starts. We reset the index on stop? Actually, we don't have to reset because the loop function uses the current arpeggioIndex and then increments. But when stopping and starting again, we might want to reset the index to 0? Alternatively, we can reset the index when stopping.

 Alternatively, we can use a single toggle button:

   <button id="toggle">Play/Stop</button>

   Then:

   let isPlaying = false;
   const toggleButton = document.getElementById('toggle');
   toggleButton.addEventListener('click', () => {
     if (isPlaying) {
       Tone.Transport.stop();
       arpeggioIndex = 0;
       toggleButton.textContent = 'Play';
     } else {
       Tone.Transport.start();
       toggleButton.textContent = 'Stop';
     }
     isPlaying = !isPlaying;
   });

 But note: Tone.Transport.stop() stops the transport and resets the position to 0. However, our loop doesn't depend on the transport position for the note index. We are using a separate arpeggioIndex. We reset arpeggioIndex to 0 on stop so that next time it starts from the beginning.

 Alternatively, we can use the transport position to compute the note index? But simpler to use a counter.

 However, note: if the transport is stopped and started again, the loop will restart at the beginning because we reset the index. That's acceptable.

 We'll design with a toggle button.

 Let's adjust:

   HTML:
     <button id="toggle">Play</button>

   JS:
     let isPlaying = false;
     const toggleButton = document.getElementById('toggle');
     toggleButton.addEventListener('click', () => {
       if (!isPlaying) {
         Tone.Transport.start();
         toggleButton.textContent = 'Stop';
       } else {
         Tone.Transport.stop();
         toggleButton.textContent = 'Play';
         arpeggioIndex = 0;
       }
       isPlaying = !isPlaying;
     });

 Also, we need to initialize Tone.Transport with the tempo.

 We'll write the entire HTML file.

 Note: We must include Tone.js from the current directory: <script src="tone.min.js"></script>

 Let's write the index.html file.

I'll create a self-contained pentatonic pad grid with arpeggiator using Tone.js. Here's the complete solution: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pentatonic Pad</title> <style> body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #1a2a6c, #2c3e50); min-height: 100vh; margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; color: white; } h1 { margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } .controls { display: flex; gap: 20px; margin-bottom: 30px; align-items: center; } .tempo-control { display: flex; flex-direction: column; align-items: center; } input[type="range"] { width: 200px; margin-top: 5px; } button { background: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-size: 16px; transition: all 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.2); } button:hover { background: #2980b9; transform: translateY(-2px); } button:active { transform: translateY(1px); } button.active { background: #e74c3c; } .pad-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; max-width: 600px; } .pad { width: 100px; height: 100px; background: linear-gradient(145deg, #9b59b6, #8e44ad); border-radius: 15px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold; cursor: pointer; box-shadow: 0 6px 10px rgba(0,0,0,0.3); transition: all 0.1s; user-select: none; } .pad:hover { transform: scale(1.05); } .pad:active { transform: scale(0.95); box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .pad.active { background: linear-gradient(145deg, #e74c3c, #c0392b); box-shadow: inset 0 0 10px rgba(0,0,0,0.3); } .status { margin-top: 20px; font-size: 14px; opacity: 0.8; } </style> </head> <body> <h1>Pentatonic Pad</h1> <div class="controls"> <div class="tempo-control"> <label for="tempo">Tempo: <span id="tempo-value">120</span> BPM</label> <input type="range" id="tempo" min="40" max="200" value="120"> </div> <button id="play-toggle">Play</button> </div> <div class="pad-grid"> <div class="pad" data-note="C4">C</div> <div class="pad" data-note="D4">D</div> <div class="pad" data-note="E4">E</div> <div class="pad" data-note="G4">G</div> <div class="pad" data-note="A4">A</div> </div> <div class="status" id="status">Audio ready</div> <script src="tone.min.js"></script> <script> // Initialize audio context on user interaction document.addEventListener('click', async () => { if (Tone.context.state !== 'running') { await Tone.context.resume(); document.getElementById('status').textContent = 'Audio ready'; } }, { once: true }); // Setup synth with reverb const synth = new Tone.PolySynth().chain( new Tone.Reverb({ decay: 3, wet: 0.5 }), Tone.Destination ); // Pentatonic scale notes const pentatonic = ['C4', 'D4', 'E4', 'G4', 'A4']; let currentSequence = [...pentatonic]; let sequenceIndex = 0; let isPlaying = false; // Setup pads const pads = document.querySelectorAll('.pad'); pads.forEach(pad => { pad.addEventListener('click', () => { const note = pad.dataset.note; pad.classList.add('active'); synth.triggerAttackRelease(note, '8n'); setTimeout(() => { pad.classList.remove('active'); }, 200); }); }); // Setup tempo control const tempoSlider = document.getElementById('tempo'); const tempoValue = document.getElementById('tempo-value'); tempoSlider.addEventListener('input', () => { const tempo = parseInt(tempoSlider.value); tempoValue.textContent = tempo; Tone.Transport.bpm.value = tempo; }); // Setup play button const playButton = document.getElementById('play-toggle'); playButton.addEventListener('click', () => { if (!isPlaying) { startArpeggiator(); playButton.textContent = 'Stop'; playButton.classList.add('active'); isPlaying = true; } else { stopArpeggiator(); playButton.textContent = 'Play'; playButton.classList.remove('active'); isPlaying = false; } }); // Arpeggiator functions function startArpeggiator() { Tone.Transport.bpm.value = tempoSlider.value; Tone.Transport.start(); Tone.Transport.scheduleRepeat(time => { const note = currentSequence[sequenceIndex]; synth.triggerAttackRelease(note, '8n', time); // Visual feedback pads.forEach(pad => { if (pad.dataset.note === note) { pad.classList.add('active'); setTimeout(() => pad.classList.remove('active'), 200); } }); sequenceIndex = (sequenceIndex + 1) % currentSequence.length; }, '8n'); } function stopArpeggiator() { Tone.Transport.stop(); Tone.Transport.cancel(); sequenceIndex = 0; } // Initialize Tone.Transport.bpm.value = tempoSlider.value; document.getElementById('status').textContent = 'Click anywhere to enable audio'; </script> </body> </html> ``` This solution includes: 1. A responsive pentatonic pad grid with visual feedback 2. Play/stop button for arpeggiator with toggle functionality 3. Adjustable tempo control (40-200 BPM) 4. Polyphonic synth with reverb effects 5. Visual feedback for both pad clicks and arpeggiator playback 6. Graceful audio context initialization 7. Responsive design with gradient backgrounds 8. All code contained in a single HTML file The pentatonic scale used is C major pentatonic (C, D, E, G, A). The arpeggiator cycles through these notes sequentially at the set tempo. Each pad triggers a synth note when clicked, and the arpeggiator highlights the currently playing note. To use: 1. Click anywhere on the page to enable audio 2. Click pads to trigger notes 3. Adjust tempo with the slider 4. Toggle arpeggiator with Play/Stop button The UI features gradient backgrounds, responsive animations, and a clean modern design. All functionality is contained within this single HTML file.