http-ano | Live Build | Project Board
| Area | Criteria |
|---|---|
| Front End Design | Design a single-page application that meets accessibility guidelines and follows UX design principles. Create a responsive front-end using custom HTML and CSS/CSS frameworks. Ensure a clear structured layout with intuitive navigation and consistent graphics. |
| Interactivity and DOM Manipulation | Implement interactive features with JavaScript allowing user control and feedback. Use JavaScript for effective DOM manipulation to dynamically update the single-page interface. |
| Code Validation | Ensure JavaScript code passes a linter with no significant issues. Validate custom HTML code using the official W3C validator. Validate custom CSS code using the Jigsaw validator. |
| Responsive Design and Navigation | Use CSS media queries to maintain layout integrity across different screen sizes. Implement semantic markup for clear HTML structure. Ensure the single page features intuitive navigation. |
| Cloud Deployment | Successfully deploy the single-page application to a cloud-based hosting platform ensuring it matches the development version. Use Git and GitHub for version control throughout the development process. Remove commented-out code before final deployment. Ensure all internal links and interactive elements function correctly. |
| Documentation | Write a README.md file explaining the application’s purpose, user value, and deployment procedure. Include screenshots of the single-page application with brief descriptions and user value explanations. Attribute any code from external sources clearly. |
| Code Organization and Readability | Separate custom code from external sources. Organize HTML, CSS, and JavaScript into well-defined, commented sections. Place CSS and JavaScript code in external files linked appropriately in the HTML. Write code that meets readability standards with consistent indentation and minimal blank lines. Name files consistently and descriptively for cross-platform compatibility. Group files by type in well-organized directories. |
| JavaScript Functionality and Error Handling | Write JavaScript functions implementing compound statements like if conditions and loops. Handle empty or invalid input data intelligently. Ensure the code does not generate errors on the page or in the console due to user actions. |
| Use AI tools to assist in code creation | Demonstrates strategic use of AI for generating code aligned with project objectives. |
| Use AI tools to assist in debugging code | Efficient use of AI tools to identify and resolve code issues. |
| Use AI tools to optimize code for performance and user experience | AI-driven optimisation for improved performance and user experience. |
| Reflect on AI’s role in the development process and its impact on workflow | High-level reflection on how AI tools affected the development process, with focus on outcomes rather than detailed steps. |
During the planning Ryan decided to create the wireframes for the project as he was most comfortable with Balsamiq and is quite great at designing!
Link to Git Image: https://github.com/etherOnGitHub/http-ano/blob/main/assets/images/wireframes/wireframe-combined-ryan.webp
After some consideration we also had another great alternative mock up done by Naz and Rocio for mobile with a simplified view.
Link to Git Image: https://github.com/etherOnGitHub/http-ano/blob/main/assets/images/wireframes/mobile-wireframe-naz-rocio.webp
HTTP-ANO embraces a modern cyberpunk aesthetic with a neon-themed interface that transforms the traditional piano experience into an interactive digital playground. The design prioritizes both visual appeal and functionality, ensuring an engaging user experience across all devices.
Our carefully selected color scheme creates a cohesive visual identity:
- Primary Neon Cyan:
#00fff9- Used for borders, highlights, and interactive elements - Secondary Magenta:
#ff00ff- Accent color for glow effects and visual feedback - Dark Background:
rgba(25, 25, 60, 0.85)- Provides contrast and reduces eye strain - Light Text:
#ffffff- Ensures accessibility and readability
- Primary Font: Orbitron - A futuristic typeface that complements the cyberpunk theme
- Fallback: Sans-serif fonts for maximum compatibility across devices
- Canvas-based rendering for smooth, responsive piano keys
- Neon glow effects that activate when keys are pressed
- Gradient backgrounds that enhance the futuristic aesthetic
- Real-time visual feedback for user interactions
- Animated taglines in the footer with rotating Font Awesome icons
- Responsive navigation with Bootstrap collapse functionality
- Modal dialogs with themed styling for settings and controls
- Custom buttons with hover effects and neon borders
- Canvas-rendered piano keyboard supporting up to 4 octaves (default 3 octaves starting at C4).
- Responsive design with dynamic resizing and key label toggling.
- Play notes using mouse/touch clicks or mapped QWERTY keyboard keys.
- Authentic piano sound samples for each note from C4 to B6 with sharp notes.
- Visual key press effects with neon glow highlights.
- Play-along mode featuring built-in songs for practice (e.g., "Twinkle Twinkle Little Star").
- Record, stop, and playback your piano performance.
- Audio visualizer powered by the Web Audio API to display sound waves in real-time.
- Clean, modular JavaScript code organized into components for easy customization.
- Accessibility compliant with keyboard navigation and high contrast colors.
- Optimized for performance and follows web best practices.
- To change the number of octaves, adjust the
numOctavesinPianoConfig.jsor callsetNumOctaves()method on the piano instance. - To add new songs, extend the
SONGSobject inplayAlong.jswith note arrays or use keyboard letter shorthand converted via helper functions. - To customize styles, modify
style.cssfor colors, fonts, and layout effects. - To add or replace audio samples, update
pianoKeyPress.jswith new audio file paths accordingly. - To toggle keyboard key label visibility, use the piano’s API method
toggleKeyLabels()or update config. - To extend recording features, modify
recorder.jsas needed. - To optimize performance, ensure audio files are efficiently loaded and event handlers are properly debounced, as demonstrated.
- Clone or download the repository.
- Open the
index.htmlfile in a modern web browser (Chrome, Firefox, Edge). - Use your mouse, touch screen, or QWERTY keyboard keys to play the piano.
- Select play-along songs from the dropdown menu to practice with guided note highlights.
- Use "Start Recording", "Stop Recording", and "Play Recording" buttons to record and playback your session.
- Adjust volume with the slider and toggle key labels for better usability.
The virtual piano keys are mapped logically to your physical QWERTY keyboard for intuitive play:
- White keys use keys such as
Tab,Q,W,E,R,T,Y,U,I,O,P, etc. - Black keys (sharps) use number and letter keys like
1,2,4,5,6,8,9,A,S,D,G, etc.
Refer to pianoKeyPress.js for the exact mappings of keys to notes and audio samples.
The visualiser works by analysing the data behind the audio being played and storing them in "bins" the amount of "bins" can be scaled up or down, we chose to keep the amount of "bins" low so that the website is lightweight and accessible. Analysing the Fast Fourier Transform - it is a data manipulation concept where audio on a computer is represented over time in a relatively accurate and resource effective manor while the frequencies that make up the audio are spread into these "bins". Each "bin" represents a specific frequency range which is why the visualiser has several bars making it up. Essentially you are seeing the aggregate data of a specific frequency range of each note behind it while playing!
This project is designed with accessibility in mind, featuring:
- Full keyboard navigability and key press feedback.
- High contrast neon color scheme meeting WCAG standards.
- Semantic HTML and ARIA roles for screen reader friendliness.
Deployment was handled through GitHub cloud directly from the repo.
- Performance: 97/100
- Accessibility: 100/100
- Best Practices: 100/100 What These Scores Mean:
- Performance (97): The application runs smoothly, loads quickly, and is optimized for efficient resource usage. A high performance score indicates fast load times and responsive interactions, providing a seamless user experience.
- Accessibility (100): The web piano is fully accessible, ensuring usability for all users including those with disabilities. This includes proper color contrast, keyboard navigation, and screen reader compatibility.
- Best Practices (100): The application adheres to modern web development standards, with secure code, valid HTML/CSS, and a reliable structure that avoids deprecated or risky features. These results demonstrate that the project is not only visually engaging and interactive but also optimized and compliant with web standards. Users can expect a high-quality, accessible experience across devices and browsers.
(Daniel) - The development of the piano canvas element was greatly assisted using GitHub Copilot. I chose to use Claude Sonnet 4 as my primary AI model, as I found that it was the most reliable and useful when working with complex prompts, especially when using agent mode.
With the right prompts and guidance, the AI was able to successfully orchestrate changes across multiple files in agent mode. Originally, I had used a single class for managing all of the piano's features, but found that it was becoming too difficult to read and maintain. I decided on splitting this large class into modules, which not only made it easier for me to maintain the code manually, but allowed the AI to make changes more easily, too.
After deciding on the theme and main features of the site, we used AI selectively to support the design process, helping ensure that layouts, styling, and components remained consistent with the overall visual objectives, with the creative direction and implementation guided by our design vision and project goals.
Throughout development, features were regularly tested and any bugs were raised and fixed before picking up any new tickets.
During the development of this virtual piano project, AI-powered tools were leveraged extensively to enhance productivity and code quality. AI helped by generating code templates, providing guidance on best practices, and suggesting optimizations for performance and accessibility. It also assisted in debugging complex issues by analyzing code snippets and identifying potential problems or inconsistencies. This collaborative approach with AI accelerated development timelines and improved the overall robustness and maintainability of the codebase. Leveraging AI as a development partner allowed us to focus more on creative design and user experience while ensuring the technical foundation remained solid and efficient.
Overall the use of AI has helped to implement some logic that may be hard to conceptualise in the moment but after being shown a way of doing it quickly using that information to take the next steps with or without AI assistance.
AI is no perfect creation, accuracy accross models is inconsistent and sometimes it can misunderstand an operation and its requirements (especially visible elements for UI/UX).