This means that, for every second of audio, there are 44,100 individual data points. You might have seen this number before the typical sample rate for mp3 files is 44.1 kHz. The number of data points in a sound file depends on its sample rate. A digital sound file is made up of tiny slices of the original audio, roughly re-creating the smooth continuous wave. When playing back audio, your computer reverses the process: it recreates the sound, one tiny split-second of audio at a time. Sampling means measuring the sound waves hitting a microphone thousands of times every second, then storing those data points. To turn a smooth, continuous wave into data that it can store, computers do something called sampling. An analog sound wave is a smooth, continuous function.īut in a computer’s world of electronic signals, sound isn’t a wave. As sound travels from a source (like a speaker) to your ears, it compresses and decompresses air in a pattern that your ears and brain hear as music, or speech, or a dog’s bark, etc. In the real, analog world, sound is a wave.
But first, a lesson in how digital audio works
#Real object visualizer program how to#
It turns out that this example is a perfect way to get acquainted with the Web Audio API, and how to visualize audio data using the Canvas API. I learned a lot about how audio works on the web, and ultimately was able to achieve the look with less than 100 lines of JavaScript! Over nights and weekends, I hacked away trying to achieve this effect. We eventually shipped the redesigned pages with a much simpler podcast player.īut I was hooked on the problem. Given timelines and restraints, it wasn’t a possibility for that project. The answer from engineering: definitely not. I wondered if we could achieve a similar look for the player on the Wall Street Journal’s site. I previously worked at SoundCloud and knew that these kinds of visualizations were useful for users who skip through audio. One of the designers on the project was working on the podcast player, and I came upon Megaphone’s embedded player. But sometimes, I step on a technical landmine.Ī few years ago, as the design director of wsj.com, I was helping to re-design the Wall Street Journal’s podcast directory. I pride myself on thinking of the developers on my team while designing user interfaces. As a UI designer, I’m constantly reminded of the value of knowing how to code.
0 kommentar(er)
