Coding Music in VS Code  ## Metadata - Author: [[Visual Studio Code]] - Full Title: Coding Music in VS Code - Category: #articles - Document Note: --- tags: [VSCode, Tone.js, Copilot] author: [MISSING] source: YouTube reference: [https://www.youtube.com/watch?v=9NKNNHCsykQ] date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} --- # 🏷️ Title: Coding Music in VS Code ## 🧰 Action Inbox - [H1] Draft a short explainer on prompt files — context/https://code.visualstudio.com/docs/copilot/copilot-chat - [H2] Add Tone.js primer to onboarding doc — context/https://tonejs.github.io/ - [H3] Create a Copilot prompt-file template repo — context/https://github.com/features/copilot - [H4] Record a 5-minute “pattern editor” demo — context/https://www.youtube.com/watch?v=9NKNNHCsykQ&t=200 - [H5] Test live reload latency on mid-range laptops — context/https://www.youtube.com/watch?v=9NKNNHCsykQ&t=320 - [H6] Compare Copilot vs. manual scaffolding time — context/https://code.visualstudio.com/ - [H7] Document tempo/effects presets for beginners — context/https://www.youtube.com/watch?v=9NKNNHCsykQ&t=349 - [H8] Map accessibility gaps in audio UI — context/https://www.w3.org/WAI/WCAG22/quickref/ - [H9] Share use-case with WordPress Playground team — context/https://developer.wordpress.org/playground/ #share ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Include links cited in or relevant to the article. ## 📝 Summary - Julia demonstrates coding music in the browser using Tone.js and Copilot. - The video showcases prompt files, scaffolding, and a live pattern editor. - Stakeholders include VS Code users, web audio devs, and educators. - Risks include overreliance on LLMs and accessibility gaps for audio. - Bottom line: prompt files and Tone.js enable approachable live coding music. Sources: Video, Tone.js site, Copilot docs, VS Code docs. https://www.youtube.com/watch?v=9NKNNHCsykQ • https://tonejs.github.io/ • https://github.com/features/copilot • https://code.visualstudio.com/ ## 📖 Main Content - The workflow starts with Copilot “prompt files.” They collect goals and constraints. This improves chat accuracy and repeatability. https://code.visualstudio.com/docs/copilot/copilot-chat - Copilot scaffolds a web app using Tone.js. It installs dependencies and starts a dev server. Julia then iterates from the UI. https://tonejs.github.io/ • https://github.com/features/copilot - The app includes transport controls, tempo, instruments, effects, and a pattern editor. Live updates play immediately. https://www.youtube.com/watch?v=9NKNNHCsykQ&t=200 - Guidance appears as README content and example patterns. Users copy patterns to layer tracks. This supports rapid musical exploration. https://www.youtube.com/watch?v=9NKNNHCsykQ&t=300 - Uncertainties: exact model availability, Copilot features, and extension versions vary by account and date. Some links may require sign-in. If inaccessible, use official VS Code docs and Tone.js site. https://code.visualstudio.com/ • https://tonejs.github.io/ ### 🗒️ Notes #### ⏱️ [00:04](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=4) Introduces Tone.js goal - Tone.js enables browser-based music generation with code. - She plans a live coding music app using VS Code features. ### [H1] Prompt files organize complex LLM instructions > [!quote] [Coding Music in VS Code](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=50) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “Because I have quite a few requirements… I'm going to use prompt files to provide richer instructions to my LLM.” Prompt files improve reproducibility and scope clarity for Copilot sessions. [view highlight](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=50) #articleseed #xref ID:yt_9NKNNHCsykQ_50 #### ⏱️ [02:30](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=150) Copilot scaffolds app ### [H2] Copilot scaffolds and runs local dev server > [!quote] [Coding Music in VS Code](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=150) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “It generated all the code… installed dependencies via npm install and even starts the development server.” This showcases end-to-end automation from prompt to running app. [view highlight](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=150) #articleseed ID:yt_9NKNNHCsykQ_150 #### ⏱️ [03:20](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=200) UI overview ### [H3] Pattern editor supports live updates > [!quote] [Coding Music in VS Code](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=200) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “It has a play and stop button… change the tempo… and a pattern editor… with a live console.” Immediate feedback accelerates learning and composition. [view highlight](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=200) #xref ID:yt_9NKNNHCsykQ_200 #### ⏱️ [04:40](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=280) Docs assist ### [H4] README supplies patterns and instrument overview > [!quote] [Coding Music in VS Code](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=280) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “It gives me some pattern examples, an overview of all of the instruments and effects…” Bundled docs reduce friction for first-time users. [view highlight](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=280) #articleseed #xref ID:yt_9NKNNHCsykQ_280 #### ⏱️ [05:00](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=300) Prompt to file ### [H5] Copilot generates genre presets on request > [!quote] [Coding Music in VS Code](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=300) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “Create a new markdown file called techno sample… with key characteristics of a techno… tune.” Generative scaffolds lower expertise barriers for newcomers. [view highlight](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=300) #articleseed ID:yt_9NKNNHCsykQ_300 #### ⏱️ [05:49](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=349) Recommendations ### [H6] App suggests tempo and effects presets > [!quote] [Coding Music in VS Code](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=349) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “It’s also provided some recommended settings like what tempo I should use, which effects to apply…” Presets create sensible defaults and speed experimentation. [view highlight](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=349) #xref ID:yt_9NKNNHCsykQ_349 #### ⏱️ [06:07](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=367) Layering ### [H7] Layered patterns build complexity in real time > [!quote] [Coding Music in VS Code](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=367) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “Every time I add a new pattern, it layers the music right on top…” Live layering supports incremental composition and learning loops. [view highlight](https://www.youtube.com/watch?v=9NKNNHCsykQ&t=367) #articleseed #xref ID:yt_9NKNNHCsykQ_367 ## 📚 References - [Coding Music in VS Code (YouTube)](https://www.youtube.com/watch?v=9NKNNHCsykQ) - [Tone.js — Web Audio framework](https://tonejs.github.io/) - [VS Code — product home](https://code.visualstudio.com/) - [GitHub Copilot overview](https://github.com/features/copilot) - [Copilot Chat in VS Code](https://code.visualstudio.com/docs/copilot/copilot-chat) - [WCAG 2.2 Quick Reference](https://www.w3.org/WAI/WCAG22/quickref/) ### 🔖 Zettel Candidates - **Prompt files organize complex LL - Summary: In this episode, Julia builds a browser-based DJ app from scratch, generating code and experimenting with real-time beats that turn VS Code into a music studio. By coding music patterns, beats, and effects live with Tone.js and GitHub Copilot, she shows how AI can compose, layer, and remix techno-inspired sounds straight from code. It’s vibe coding, creativity, and rhythm all in one fun, interactive demo. 🔎 Chapters: 00:00 Introduction to Tone.js 00:28 Demo - Build a browser-based live coding music application 05:58 Testing our app 06:45 In summary 🔗 Link: Web App Tone: https://aka.ms/web-app-tone Use prompt files in VS Code: https://code.visualstudio.com/docs/copilot/customization/prompt-files 🎙️ Featuring: Julia Kasper 📲 Follow VS Code: * X: https://x.com/code * Bluesky: https://bsky.app/profile/vscode.dev * YouTube: https://youtube.com/code * LinkedIn: https://www.linkedin.com/showcase/104107263 * GitHub: https://github.com/microsoft/vscode #vscode - URL: https://www.youtube.com/watch?v=9NKNNHCsykQ Hi everyone, my name is Julia and I'm a product manager for the VS Code team. I recently came across an interesting open source web audio library called Tone.js and I wanted to test it out while working. I always love listening to music to help me focus. So I was always interested in how I could potentially create music but more in a code-based way because that's something I'm more familiar with. So today I will show you how I built a browserbased music application with the latest VS Code release. Before I get started, I'll ask Copilot if it knows what tone.js is and if it can help me explain what it does. I'm usually doing that because I will use that context later on for my prompt file. Because I have quite a few requirements and I don't want to dump all of this into the small chat window, I'm going to use prompt files to provide richer instructions to my LLM. So via the configuration icon, I'll create a new prompt file called web app DJ. This will automatically create a prompt MD file inside my prompt folder which I can then use directly with GitHub copilot. So inside this file I can specify a few things like which mode I want to use and also which model. So in my case I wanted to use cloud 4.5. So I will specify that. If I don't specify a model, it will just default to whatever is currently selected in the chat window. Next, I'll define my tasks like requirements and success criteria. And this is where I use the context from before. So mine is called DJ Julia live coding music web application. And my main objective is to build a browserbased live coding music app using tonejs. The idea is to let users write patternbased music code that plays in real time with seamless live updates. I've also listed some requirements like which web technologies to use and what kind of experience I want for the end users. Things like being able to write and edit code that generates generates music patterns, having a play and stop control to manage the playback and so on. I've also added um some requirements or implementation details and the deliverables. For example, I want the readme file with with setup and usage instructions since I I definitely want to use this web app later. Now that I've saved that file, I can reference it directly from the chat using a simple slash command. In my case, /web DJ that tells Copilot to follow all of the instructions from my prompt file. So this process uh might take a little bit. So let's skip ahead to the result. It generated all the code. It installed dependencies via npm install and even starts the development server. So my project is now running locally. Let's jump back to the copilot chat to see what happened. At the end of the process, Copilot provided a summary and it even gave me a quick example snippet which I will copy that for now because I I will use it in a bit. In the output, you can see that Copilot implemented all of the core features I described, the pattern-based music system, the audio engine built with tone.js, and also clean user interface to interact with everything. It also gave me an overview of all of the files that were created so I can see exactly how the project is structured. Okay, so now let's switch to explore the website. I can see it's called DJ Julia. It has a play and stop button, which is sweet. I can change the tempo, switch between different instruments, and play around with with different effects. It also created a pattern editor for me. And all the way at the bottom, there's a live console that shows what's going on in real time as I interact with it. All right, I copied the quick example from Copilot earlier. So, let's paste it in here. I'll just start with the first line for now to see what happens. Okay, let me hit the play button. Sweet. It's working. All right, let's stop it for now. Now, I'll speed it up a bit. All right, let me change up some of the effects to see what happens. [Music] Okay, let's go back to VS Code and see if we can make the music a bit more fun. Let's check if the readme file has some instructions for me. Okay, great. It gives me some pattern examples, an overview of all of the instruments and effects and how they work together. I also see it generated a pattern example MD file for me. Sweet. I can already see a techno pattern in here. But instead of using that one, let's see how creative copilot can get. I'm now asking it to create a new markdown file called techno sample that will generate a music pattern with some key characteristics of a technobase tune. Okay, perfect. It created the file for me. From the chat window, I will hit the keep button. So, my files are saved and sorted. I don't love that it's splitting the pattern into multiple lines. So, I'll ask Copilot to refactor it and give me everything in one line instead. Let's wait again. Okay, great. It highlights all of the changes that were made and I keep those as well. Now, I can easily copy and paste that single line straight into my browser editor. I love that it's also provided some recommended settings like what tempo I should use, which effects to apply, and even a few usage tips, which is fun. Let's try it out. I'll change the tempo to the recorded or recommended one and hit the play button. So, every time I add a new pattern, it layers the music right on top, building a more complex track. Let's see what happens if I tweak something like modifying the claps here. And last but not least, let's add my lead pattern. All right. So, thanks for watching and yeah, in the meantime, check out my already deployed web application., Coding Music in VS Code, Visual Studio Code, 01k860w0y82nb51mmts6e7prng.