{"id":43,"date":"2011-01-05T01:50:55","date_gmt":"2011-01-05T01:50:55","guid":{"rendered":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/?p=43"},"modified":"2011-01-05T01:50:55","modified_gmt":"2011-01-05T01:50:55","slug":"audio-in-an-ios-web-app","status":"publish","type":"post","link":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/?p=43","title":{"rendered":"Audio in an iOS Web App"},"content":{"rendered":"<p><a href=\"http:\/\/www.yeschefgame.mkurtz.com\/blog\/wp-content\/uploads\/2011\/01\/yc8.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44\" title=\"yc8\" src=\"http:\/\/www.yeschefgame.mkurtz.com\/blog\/wp-content\/uploads\/2011\/01\/yc8.jpg\" alt=\"\" width=\"600\" height=\"197\" srcset=\"http:\/\/www.yeschefgame.mkurtz.com\/blog\/wp-content\/uploads\/2011\/01\/yc8.jpg 600w, http:\/\/www.yeschefgame.mkurtz.com\/blog\/wp-content\/uploads\/2011\/01\/yc8-300x98.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>One of the additions to the HTML5 spec is the new &lt;audio&gt; and &lt;video&gt; tags which allows you to play sounds (or videos) and control them programatically via JavaScript.<\/p>\n<p><a href=\"http:\/\/html5doctor.com\/native-audio-in-the-browser\/\" target=\"_blank\">Audio tag information via HTML5Doctor.com<\/a><\/p>\n<p>I thought this would be a great addition to the game for the question screen, where the idea was that when the countdown timer got to 10 seconds left an audio file of a ticking clock sound getting progressively louder would play, and then when the time reached zero, a bell sound would go off.<\/p>\n<p>The code worked great on a desktop, but there are some restrictions in the iOS WebKit which prevents it from being used in the game, so I removed it. Specifically:<\/p>\n<ul>\n<li>iOS blocks a web page from automatically playing a sound via the <span style=\"color: #339966;\">autoplay<\/span> attribute in order to save bandwidth (fair enough)<\/li>\n<li>In order to play the sound, a user action is required to trigger the sound<\/li>\n<li>In previous versions of iOS, javascript could be used to simulate a click on the page which would trigger the sound &#8211; this hack stopped working with iOS 4.2<\/li>\n<\/ul>\n<p>So much for that idea&#8230; So rather than an audio cue when the timer ran out, the app uses JavaScript to flash the background color of the timer to let the player know time&#8217;s up.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the additions to the HTML5 spec is the new &lt;audio&gt; and &lt;video&gt; tags which allows you to play sounds (or videos) and control them programatically via JavaScript. Audio tag information via HTML5Doctor.com I thought this would be a &hellip; <a href=\"http:\/\/www.yeschefgame.mkurtz.com\/blog\/?p=43\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-43","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=43"}],"version-history":[{"count":0,"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/43\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}