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.
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.
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.
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 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 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.
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 what you're doing before using this. If yours is a normal web page (and not something that is part of an online game), sound or music that automatically plays tends to annoy people 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 free
to do as it pleases, even preloading the entire file). The default value varies from browser to browser.
The audio player looks like this in your current browser:
If you are curious to see what it looks like in a different browser, just open this page in that browser.
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.
In the example above, 2 alternative file formats are offered, allowing the web browser to play whichever format it supports.
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-2024 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 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.
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:
How to Play Music or Audio on a Website with HTML (HTML5)
