Audio on Web Browser Primer Tutorial

Audio on Web Browser Primer Tutorial ... clicking plays audio file

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’s tutorial attempts to play audio across the major browsers where …

• the audio plays as soon as the webpage loads … annoying if you are not informed of this, but today we warn you … so … be warned … clicking the picture should load an audio file
• show controls
• loop the audio file

… as you can see there are quite a few scenarios … let alone considering the audio format … as far as that goes, consult this w3schools link.

Along the way you may need some (online) audio format conversion functionality, and for this we like MP3 to OGG conversions online (for example).

Where can you source some audio files? … We like Sound Bible for this, sometimes, as for our wind sound today, also used with Battleships and Cruisers game here at this domain.

You may want to read more about other similar issues, which are sometimes referred to as cross-browser issues.

So in this tutorial you can imagine Internet Explorer 11 and see Firefox, Safari, Opera and Chrome playing an audio file. Here is a live run link.

Here is some PHP programming source code you could call wind.php 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’s web browser.

We’ve used some of these audio techniques, too, with ESL (teaching) as below:

• A Media Job for Listening Task Class webpage Tutorial explains in some detail the making of ESL listening task English Learning – Listening Class – Tapioca Five Ways
• ESL listening task English Learning – Listening Class – Love at First Bite
• English Phonics Learning Ideas

If this was interesting you may be interested in this too.