![]() 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 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. Since flash is still widespread enough, it's probably the safest fallback.Īlso, I want to note that there's nothing worse to use some library, some of them (e.g.As a UI designer, I’m constantly reminded of the value of knowing how to code. Mobile Safari (iDevices with iOS 3.0+) support MP3, AAC.Android (2.3+) supported codecs are device-dependent.Opera Mobile (11.0+) supported codecs are device-dependent.Chrome (6.0+) support Ogg Vorbis, MP3, WAV+.Internet Explorer (9.0+) support MP3 and AAC codecs.You can take a look at this compatibility table, for both desktop and mobile browsers. Unfortunately, there is still no single video and audio codec, which is supported by all browsers! The programmers have to ensure that there is fallback provided for use-cases where browser A doesn't support codec B and vice versa. ![]() ![]() With some streams (shoutcast I presume) I have had to add a closing ' ' to the URL, see for notes there, but that's basically just to get the "right" url. Opus might be another nicely cross platform option, I'm not sure codec wise what is the "best" choice as it were. Mp3 codec seems to be supported in major browsers (barring possibly firefox on Linux ). For backward compatibility to non HTML 5 browsers, this project may be useful: (haven't tested it with live streaming but could/should work). So eventually you may want to replace the controls with "custom" ones, in normal HTML 5 media style. Basically just use the normal HTML 5 audio tags, and input the "live stream" URL as the source, ex: Īnd the stream "just works" as it were, though attempting to seek with the default controls does nothing. Playing audio from a "live source" seems to be supported by modern browsers.
0 Comments
Leave a Reply. |