{"id":2495,"date":"2009-04-02T14:27:54","date_gmt":"2009-04-02T21:27:54","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=2495"},"modified":"2015-02-25T19:50:52","modified_gmt":"2015-02-26T02:50:52","slug":"59-embedding-audio","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/59-embedding-audio\/","title":{"rendered":"#59: Embedding Audio"},"content":{"rendered":"
Putting an image on a webpage is easy, audio files, not so much. HTML5 will make it as easy as it should be, but until then, we have to resort to other methods. This screencast covers four methods\/players. Two use both JavaScript and Flash, one just Flash, one just JavaScript. <\/p>\n
Links from Video:<\/strong><\/p>\n Putting an image on a webpage is easy, audio files, not so much. HTML5 will make it as easy as it should be, but until then, we have to resort to other methods. This screencast covers four methods\/players. Two use both JavaScript and Flash, one just Flash, one just JavaScript. Links from Video: View Demo […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":155747,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/29-getting-production-ready\/","url_meta":{"origin":2495,"position":0},"title":"#29: Getting Production Ready","date":"November 12, 2013","format":false,"excerpt":"We're going to bring it back out to a normal text editor in this screencast, just as we started. In a \"real world\" situation, these things are true: You want to break up your JavaScript into as many small files as makes sense to you. Just like we broke up\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6602,"url":"https:\/\/css-tricks.com\/snippets\/css\/basics-of-google-font-api\/","url_meta":{"origin":2495,"position":1},"title":"Basics of Google Font API","date":"June 15, 2010","format":false,"excerpt":"Link to CSS files You essentially hotlink directly to CSS files on Google.com. Through URL parameters, you specificity which fonts you want, and what variations of those fonts. ... Idea: You can avoid an extra network request by opening that stylesheet and copy-and-pasting the @font-face stuff into your main stylesheet.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":146791,"url":"https:\/\/css-tricks.com\/video-screencasts\/128-effeckt-css-local-setup-with-grunt-and-contributing-on-github\/","url_meta":{"origin":2495,"position":2},"title":"#128: Effeckt.css, Local Setup with Grunt, and Contributing on GitHub","date":"August 15, 2013","format":false,"excerpt":"Effeckt.css is an in-progress open source project that aims to provide performant, quality CSS transitions and animations for web designers. The idea is to provide as little UI and JavaScript as possible so that you can extract an effect to use on your own site, and customize it, easily. In\u2026","rel":"","context":"With 16 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20786,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/test-if-dragenterdragover-event-contains-files\/","url_meta":{"origin":2495,"position":3},"title":"Test if dragenter\/dragover Event Contains Files","date":"March 25, 2013","format":false,"excerpt":"HTML5 drag and drop is great for handling file uploads. But if that's the only thing you are using it for, it's nice to know if any particular dragenter or dragover event actually has files. Unlike, for example, just the dragging of some selected text. Send the event object to\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":148806,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/05-dom-ready\/","url_meta":{"origin":2495,"position":4},"title":"#05: All About DOM Ready","date":"September 2, 2013","format":false,"excerpt":"We've talked a good bit about selectors. A jQuery selector like $(\"h1\") will select all elements on the page. But what about... when it doesn't? Here's an example of when that selector would fail: Learning jQuery Hello, World! Will that element be red? Nope. WTF right? The reason it doesn't\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":190764,"url":"https:\/\/css-tricks.com\/video-screencasts\/135-three-ways-animate-svg\/","url_meta":{"origin":2495,"position":5},"title":"#135: Three Ways to Animate SVG","date":"December 14, 2014","format":false,"excerpt":"Animating SVG is a bit unique in that there are three distinctly different ways you can approach animating it. 1. Animating with CSS @keyframes SVG elements can be targeted and styled with CSS. Meaning, you can apply animation through @keyframes. Like this: .left-leg { fill: orange; animation: dance 2s infinite\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2495"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=2495"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2495\/revisions"}],"predecessor-version":[{"id":17294,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2495\/revisions\/17294"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=2495"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=2495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n