{"id":21857245,"url":"https://github.com/greynewell/tone-js-tutorial","last_synced_at":"2025-08-23T22:06:27.963Z","repository":{"id":247326037,"uuid":"825548468","full_name":"greynewell/tone-js-tutorial","owner":"greynewell","description":"How to create sounds with Tone.js","archived":false,"fork":false,"pushed_at":"2025-05-09T01:02:45.000Z","size":58,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-09T01:37:19.104Z","etag":null,"topics":["audio","audio-processing","javascript","mit-license","parallel-processing","sound","sound-design","tonejs","tutorial"],"latest_commit_sha":null,"homepage":"https://lab.greynewell.com/Sample-Based-Sound-Design-with-Parallel-Processing-in-Tone-js-1e97e3cf88c081a89d7fe8e9b0ac5b84","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/greynewell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-07-08T04:00:24.000Z","updated_at":"2025-05-09T01:04:20.000Z","dependencies_parsed_at":"2024-07-08T05:24:30.270Z","dependency_job_id":"a6d0c4ae-656f-478e-bbfe-b9c4215be37a","html_url":"https://github.com/greynewell/tone-js-tutorial","commit_stats":null,"previous_names":["greynewell/tone-js-tutorial"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/greynewell/tone-js-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greynewell%2Ftone-js-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greynewell%2Ftone-js-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greynewell%2Ftone-js-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greynewell%2Ftone-js-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greynewell","download_url":"https://codeload.github.com/greynewell/tone-js-tutorial/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greynewell%2Ftone-js-tutorial/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261379644,"owners_count":23149927,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","audio-processing","javascript","mit-license","parallel-processing","sound","sound-design","tonejs","tutorial"],"created_at":"2024-11-28T02:26:25.246Z","updated_at":"2025-08-23T22:06:27.943Z","avatar_url":"https://github.com/greynewell.png","language":"TypeScript","readme":"# Sample Based Sound Design with Parallel Processing in Tone.js\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat\u0026logo=javascript\u0026logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n[![Tone.js](https://img.shields.io/badge/Tone.js-000000?style=flat\u0026logo=tonejs\u0026logoColor=white)](https://tonejs.github.io/)\n[![Web Audio API](https://img.shields.io/badge/Web%20Audio%20API-000000?style=flat\u0026logo=web-audio-api\u0026logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\n\n## Overview\n\nThis repository demonstrates how to implement professional-grade sound design using Tone.js, focusing on sample-based synthesis and parallel processing techniques. Whether you're building a music application, creating sound effects for games, or developing AI-powered audio tools, this tutorial will help you master the art of programmatic sound design.\n\n## Why Sound Design Matters\n\nSound design is crucial in various contexts:\n- **Music Production**: Makes the difference between a demo and a hit record\n- **Generative Audio**: Helps avoid the \"uncanny valley\" in AI-generated sounds\n- **AI Training**: Enables creation of ethical, copyright-safe datasets for audio model fine-tuning\n\n## Key Concepts\n\n### Sound Design Approaches\n\n1. **Additive Techniques**\n   - Combines simple sounds (sine waves, impulses)\n   - Creates complex sounds through wave summation\n   - More control over individual harmonics\n\n2. **Subtractive Techniques**\n   - Starts with harmonically rich audio\n   - Shapes sound using filters, compression, and EQ\n   - More efficient for certain sound types\n\n### Samples vs Synthesizers\n\n- **Samples**: Pre-recorded sounds that can be manipulated\n- **Synthesizers**: Generate sounds electronically\n- Both approaches can be used with additive or subtractive methods\n\n## Implementation Guide\n\n### 1. Creating a Sampler\n\n![React component featuring a Tone.js Sampler](assets/Screenshot_2024-07-07_at_9.26.22_PM.png)\n\n```javascript\n// Example sampler implementation\nconst sampler = new Tone.Sampler({\n  urls: {\n    \"C4\": \"C4.mp3\",\n    \"D#4\": \"Ds4.mp3\",\n    \"F#4\": \"Fs4.mp3\",\n    \"A4\": \"A4.mp3\",\n  },\n  onload: () =\u003e {\n    console.log('samples loaded');\n  }\n}).toDestination();\n```\n\n### 2. Audio Channel Setup\n\n#### Insert Channels\n![Object-Oriented TypeScript code for an Insert Channel](assets/Screenshot_2024-07-07_at_9.58.32_PM.png)\n\n```javascript\nconst insertChannel = new InsertChannel({ processor: someProcessor });\n```\n\n#### Aux Channels\n![Implementing an Aux Channel with Tone.js](assets/Screenshot_2024-07-07_at_10.08.59_PM.png)\n\n```javascript\nconst reverb = new Tone.Reverb();\nconst delay = new Tone.FeedbackDelay();\nconst auxChannel = new AuxChannel({ effects: [reverb, delay] });\n```\n\n#### Bus Channels\n![Create a Bus channel in JavaScript with Tone.js](assets/Screenshot_2024-07-07_at_10.27.46_PM.png)\n\n```javascript\nconst busChannel = new BusChannel();\nbusChannel.setVolume(-6); // Set volume to -6 dB\nbusChannel.setPan(0.5); // Pan slightly to the right\n```\n\n### 3. Signal Processing Chain\n\n![Basic parallel processing signal chain](assets/signal-processing-chain.png)\n\nThe signal chain follows this general flow:\n1. Sound sources → Insert channels\n2. Insert channels → Multiple bus groups\n3. Bus groups → Aux channels for effects\n4. Final mix → Output\n\n## Usage Examples\n\n### Adding Effects\n\n```javascript\n// Add effects to an Aux channel\nauxChannel.addEffect(new Tone.Chorus());\nauxChannel.removeEffect(delay);\n\n// Add effects to a Bus channel\nbusChannel.addEffect(new Tone.Reverb());\nbusChannel.addEffect(new Tone.Chorus());\n```\n\n### Audio Routing\n\n```javascript\n// Connect instruments to a bus\ninstrument1.connect(busChannel);\ninstrument2.connect(busChannel);\ninstrument3.connect(busChannel);\n```\n\n## Best Practices\n\n1. **Signal Flow**\n   - Keep your signal chain organized and documented\n   - Use bus channels for grouping related sounds\n   - Apply effects in parallel when possible\n\n2. **Performance**\n   - Monitor CPU usage when using multiple effects\n   - Use appropriate buffer sizes for your use case\n   - Clean up unused nodes to prevent memory leaks\n\n3. **Sound Design**\n   - Start with high-quality source material\n   - Use parallel processing for complex sounds\n   - Experiment with different effect combinations\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## Acknowledgments\n\n- [Tone.js](https://tonejs.github.io/) for the amazing Web Audio framework\n- The Web Audio API community for continuous innovation\n- All contributors who have helped improve this tutorial \n\n## Read the full post\n\nRead the [full post in my lab](https://lab.greynewell.com/Sample-Based-Sound-Design-with-Parallel-Processing-in-Tone-js-1e97e3cf88c081a89d7fe8e9b0ac5b84) or go to [greynewell.com](https://greynewell.com) for more projects.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreynewell%2Ftone-js-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreynewell%2Ftone-js-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreynewell%2Ftone-js-tutorial/lists"}