Let's have something fun to start with. We are now talking about web browser supportingaudio file in native, just like how <img> tag is supported since 1994.HTML5 is likely to put an end to audio plug-in such as Microsoft Windows Media player, Microsoft Silverlight, Apple QuickTimeand the infamous Adobe Flash.

If you don't see a audio player control in the dotted box above, your web browser probably don't supportthe audio tag.

1. If you want to take a shortcut, have a look at the ready-made HTML5 Audio Player available on Envato Market. It lets you create playlists from a variety of sources, and comes with a huge range of customization options. HTML5 Audio Player with Playlist. You can also find plenty of HTML5 experts on Envato Studio to help you.
2. 14 Html5 Audio and Video Players by Janeth Kent Date: html5 video audio player Using a custom skinned jQuery audio/video player in your website is without any doubt aesthetically pleasing then simply embedding a video from a third party website on your website.
3. Html5 Audio Tag Attributes. As well as supporting global HTML5 attributes the tag also supports a set of attributes unique to itself. Autoplay - This can be set to 'true' or left blank ' to define whether the track should automatically play as soon as the page is loaded.; controls - As seen in the example above, this defines whether the native controls such as 'play,pause' etc should be shown.

Above is a gallery of audio players by major web browsers. As you can see the sizeof the player control varies from one to another, IE9 player is exceptionally large in compared toSafari player. This can be a disaster to a web designer.

The SJ HTML5 audio player developed by Super Joom is, as title says, an html5 based audio player that support, mp3 and ogg file formats. In the playlist can be added up to 60 items with song name, cover, artist name, album and duration options for each of them. Currently one of the best open source media players for websites.

If you are using Safari for Windows but without QuickTime, your Safariis not going to support media tag (both <audio> and <video>) in 'native'.I suppose Safari is relying on QuickTime codec to play media file in the browser.

How to?

In order to make your web page plays music, the html code can be as simple as

<audio src='vincent.mp3' controls> </audio>

Unfortunately, the most popular audio format MPEG3(.mp3) is not an Open standard, it is patent encumbered.That means, web browser needs to pay a sum of money in order to decode it, and that might not befinancially feasible for smaller company or organization. As you can see from table below, onlythose big boys are rich enough to decode MP3. Firefox and Opera supports only Vorbis (.ogg) formatwhich is an Open standard.

On the other hand, the open standard Vorbis (*.ogg) is not supported by Safari and IE9. Hence, it isalways good to have both Mp3 and Ogg side to side available.

Test how far your browser support audio tag using 'HTML5 <audio> and Audio() Support Tester'.

What you can do is ...

Whether or not to provide the MIME type (type='audio/mpeg') to browser is optional. Most modern web browsers aresmart enough to determine the content type by itself. However, it is always good to be helpful to web browser, thatmakes your web browser works faster and happier.

Attributes of <audio>

*Boolean attribute is an attribute that either present in the tag or not present. A Boolean attribute has just its name and no value.You can put it this way too, whatever value you assign to a boolean attribute means only one thing - TRUE.

<audio src='vincent.mp3' controls='true' loop='true' autoplay='true'></audio>

(This is completely unneccessary!)

<audio src='vincent.mp3' controls loop autoplay></audio>

(This is it!)

How should we cater for less modern web browser?

HTML5 is a evolution of the web, not a revolution that will totally destroy the past. Hence, let'smove forward a little bit gracefully.

In order to support web browser that doesn't understand what <audio> is about, such as IE8 and below, we shalllet them enjoy their good old day using <object> tag.

In my example above, I am using a flash mp3 player from PremiumBeat.com

If your browser doesn't suppport HTML5 but you have got flash plug-in, you probably don't want to miss the fun. Here you go ...

If the web browser support neither HTML5 nor Flash, you might as well let the user download the audio file and wish them luck ongetting a player to play it.

Instead of using the standard web browser audio player, you can write your own control, use your creativity and imagination, the sky is the limit.

