How to visualize sound on the web: a selection of thematic materials and video lectures with theory and practice
Last time we prepared a digest for you
with open libraries for visualizing audio content and decided to find materials on how to work with all this. The result is a selection of guides on the topic for developers of web applications or games. Photo s_keller / Pixabay
In our blog on Habré -> Reading for the weekend: 65 materials about streaming, the history of the old "musical iron", audio technologies and the history of acoustic manufacturers
Theory and History
- Theory: methods for highlighting the fundamental tone . A member of the Ableton development team, a studio-based sound program, parses a few common algorithms for isolating the pitch (repeating sound wave cycle) in music recordings. Examples are: the zero crossing method and the method based on the identification of the fundamental harmonic. The author also cites several additional reading materials that discuss advanced approaches to highlighting the fundamental tone. The article may be of interest to those who plan to write a music application that displays graphs of sound waves.
- A brief history of synthesizers . This is a video of one of the speeches at the Scotland JS conference. Chris Lowis, editor of Web Audio Weekly, talks about how synthesizers have evolved and how they work. All this with examples on JS.
- Web Audio API Basics . Mozilla developers talk about Web Audio API features, specifications for managing audio content in browsers. It describes both basic things like interacting with audio buffers, as well as more advanced ones (for example, visualization of sound). Many graphs, diagrams, and code examples. The material is regularly updated - it can be used as a “desktop” reference when developing applications.
- 8-bit Music Theory . A YouTube channel dedicated to parsing video game audio from a musical theory perspective. For example, in this video, the author shows by examples how music helps to create an atmosphere in the Hollow Knight game, and here we are talking about one of the final compositions in Dark Souls. The channel can be useful to those who write their own game. Here you can pick up a few ideas for her musical accompaniment.
- Musical instrument with Web Audio API . A record with JSConf, during which Steve Kinney, founder of the Turing School, shows how to build a synthesizer in a browser on the getUserMedia Web API and WebSockets. He also talks about using the Web Audio API to build a musical instrument on Arduino.
- Introducing p5.js. p5.js is a visualization library that allows you to "draw using code." In the video, its developer, Lauren McCarthy, demonstrates with examples how to use this tool to create artistic elements and animations. If you want to evaluate the capabilities of p5.js yourself, then there is a special editor on the official website of the project.
- Music from 8-bit games on the Web Audio API . This article is about how to recreate and visualize 8-bit music using the Web Audio API and Tone.js framework from Pac-Man, Super Mario Bros, Metroid, Kirby's Adventure and The Legend of Zelda. Listen to the resulting composition, see the code and, if desired, you can modify it on CodePen . To make it easier to understand the source, the author recommends that you first watch this video on YouTube - it explains how the sound "worked" in old computers.
- How to create a dance track using the Web Audio API . Recording performance by Paul Adenot, an engineer at Mozilla who works on the Firefox browser and helps W3C complete the Web Audio API specification. Paul takes apart the main components of the techno track and shows how to recreate it on JS. It can be said that this is a live music programming session.
Additional reading - from our "World of Hi-Fi": How to write music using OOP What kind of music was “wired” in popular OS Musical programming - who does it and why How the PC conquered the media industry: discussing Pro Tools and Media Composer Where to get audio samples for your projects: a selection of nine resources 12 thematic resources with tracks licensed under Creative Commons Innovation SSI-2001: the story of one of the rarest sound cards for the IBM PC Enthusiast recreated Sound Blaster 1.0 sound card: why the project is remarkable
At us on Habré -> Sound cards as a way to plunge into the atmosphere of an unfamiliar city