Tone.js<\/a> – A Web Audio framework for making interactive music in the browser<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Web Audio API lets us make sound right in the browser. It makes your sites, apps, and games more fun and engaging. You can even build music-specific applications like drum machines and synthesizers. In this article, we’ll learn about working with the Web Audio API by building some fun and simple projects.<\/p>\n","protected":false},"author":247289,"featured_media":252420,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[723],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/webaudio.png?fit=874%2C468&ssl=1","jetpack-related-posts":[{"id":17841,"url":"https:\/\/css-tricks.com\/web-audio-api-sound-on-hover\/","url_meta":{"origin":252034,"position":0},"title":"Play Sound on Hover – Web Audio API Edition","date":"August 31, 2012","format":false,"excerpt":"The Web Audio API is a totally different beast than HTML5 audio elements. It provides lower level access to the sound system allowing for higher precision sound output. Notary Sojac explains it and provides a simple framework to make working with it easier.","rel":"","context":"In "Advanced"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253198,"url":"https:\/\/css-tricks.com\/recreating-legendary-8-bit-games-music-web-audio-api\/","url_meta":{"origin":252034,"position":1},"title":"Recreating Legendary 8-bit Games Music with the Web Audio API","date":"March 27, 2017","format":false,"excerpt":"Greg Hovanesyan, who recently posted here an Introduction to the Web Audio API, follows up with another huge post on how to use it to create iconic music from our nerds past, like sounds from The Legend of Zelda and Metroid. The final demo comes as a project you can\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":298334,"url":"https:\/\/css-tricks.com\/making-an-audio-waveform-visualizer-with-vanilla-javascript\/","url_meta":{"origin":252034,"position":2},"title":"Making an Audio Waveform Visualizer with Vanilla JavaScript","date":"November 12, 2019","format":false,"excerpt":"As a UI designer, I\u2019m constantly reminded of the value of knowing how to code. I pride myself on thinking of the developers on my team while designing user interfaces. But sometimes, I step on a technical landmine. A few years ago, as the design director of wsj.com, I was\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/audio-wavelength.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":257406,"url":"https:\/\/css-tricks.com\/form-validation-web-audio\/","url_meta":{"origin":252034,"position":3},"title":"Form Validation with Web Audio","date":"August 25, 2017","format":false,"excerpt":"I've been thinking about sound on websites for a while now. When we talk about using sound on websites, most of us grimace and think of the old days, when blaring background music played when the website loaded. Today this isn't and needn't be a thing. We can get clever\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":241774,"url":"https:\/\/css-tricks.com\/screamy-bird\/","url_meta":{"origin":252034,"position":4},"title":"Screamy Bird","date":"May 18, 2016","format":false,"excerpt":"During San Francisco\u2019s Stupid Shit No One Needs and Terrible Ideas \u201cHackathon\u201d, Glen Chiaccheri made a game where you have to literally scream your way through it. Make sure to check it out in Firefox, as Chrome and Safari don\u2019t support the getUserMedia API fully. This is the API that\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":256519,"url":"https:\/\/css-tricks.com\/lets-talk-speech-css\/","url_meta":{"origin":252034,"position":5},"title":"Let’s Talk About Speech CSS","date":"July 11, 2017","format":false,"excerpt":"Boston, like many large cities, has a subway system. Commuters on it are accustomed to hearing regular public address announcements. Riders simply tune out some announcements, such as the pre-recorded station stop names repeated over and over. Or public service announcements from local politicians and celebrities\u2014again, kind of repetitive and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/07\/speech.png?fit=1000%2C562&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/webaudio.png?fit=874%2C468&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/252034"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/247289"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=252034"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/252034\/revisions"}],"predecessor-version":[{"id":252573,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/252034\/revisions\/252573"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/252420"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=252034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=252034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=252034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}