In the video, Julia, a product manager for the VS Code team, demonstrates how she used GitHub Copilot and the Tone.js library to build a browser-based live coding music app called DJ Julia, showcasing real-time music creation through code. She highlights the seamless integration of AI-assisted coding in VS Code to generate, run, and enhance the app, enabling users to compose and layer music patterns interactively.
In this video, Julia, a product manager for the VS Code team, introduces an exciting project where she combines coding and music creation using the open-source web audio library Tone.js. She explains her interest in music as a focus aid and her curiosity about generating music through code, which aligns with her technical background. Julia demonstrates how she built a browser-based music application using the latest VS Code release, showcasing how coding can be integrated with live music creation.
Julia begins by consulting GitHub Copilot to understand Tone.js better and to help explain its functionality. She uses prompt files in VS Code to provide detailed instructions to the AI, avoiding the limitations of the small chat window. She creates a prompt file named “web app DJ,” specifying the AI model and outlining her project requirements, including building a live coding music app that allows users to write pattern-based music code with real-time playback and seamless updates. She also lists technical requirements, user experience goals, and deliverables like a README file for setup and usage.
After saving the prompt file, Julia uses a slash command to instruct Copilot to follow her detailed instructions. The AI generates the entire project code, installs dependencies, and starts the development server, allowing Julia to run the app locally. She reviews the generated code and project structure, noting that Copilot implemented core features such as the pattern-based music system, the audio engine using Tone.js, and a clean user interface with play and stop controls, tempo adjustment, instrument selection, and effects.
Julia explores the web app, named DJ Julia, interacting with its features like the pattern editor and live console that displays real-time updates. She tests a quick example snippet generated by Copilot, successfully playing and stopping music, adjusting tempo, and modifying effects. She then refers to the README file for guidance and discovers pattern examples and instrument details. Julia challenges Copilot to create a new markdown file with a techno music pattern, which the AI generates and refactors into a single line for easier use in the editor.
Finally, Julia layers multiple music patterns to build a more complex track, tweaking individual elements like claps and adding a lead pattern to enhance the composition. She expresses enthusiasm for the creative possibilities enabled by combining coding with music and invites viewers to check out her deployed web application. The video highlights the seamless integration of AI-assisted coding in VS Code to create an interactive, live coding music experience powered by Tone.js.