This tutorial deals with how you can insert music or some other type of audio file into a web page using HTML,or HTML5 to be exact. The code automatically creates a player that your visitors can use to hear the sound.

Things to Note

1. Since we will be using HTML5 to insert the audio player, your page will need to be in that version of HTML.If it is in an earlier version, such as XHTML 1.0 or HTML 4.01, you will need to change itsDOCTYPE or DTDto '<!DOCTYPE HTML>', and adjust the rest of the code on the page, if necessary, to conform with theHTML5 standard.

   If you have not yet startedmaking a website yet,and plan to use the free Microsoft Expression Web to do so, note that you can actuallymakeExpression Web use HTML5 for your website by default. This way, when you get to the pages where you want to playsound or music, you don't have to change anything, since the page will already be using the required version.

2. In addition, since this tutorial deals with the use of HTML, you will need to know how to insert HTML code into your web page.If you use a WYSIWYG web editor, you will have to switch to its code mode to do so. Tutorials on how to do this inExpression Web,BlueGriffon,Dreamweaver andKompoZer can befound in the links for those editors in this sentence that you're reading right now. If you use blog software, you will have toswitch to its HTML input mode to insert the code given below.

3. This article is strictly a 'how to' tutorial. It does not deal with copyright issues. I address the latter inIs It Legal to Use Any Piece of Music,Image, or Article for my Website? And Other Questions on Copyright Relevant to Webmasters.

The <audio> Tag

The HTML code to include an audio player is as follows.

In the code above, the sound or music file is 'demo.mp3' located in the same directory as the web page,as specified by the src attribute. The optional controls attribute adds playercontrols to the browser's built-in audio player. The exact controls that appear depend on theweb browser, but they typically include the ability to change the volume, play, pause, resumeand seek to an arbitrary spot in the audio stream.

Anything enclosed between the <audio> and </audio> tags is ignored. You can thususe it to include an error message that will only be displayed in web browsers that don't supportthe HTML5 <audio> tag.

Other possibly useful attributes include:

• loop: the player will automatically seek back to the beginning when it reaches the end.

• autoplay: the audio will automatically begin playing. Make sure you know whatyou're doing before using this. If yours is a normal web page (and not something that is part ofan online game), sound or music that automatically plays tends toannoypeople and make your website look like it was made by an amateur.

• preload: this attribute hints to the browser (that is, the latter is not required to follow it)how much of the audio file it is to load in advance, prior to user-interaction. Allowed values include none(don't preload anything), metadata (preload meta data only), and auto (the browser is freeto do as it pleases, even preloading the entire file). The default value varies from browser to browser.

Demo

My demo of the HTML5 audio player usesthe following code (essentially the same as that described above):

Feel free to visit that page with differentbrowsers if you're curious to see what the HTML5 audio player looks like in those programs.

How to Specify Different Audio File Formats

It's possible to provide different alternative file formats if you wish. To do this, specifyeach file in its own <source> tag instead of in the src attributeof the <audio> tag.

In the example above, 2 alternative file formats are offered, allowing the web browser toplay whichever format it supports.

Browser Support

Although there are numerousaudiofile formats around, in practice, if you want your sound file to be playable in the maximumnumber of modern browsers possible, you will probably need to encode it in MP3 and place it inan MP3 container.

Audio encoded in Ogg Vorbis, Opus and FLAC are not widely supported, usually only by Firefox (and its derivatives),although the Android browser also apparently handles Ogg Vorbis. In addition, audio encoded in PCM, placed in WAV files,are not supported by Internet Explorer (though Microsoft Edge officially supports it). As I said, if you want youraudio to be playable in as many browsers as possible, MP3 is probably the best bet at this time. Even then,the browser needs to be sufficiently modern, so that it has support for the HTML5 <audio> tag.

Copyright © 2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

It will appear on your page as:

Html5 Audio Player Css

Sj Html5 Audio Player Downloads