» » Use the HTML5 Audio tag to create Audio Player in web


Use the HTML5 Audio tag to create Audio Player in web

Author: bamboo06 on 29-10-2014, 02:30, views: 1491

Currently, there is no standard way on the WEB page to play audio files, most of the audio files is to use the plug-in to play, but many browsers use different plug-ins. The arrival of HTML5, give us a standard way to play WEB audio files, users no longer upgrades such as Adobe Flash, Apple QuickTime Player and other plug-in for your browser, simply use a modern browser can listen to whatever can be issued sound WEB site.
Use the HTML5 Audio tag to create Audio Player in web

Audio tab in web
HTML5 defines a new element is used to specify a standard way to insert audio files to a web page: audio tag. Use audio tags can control audio playback and stop, loop playback and set the number of plays and playing position, etc., for details see the table below.
Property Value Description
autoplay true | false If true, then the audio is ready immediately after the play.
controls true | false If true, then the user display controls, such as the Play button.
end numeric value definition player in the audio stream where to stop playing. By default, the sound will play to the end.
loopend numeric value defined in the audio stream looping stopped position, the default is the value of the end property.
loopstart numeric value to define the starting position in the audio stream looping. The default is the value of the start property.
playcount numeric value to define how many times to play audio clips. The default is 1.
Audio url src url played.
start numeric value is defined in the audio stream player starts playing position. By default, the sound at the beginning of playback.
Currently browsers supporting audio tag are:
[img|browsers supporting audio tag]http://www.goocode.net/uploads/posts/2014-10/thumbs/1414588113_2.png[/img]
IE9, Firefox, Opera, Chrome and Safari all support audio tag.
Note: IE8 and earlier versions do not support the audio tag.
How to Use Audio
To play the audio in HTML5, you need to insert the following code in the body:
<audio controls="controls">  
   <source src="music.ogg" /> 
   <source src="music.mp3" /> 
   <source src="music.wav" /> 

You can insert text between the audio and tag, so if your browser does not support audio, it will display the text.
You might ask how auto in the label contains three source it? This is for compatibility with browsers and audio formats, browser makers have agreed not to use a certain kind of audio file formats. For example, Chrome, Internet Explorer 9 (IE9) and the Safari browser does not support WAV files, which is a standard uncompressed format and are declining to use. We will each video file name in a separate tag, and all source audio container labels by audio configuration, as shown below. So, no matter what browser the visitor, it will automatically select the first file read type, and for you to play sound.
HTML5 browsers and audio format compatibility
Audio formats| Chrome| Firefox| IE9|Opera| Safari
OGG not-support support support support support
MP3 Yes No Yes No Yes
WAV No Yes No Yes No
Furthermore, the appearance of different browsers is not the same audio space.
Use the HTML5 Audio tag to create Audio Player in web

HTML5 allows developers to more easily provide a lot WEB experience. audio tag is added a new and exciting content, no need for external music players, so the audio is provided as simple as the display image. With standards-based audio controls and make it easier for users with sound new browser features interactive, you can easily customize the MP3 player on the WEB page.

Category: HTML5

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
  • 0 Articles
7 December 2017 01:10


  • Group: Guests
  • РRegistered date: --
  • Status:
Nice Audio Player in web for all music lovers. wait a minute,.. i just clicked on the ad of bestessays uk. I don't know either they write for the blog or not. anyhow, super share.

  • 0 Articles
7 January 2018 15:11


  • Group: Guests
  • РRegistered date: --
  • Status:
The word Museum puts to the mind instantly a piece that’s more on the more refined side and the replica watches sale is definitely one with its black and polished finishes. But despite those aspirations, it has a firm footage in the replica watches sports category, with its robust build and a sturdy stainless steel bracelet. Movado builds pieces that breitling replica sale always gravitate towards the elegant and sophisticated side of life, but the fake rolex sale shows a different level of customization, but not too far from their standardized, traditional style. The rolex replica sale hides the tech and the toughness under a classic skin, which replica watches sale is again, this time, a bit bolder than their usual, set norm.

Comment on the news site is possible only within (days) days from the date of publication.