Skip to main content
SimilarExport ZIP
100%

Tone.js - "Mary Had a Little Lamb"

✓ Published1🌍 Public
AAxVa 🐍 💪
Last edited Oct 31, 2024
Created on Oct 27, 2024

This example plays the melody “Mary Had a Little Lamb” using the Tone.js library for Web Audio. It displays a Play button and a hidden “Playing” paragraph, toggled by button clicks. The code schedules individual notes with `Tone.Part` and `Tone.Transport`, using a polyphonic synth (`Tone.PolySynth`) to trigger note pairs and single notes at precise timing positions. The note sequence is hardcoded as an array of time–note pairs, based on the book "JavaScript Crash Course" by Nick Morgan.

AI-generated description

This example is based on the book "JavaScript Crash Course: A Hands-On, Project-Based Introduction to Programming" by Nick Morgan, No Starch Press, 2024.

Visit also my repo https://github.com/ax-va/JavaScript-Crash-Course-Morgan-2024.

MIT Licensed

Similar vizzes

Loading thumbnail…

Song with Tone.js

This example demonstrates a generative music composition built with the Tone.js library, controlled through a single Play button in the browser. It showcases how multiple synthesized instruments—drums, bass lines, chords, and a trumpet sampler—are sequenced together to form a layered song. The code constructs drum patterns using string-based sequences parsed by helper functions, schedules repeating loops with `Tone.Sequence`, and chains audio effects like `Tone.Reverb` and `Tone.Filter` to shape the sound. The trumpet samples are loaded from an external URL using `Tone.Sampler`.

AAxVa 🐍 💪
75% match
Loading thumbnail…

Tone.js - Rock drum sounds + Reverb

This example demonstrates how to create a rock drum beat with reverb using the Tone.js audio library. It plays a sequence of kick, snare, and hi-hat sounds through reverb and filter effects. The drum pattern data is defined as strings representing eighth-note sequences. The interface shows a Play button that triggers the audio and displays "Playing" text. The code uses Tone.Sequence, Tone.Reverb, Tone.Filter, Tone.NoiseSynth, Tone.Synth, and Tone.MembraneSynth to construct the beat.

AAxVa 🐍 💪
66% match
Loading thumbnail…

JS Bin

This example presents an interactive musical keyboard built with the Web Audio API, where each piano-style button corresponds to a specific note (C through B). The page shows how a single oscillator can generate tones by connecting and disconnecting it from the audio destination on button press and release. The code uses `AudioContext`, `createOscillator`, and `createGain` from the Web Audio API, with square-wave synthesis producing the sound. The interface relies on HTML button elements with `onmousedown` and `onmouseup` handlers to trigger the `noise()` and `silence()` functions, which set the oscillator frequency and toggle its connection. The source is a standalone HTML file with embedded JavaScript, rendering no visual data but demonstrating audio-frequency control.

FFrankieFabuloso
59% match
Loading thumbnail…

Hello Sound!

This example uses the Web Audio API to play two sawtooth tones a major third apart, each triggered sequentially after a one-second pause. The code converts MIDI note numbers to frequencies using a mathematical formula, then creates and starts an oscillator through an AudioContext. Oscillator lifecycle events schedule the second note, while a biquad filter is instantiated but not connected. The page itself displays only a static message, with styling handled by CSS and no D3 visualization logic present despite the D3 library being loaded.

RRubens
58% match
Loading thumbnail…

Making Chiptune Music using Sonic Pi v2.0

This example shows how to recreate the original NES Mario Bros. theme as chiptune music using Sonic Pi v2.0. It demonstrates the use of four synth types—pulse waves, triangle waves, and FM synthesis—to emulate the NES sound chip, with the melody transcribed from MML notation. The code organizes the music into threads and defines reusable patterns using Ruby lambdas, `play_pattern_timed`, and `nil` rests to structure complex rhythms. It also highlights practical constraints like interpreter size limits and platform-specific performance tweaks.

IIoTeacher
57% match
Loading thumbnail…

JavaScript事件

This example demonstrates a simple user interface for selecting and previewing sound effects using native JavaScript event handling. The page provides a dropdown menu with four sound options and a "试听" (preview) button that triggers playback of a fixed audio file hosted remotely. The code uses the HTML `select` and `button` elements, with an inline `onclick` handler invoking the `playsound()` function. This function accesses the `audio` element by ID and calls its `play()` method, relying on the browser’s built-in HTML5 audio API rather than any external visualization libraries.

Oocean1225
54% match
Loading thumbnail…

Gist 7942740a263d3aa26e8c77adad206372

This visualization is an interactive canvas-based musical instrument that maps a two-dimensional grid of colored, circular nodes to specific musical notes. It shows how different spatial regions correspond to different tones, with the size and color of each node likely encoding additional sonic parameters such as pitch or octave. The application uses a custom `PitchDetector` algorithm and a `Player` class to translate node interactions into audio output, while the rendering relies on Canvas drawing operations. The code references the `notes_midi_freq.csv` dataset to map note names and MIDI numbers to their corresponding frequencies, enabling the generation of accurate musical tones.

MMAKIO135
54% match
Loading thumbnail…

Piano App

An interactive virtual piano with white and black keys generates musical tones through the Web Audio API, allowing play via mouse, touch, or keyboard. The instrument displays a realistic 3D design using CSS gradients and shadows, with visual feedback through CSS transitions on key presses. A built-in demo melody button triggers a pre-programmed scale. The implementation dynamically creates piano keys through DOM manipulation and uses Web Audio API for audio synthesis with gain control, demonstrating front-end techniques for responsive instrument interfaces.

NNita
54% match