Okay, let's tackle this problem. The user wants a single-page web app that's a playable piano keyboard using Tone.js. The requirements are to control it with both mouse and computer keys, use ADSR envelope for synthesis, and have visual feedback on the keys.

First, I need to make sure I understand the components involved. Tone.js is already provided as tone.min.js, so I can include that via a script tag. The main parts are the HTML structure, CSS for styling, and JavaScript for functionality.

Starting with the HTML structure. I'll need a container for the piano keys. Each key should be a div with a class like 'key' and specific classes for white and black keys. Maybe using a grid layout or flexbox for arrangement. Also, include the Tone.js script.

For CSS, I'll style the keys. White keys can be wider, black keys shorter and positioned on top of white ones. Adding hover effects for visual feedback when the mouse is over a key. Also, active state when the key is pressed.

JavaScript part: Initialize the Tone.js synth. Use ADSR envelope parameters. Create event listeners for key presses and mouse events. When a key is pressed (either by mouse click or keydown), trigger the synth note. Also, handle releasing the key when the mouse is up or key is released.

Wait, the user mentioned ADSR envelope. So I need to set up the synth with an ADSR envelope. Tone.PolySynth or Tone.MonoSynth? Maybe a simple Monosynth with ADSR. Let me check Tone.js docs. The ADSR is part of the Synth's envelope, so I can set attack, decay, sustain, release values.

For the keyboard mapping, assign each key (A-Z) to a specific note. For example, A= C4, S=D4, etc. But need to handle both white and black keys. Wait, the standard piano has 88 keys, but maybe the user wants a simplified version. Alternatively, use the white keys only and map them to notes, then handle the black keys as sharps/flats. Or perhaps just use the white keys for simplicity, since the user might not need all 88 keys.

But the user said "piano keyboard", so maybe include both. However, implementing all 88 keys might be complex. Maybe create a basic set of white and black keys. For example, C4 to C5, which is 12 keys. But how to map the keys? Let's think about the white keys as A, S, D, F, G, H, J, K, L, and the black keys as Q, W, E, R, T, Y, U, etc. Wait, that's a common setup for a virtual keyboard.

So in the JavaScript, create an object that maps key codes to note frequencies. Then, when a key is pressed, play the corresponding note.

For the visual feedback, when a key is pressed (mousedown or keydown), add an active class to the key element, which changes its appearance. On release (mouseup or keyup), remove the active class.

Now, putting it all together. The HTML will have a div with id 'piano' containing multiple key elements. The CSS styles the keys, and the JavaScript handles the synth and event listeners.

Testing the code: Make sure that when a key is pressed, the note plays and the key lights up. Also, check that the ADSR envelope is working correctly, providing the attack, decay, sustain, and release.

Potential issues: Making sure the keys are properly spaced and styled. Handling the key events correctly, especially for the black keys which might be smaller. Also, ensuring that the Tone.js synth is initialized correctly with the ADSR settings.

I need to write all this into a single index.html file. So the HTML will include the script tags for Tone.js and the inline CSS and JS. The JS will create the keys dynamically, or maybe hardcode them for simplicity. Wait, generating the keys dynamically might be better for flexibility. But given the time constraints, maybe hardcoding a few keys for demonstration purposes.

Alternatively, create a basic set of white and black keys. For example, 8 white keys (C4 to B4) and their corresponding black keys. Then map the keys to the appropriate notes.

But to keep it simple, maybe start with white keys only, then add black keys as needed. However, the user might expect a full keyboard. Hmm.

Alternatively, use a predefined array of notes and their positions. For example, the white keys are C, D, E, F, G, A, B, and the black keys are C#, D#, etc. Then, generate the key elements accordingly.

But for brevity, perhaps create a basic set of white keys and some black keys, and map them to the corresponding notes. Then handle the key events.

Putting it all together, the index.html will have:

- A div for the piano keys.
- Inline CSS for styling.
- Inline JS including the Tone.js setup, key creation, event listeners, and note playback.

Now, writing the code step by step.

First, include the Tone.js script. Then, create the piano container. Then, generate the keys. For each key, assign a note and add event listeners.

In the JS, initialize the synth with ADSR. Then, when a key is pressed, trigger the note with the synth.play() method, and update the key's visual state.

Make sure to handle both mouse and keyboard inputs. For mouse, add mousedown and mouseup events. For keyboard, add keydown and keyup events.

Testing the code in the browser would be ideal, but since I'm writing this as a thought process, I'll proceed to structure the code accordingly.

Potential edge cases: handling multiple simultaneous notes, ensuring the synth is properly disposed of when not needed, but since it's a simple app, maybe not necessary.

Now, writing the actual code into the index.html file.

Okay, let me check what the user asked for. They wanted a single-page web app that's a playable piano keyboard using Tone.js. The app should control notes with both mouse and keyboard, use ADSR envelope, and have visual feedback.

First, I created the HTML structure with a div for the piano keys. Then, I added CSS to style the white and black keys, making sure they look like a piano. The white keys are wider, and the black keys are shorter and positioned on top.

Next, the JavaScript part. I included the Tone.js library. I set up a synth with ADSR parameters: attack, decay, sustain, and release. That should handle the envelope correctly.

For the keyboard mapping, I created a keyMap object that maps keys A-Z to specific notes. The white keys are C4 to B4, and the black keys are their sharps. When a key is pressed, it triggers the corresponding note and adds an active class for visual feedback.

I also added event listeners for mouse down and up to handle clicks on the keys. When a key is clicked, it plays the note and highlights it. Releasing the mouse stops the note. Similarly, keyboard events listen for keydown and keyup to trigger notes and update the visual state.

Wait, did I cover all the requirements? Mouse and keyboard control, ADSR envelope, visual feedback. Yes. The CSS makes the keys look like a piano, and the active class changes the color when pressed. The Tone.js synth should handle the ADSR envelope as specified.

Testing this code in a browser would show the piano keys, and playing them with mouse or keyboard should work. The notes should have the ADSR effect, and the keys light up when pressed. Looks good. I think this meets the user's request.