{"id":10336,"date":"2014-10-21T05:09:35","date_gmt":"2014-10-20T18:09:35","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10336"},"modified":"2014-10-21T05:09:35","modified_gmt":"2014-10-20T18:09:35","slug":"audio-on-web-browser-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/audio-on-web-browser-primer-tutorial\/","title":{"rendered":"Audio on Web Browser Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/wind.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Audio on Web Browser Primer Tutorial ... clicking plays audio file\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/wind.jpg\" title=\"Audio on Web Browser Primer Tutorial ... clicking plays audio file\"  \/><\/a><p class=\"wp-caption-text\">Audio on Web Browser Primer Tutorial ... clicking plays audio file<\/p><\/div>\n<p>The major web browsers on a Mac laptop or Windows laptop have differences in rendering and methods by which they play media files.  With this in mind, today&#8217;s tutorial attempts to play audio across the major browsers where &#8230;<\/p>\n<ul>\n<li>the audio plays as soon as the webpage loads &#8230; annoying if you are not informed of this, but today we warn you &#8230; so &#8230; be warned &#8230; clicking the picture should load an audio file<\/li>\n<li>show controls<\/li>\n<li>loop the audio file<\/li>\n<\/ul>\n<p>&#8230; as you can see there are quite a few scenarios &#8230; let alone considering the audio format &#8230; as far as that goes, consult this w3schools <a target=_blank title='Audio tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_audio.asp'>link<\/a>.<\/p>\n<p>Along the way you may need some (online) audio format conversion functionality, and for this we like <a target=_blank title='MP3 to OGG online' href='http:\/\/www.online-convert.com'>MP3 to OGG conversions online<\/a> (for example).<\/p>\n<p>Where can you source some audio files? &#8230; We like <a target=_blank title='Sound Bible online audio file repository' href='http:\/\/soundbible.com'>Sound Bible<\/a> for this, sometimes, as for our wind sound today, also used with <a target=_blank title='Battleships and Cruisers game' href='http:\/\/www.rjmprogramming.com.au\/Games\/Battleshipsandcruisers\/index.php?isMobile=n'>Battleships and Cruisers<\/a> game here at this domain.<\/p>\n<p>You may want to read more about other similar issues, which are sometimes referred to as <a target=_blank title='Wikipedia information regarding cross-browser' href='http:\/\/en.wikipedia.org\/wiki\/Cross-browser'>cross-browser<\/a> issues.<\/p>\n<p>So in this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/wind.jpg\">tutorial<\/a> you can imagine Internet Explorer 11 and see Firefox, Safari, Opera and Chrome playing an audio file.  Here is a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/wind.php\">live run<\/a> link.<\/p>\n<p>Here is some PHP programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/wind.php_GETME\" title=\"wind.php\">wind.php<\/a> to play this wind sound audio file.   If there are complex cross-browser issues they can be resolved by a server-side language such as PHP (or ASP.Net) ahead of the HTML reaching the client&#8217;s web browser.<\/p>\n<p>We&#8217;ve used some of these audio techniques, too, with ESL (teaching) as below:<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1154' title='A Media Job for Listening Task Class webpage Tutorial'>A Media Job for Listening Task Class webpage Tutorial<\/a> explains in some detail the making of ESL listening task <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1152' title='English Learning \u2013 Listening Class \u2013 Tapioca Five Ways'>English Learning \u2013 Listening Class \u2013 Tapioca Five Ways<\/a><\/li>\n<li>ESL listening task <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=2608' title='English Learning \u2013 Listening Class \u2013 Love at First Bite'>English Learning \u2013 Listening Class \u2013 Love at First Bite<\/a><\/li>\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=683' title='English Phonics Learning Ideas'>English Phonics Learning Ideas<\/a><\/li>\n<\/ul>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d10336' onclick='var dv=document.getElementById(\"d10336\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=audio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10336' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The major web browsers on a Mac laptop or Windows laptop have differences in rendering and methods by which they play media files. With this in mind, today&#8217;s tutorial attempts to play audio across the major browsers where &#8230; the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/audio-on-web-browser-primer-tutorial\/\">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":[12,13,31,37],"tags":[113,207,275,396,439,622,725,760,884,932,999,1083,1319,1405,1435],"class_list":["post-10336","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-projects","category-tutorials","tag-audio","tag-chrome","tag-cross-browser","tag-esl","tag-firefox","tag-internet-explorer","tag-mac-os-x","tag-media","tag-opera","tag-php","tag-project","tag-safari","tag-tutorial","tag-web-browsers","tag-windows"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10336"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=10336"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10336\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=10336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=10336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=10336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}