[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3888":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":16,"starSnapshotCount":16,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},3888,"Tone.js","Tonejs\u002FTone.js","Tonejs","A Web Audio framework for making interactive music in the browser.","https:\u002F\u002Ftonejs.github.io",null,"TypeScript",14641,1050,207,57,0,1,10,49,8,44.06,"MIT License",false,"dev",true,[27,28,29,30,31,32,33],"javascript","music","samples","scheduling","synthesis","tone","web-audio","2026-06-12 02:00:55","# Tone.js\n\n[![codecov](https:\u002F\u002Fcodecov.io\u002Fgh\u002FTonejs\u002FTone.js\u002Fbranch\u002Fdev\u002Fgraph\u002Fbadge.svg)](https:\u002F\u002Fcodecov.io\u002Fgh\u002FTonejs\u002FTone.js)\n\nTone.js is a Web Audio framework for creating interactive music in the browser. The architecture of Tone.js aims to be familiar to both musicians and audio programmers creating web-based audio applications. On the high-level, Tone offers common DAW (digital audio workstation) features like a global transport for synchronizing and scheduling events as well as prebuilt synths and effects. Additionally, Tone provides high-performance building blocks to create your own synthesizers, effects, and complex control signals.\n\n-   [API](https:\u002F\u002Ftonejs.github.io\u002Fdocs\u002F)\n-   [Examples](https:\u002F\u002Ftonejs.github.io\u002Fexamples\u002F)\n\n# Installation\n\nThere are two ways to incorporate Tone.js into a project. First, it can be installed locally into a project using `npm`:\n\n```bash\nnpm install tone      \u002F\u002F Install the latest stable version\nnpm install tone@next \u002F\u002F Or, alternatively, use the 'next' version\n```\n\nAdd Tone.js to a project using the JavaScript `import` syntax:\n\n```js\nimport * as Tone from \"tone\";\n```\n\nTone.js is also hosted at unpkg.com. It can be added directly within an HTML document, as long as it precedes any project scripts. [See the example here](https:\u002F\u002Fgithub.com\u002FTonejs\u002FTone.js\u002Fblob\u002Fmaster\u002Fexamples\u002FsimpleHtml.html) for more details.\n\n```html\n\u003Cscript src=\"http:\u002F\u002Funpkg.com\u002Ftone\">\u003C\u002Fscript>\n```\n\n# Hello Tone\n\n```javascript\n\u002F\u002Fcreate a synth and connect it to the main output (your speakers)\nconst synth = new Tone.Synth().toDestination();\n\n\u002F\u002Fplay a middle 'C' for the duration of an 8th note\nsynth.triggerAttackRelease(\"C4\", \"8n\");\n```\n\n## Tone.Synth\n\n`Tone.Synth` is a basic synthesizer with a single oscillator and an ADSR envelope.\n\n### triggerAttack \u002F triggerRelease\n\n`triggerAttack` starts the note (the amplitude is rising), and `triggerRelease` is when the amplitude is going back to 0 (i.e. **note off**).\n\n```javascript\nconst synth = new Tone.Synth().toDestination();\nconst now = Tone.now();\n\u002F\u002F trigger the attack immediately\nsynth.triggerAttack(\"C4\", now);\n\u002F\u002F wait one second before triggering the release\nsynth.triggerRelease(now + 1);\n```\n\n### triggerAttackRelease\n\n`triggerAttackRelease` is a combination of `triggerAttack` and `triggerRelease`\n\nThe first argument to the note which can either be a frequency in hertz (like `440`) or as \"pitch-octave\" notation (like `\"D#2\"`).\n\nThe second argument is the duration that the note is held. This value can either be in seconds, or as a [tempo-relative value](https:\u002F\u002Fgithub.com\u002FTonejs\u002FTone.js\u002Fwiki\u002FTime).\n\nThe third (optional) argument of `triggerAttackRelease` is _when_ along the AudioContext time the note should play. It can be used to schedule events in the future.\n\n```javascript\nconst synth = new Tone.Synth().toDestination();\nconst now = Tone.now();\nsynth.triggerAttackRelease(\"C4\", \"8n\", now);\nsynth.triggerAttackRelease(\"E4\", \"8n\", now + 0.5);\nsynth.triggerAttackRelease(\"G4\", \"8n\", now + 1);\n```\n\n## Time\n\nWeb Audio has advanced, sample accurate scheduling capabilities. The AudioContext time is what the Web Audio API uses to schedule events, starts at 0 when the page loads and counts up in **seconds**.\n\n`Tone.now()` gets the current time of the AudioContext.\n\n```javascript\nsetInterval(() => console.log(Tone.now()), 100);\n```\n\nTone.js abstracts away the AudioContext time. Instead of defining all values in seconds, any method which takes time as an argument can accept a number or a string. For example `\"4n\"` is a quarter-note, `\"8t\"` is an eighth-note triplet, and `\"1m\"` is one measure.\n\n[Read about Time encodings](https:\u002F\u002Fgithub.com\u002FTonejs\u002FTone.js\u002Fwiki\u002FTime).\n\n# Starting Audio\n\n**IMPORTANT**: Browsers will not play _any_ audio until a user clicks something (like a play button). Run your Tone.js code only after calling `Tone.start()` from a event listener which is triggered by a user action such as \"click\" or \"keydown\".\n\n`Tone.start()` returns a promise, the audio will be ready only after that promise is resolved. Scheduling or playing audio before the AudioContext is running will result in silence or incorrect scheduling.\n\n```javascript\n\u002F\u002Fattach a click listener to a play button\ndocument.querySelector(\"button\")?.addEventListener(\"click\", async () => {\n\tawait Tone.start();\n\tconsole.log(\"audio is ready\");\n});\n```\n\n# Scheduling\n\n## Transport\n\n`Tone.getTransport()` returns the main timekeeper. Unlike the AudioContext clock, it can be started, stopped, looped and adjusted on the fly. You can think of it like the arrangement view in a Digital Audio Workstation.\n\nMultiple events and parts can be arranged and synchronized along the Transport. `Tone.Loop` is a simple way to create a looped callback that can be scheduled to start and stop.\n\n```javascript\n\u002F\u002F create two monophonic synths\nconst synthA = new Tone.FMSynth().toDestination();\nconst synthB = new Tone.AMSynth().toDestination();\n\u002F\u002Fplay a note every quarter-note\nconst loopA = new Tone.Loop((time) => {\n\tsynthA.triggerAttackRelease(\"C2\", \"8n\", time);\n}, \"4n\").start(0);\n\u002F\u002Fplay another note every off quarter-note, by starting it \"8n\"\nconst loopB = new Tone.Loop((time) => {\n\tsynthB.triggerAttackRelease(\"C4\", \"8n\", time);\n}, \"4n\").start(\"8n\");\n\u002F\u002F all loops start when the Transport is started\nTone.getTransport().start();\n\u002F\u002F ramp up to 800 bpm over 10 seconds\nTone.getTransport().bpm.rampTo(800, 10);\n```\n\nSince Javascript callbacks are **not precisely timed**, the sample-accurate time of the event is passed into the callback function. **Use this time value to schedule the events**.\n\n# Instruments\n\nThere are numerous synths to choose from including `Tone.FMSynth`, `Tone.AMSynth` and `Tone.NoiseSynth`.\n\nAll of these instruments are **monophonic** (single voice) which means that they can only play one note at a time.\n\nTo create a **polyphonic** synthesizer, use `Tone.PolySynth`, which accepts a monophonic synth as its first parameter and automatically handles the note allocation so you can pass in multiple notes. The API is similar to the monophonic synths, except `triggerRelease` must be given a note or array of notes.\n\n```javascript\nconst synth = new Tone.PolySynth(Tone.Synth).toDestination();\nconst now = Tone.now();\nsynth.triggerAttack(\"D4\", now);\nsynth.triggerAttack(\"F4\", now + 0.5);\nsynth.triggerAttack(\"A4\", now + 1);\nsynth.triggerAttack(\"C5\", now + 1.5);\nsynth.triggerAttack(\"E5\", now + 2);\nsynth.triggerRelease([\"D4\", \"F4\", \"A4\", \"C5\", \"E5\"], now + 4);\n```\n\n# Samples\n\nSound generation is not limited to synthesized sounds. You can also load a sample and play that back in a number of ways. `Tone.Player` is one way to load and play back an audio file.\n\n```javascript\nconst player = new Tone.Player(\n\t\"https:\u002F\u002Ftonejs.github.io\u002Faudio\u002Fberklee\u002Fgong_1.mp3\"\n).toDestination();\nTone.loaded().then(() => {\n\tplayer.start();\n});\n```\n\n`Tone.loaded()` returns a promise which resolves when _all_ audio files are loaded. It's a helpful shorthand instead of waiting on each individual audio buffer's `onload` event to resolve.\n\n## Tone.Sampler\n\nMultiple samples can also be combined into an instrument. If you have audio files organized by note, `Tone.Sampler` will pitch shift the samples to fill in gaps between notes. So for example, if you only have every 3rd note on a piano sampled, you could turn that into a full piano sample.\n\nUnlike the other synths, Tone.Sampler is polyphonic so doesn't need to be passed into Tone.PolySynth\n\n```javascript\nconst sampler = new Tone.Sampler({\n\turls: {\n\t\tC4: \"C4.mp3\",\n\t\t\"D#4\": \"Ds4.mp3\",\n\t\t\"F#4\": \"Fs4.mp3\",\n\t\tA4: \"A4.mp3\",\n\t},\n\trelease: 1,\n\tbaseUrl: \"https:\u002F\u002Ftonejs.github.io\u002Faudio\u002Fsalamander\u002F\",\n}).toDestination();\n\nTone.loaded().then(() => {\n\tsampler.triggerAttackRelease([\"Eb4\", \"G4\", \"Bb4\"], 4);\n});\n```\n\n# Effects\n\nIn the above examples, the sources were always connected directly to the `Destination`, but the output of the synth could also be routed through one (or more) effects before going to the speakers.\n\n```javascript\nconst player = new Tone.Player({\n\turl: \"https:\u002F\u002Ftonejs.github.io\u002Faudio\u002Fberklee\u002Fgurgling_theremin_1.mp3\",\n\tloop: true,\n\tautostart: true,\n});\n\u002F\u002Fcreate a distortion effect\nconst distortion = new Tone.Distortion(0.4).toDestination();\n\u002F\u002Fconnect a player to the distortion\nplayer.connect(distortion);\n```\n\nThe connection routing is flexible, connections can run serially or in parallel.\n\n```javascript\nconst player = new Tone.Player({\n\turl: \"https:\u002F\u002Ftonejs.github.io\u002Faudio\u002Fdrum-samples\u002Floops\u002Fominous.mp3\",\n\tautostart: true,\n});\nconst filter = new Tone.Filter(400, \"lowpass\").toDestination();\nconst feedbackDelay = new Tone.FeedbackDelay(0.125, 0.5).toDestination();\n\n\u002F\u002F connect the player to the feedback delay and filter in parallel\nplayer.connect(filter);\nplayer.connect(feedbackDelay);\n```\n\nMultiple nodes can be connected to the same input enabling sources to share effects. `Tone.Gain` is useful utility node for creating complex routing.\n\n# Signals\n\nLike the underlying Web Audio API, Tone.js is built with audio-rate signal control over nearly everything. This is a powerful feature which allows for sample-accurate synchronization and scheduling of parameters.\n\n`Signal` properties have a few built in methods for creating automation curves.\n\nFor example, the `frequency` parameter on `Oscillator` is a Signal so you can create a smooth ramp from one frequency to another.\n\n```javascript\nconst osc = new Tone.Oscillator().toDestination();\n\u002F\u002F start at \"C4\"\nosc.frequency.value = \"C4\";\n\u002F\u002F ramp to \"C2\" over 2 seconds\nosc.frequency.rampTo(\"C2\", 2);\n\u002F\u002F start the oscillator for 2 seconds\nosc.start().stop(\"+3\");\n```\n\n# AudioContext\n\nTone.js creates an AudioContext when it loads and shims it for maximum browser compatibility using [standardized-audio-context](https:\u002F\u002Fgithub.com\u002Fchrisguttandin\u002Fstandardized-audio-context). The AudioContext can be accessed at `Tone.getContext`. Or set your own AudioContext using `Tone.setContext(audioContext)`.\n\n# MIDI\n\nTo use MIDI files, you'll first need to convert them into a JSON format which Tone.js can understand using [Midi](https:\u002F\u002Ftonejs.github.io\u002FMidi\u002F).\n\n# Performance\n\nTone.js makes extensive use of the native Web Audio Nodes such as the GainNode and WaveShaperNode for all signal processing, which enables Tone.js to work well on both desktop and mobile browsers.\n\n[This wiki](https:\u002F\u002Fgithub.com\u002FTonejs\u002FTone.js\u002Fwiki\u002FPerformance) article has some suggestions related to performance for best practices.\n\n# Testing\n\nTone.js runs an extensive test suite using [mocha](https:\u002F\u002Fmochajs.org\u002F) and [chai](http:\u002F\u002Fchaijs.com\u002F) with nearly 100% coverage. Passing builds on the 'dev' branch are published on npm as `tone@next`.\n\n# Contributing\n\nThere are many ways to contribute to Tone.js. Check out [this wiki](https:\u002F\u002Fgithub.com\u002FTonejs\u002FTone.js\u002Fwiki\u002FContributing) if you're interested.\n\n# References and Inspiration\n\n-   [Many of Chris Wilson's Repositories](https:\u002F\u002Fgithub.com\u002Fcwilso)\n-   [Many of Mohayonao's Repositories](https:\u002F\u002Fgithub.com\u002Fmohayonao)\n-   [The Spec](http:\u002F\u002Fwebaudio.github.io\u002Fweb-audio-api\u002F)\n-   [Sound on Sound - Synth Secrets](http:\u002F\u002Fwww.soundonsound.com\u002Fsos\u002Fmay99\u002Farticles\u002Fsynthsec.htm)\n-   [Miller Puckette - Theory and Techniques of Electronic Music](http:\u002F\u002Fmsp.ucsd.edu\u002Ftechniques.htm)\n-   [standardized-audio-context](https:\u002F\u002Fgithub.com\u002Fchrisguttandin\u002Fstandardized-audio-context)\n","Tone.js 是一个用于在浏览器中创建互动音乐的Web Audio框架。它提供了常见的数字音频工作站功能，如全局传输以同步和调度事件，以及预构建的合成器和效果器。此外，Tone.js 还提供高性能的基础组件，让用户能够自定义合成器、效果器及复杂的控制信号。项目采用TypeScript编写，支持通过npm安装或直接在HTML文档中引用。适用于需要在网络应用中实现音乐创作与播放的场景，无论是教育、娱乐还是专业音乐制作领域都能找到其用武之地。",2,"2026-06-11 02:56:55","top_language"]