How to Play Music or Audio on a Website with HTML (HTML5)

How to Insert Sound into a Web Page


How to Play Music or Audio on a Website with HTML (HTML5)

by Christopher Heng, thesitewizard.com

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 its DOCTYPE or DTD to "<!DOCTYPE HTML>", and adjust the rest of the code on the page, if necessary, to conform with the HTML5 standard.

    If you have not yet started making a website yet, and plan to use the free Microsoft Expression Web to do so, note that you can actually make Expression Web use HTML5 for your website by default. This way, when you get to the pages where you want to play sound 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 in Expression Web, BlueGriffon, Dreamweaver and KompoZer can be found in the links for those editors in this sentence that you're reading right now. If you use blog software, you will have to switch 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 in Is 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.

<audio src="demo.mp3" controls></audio>

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 player controls to the browser's built-in audio player. The exact controls that appear depend on the web browser, but they typically include the ability to change the volume, play, pause, resume and seek to an arbitrary spot in the audio stream.

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

<audio src="demo.mp3" controls>
Error: your web browser does not support this audio player.
</audio>

Other possibly useful attributes include:

Demo

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

<audio controls src="audio/demo.mp3">
<div style="border: 1px solid black ; padding: 8px ;">
Sorry, your browser does not support the <audio> tag used in this demo.
</div>
</audio>

Feel free to visit that page with different browsers 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, specify each file in its own <source> tag instead of in the src attribute of the <audio> tag.

<audio controls>
  <source src="demo.mp3" type="audio/mpeg">
  <source src="demo.ogg" type="audio/ogg">
</audio>

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

Browser Support

Although there are numerous audio file formats around, in practice, if you want your sound file to be playable in the maximum number of modern browsers possible, you will probably need to encode it in MP3 and place it in an 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 your audio 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/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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

Please Do Not Reprint This Article

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

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Play Music or Audio on a Website with HTML (HTML5)





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.