The <audio> HTML Tag

You use the <audio> tag to place an audio file on your web page. All modern desktop and mobile browsers support the <audio> tag, but IE browsers versions before version 10 do not. The <audio> tag supports three audio file formats: MP4, WAV, and OGG. For more info on the file formats supported in browsers, select the article “Media Formats” from the menu on the left of this page.

Use the following steps to use the <audio> tag on your SiteSpinner page

  1. Open a Code object and set the code placement to "in Body."
    Place Code Object in Body
    Fig. 1: Place Code Object in Body
  2. Copy and paste the HTML <audio> tag code into the code editor window. 
    <audio controls preload loop>
  <source src='folder/audio-file.mp3' type='audio/mp3'>
  <source src='folder/audio-file.wav' type='audio/wav'>
  <source src='folder/audio-file.ogg' type='audio/ogg'>
  Your browser cannot play this audio.
</audio>
  3. Line 1 of the code specifies the audio tag and the player options. There are several player options you can use (they are listed below). You can delete or add player options as needed. But at a minimum, you should always include the "controls" option to allow your visitor to start and stop the audio. Unfortunately, virtually all modern browsers will block the "autoplay" option, so I did not include it in the code example.
  4. Lines 2, 3, and 4 specify the location of the audio file on your server. If the audio file is not in your server's root folder, enter a folder name and the audio file name. Use only the line that matches your audio file type and delete the others. For example, if you only plan to use an MP3 file, keep line 2 and delete lines 3 and 4. The "type" value must be a MIME type matching the specified file format (see the section on MIME Types in the "Media Formats" article).
  5. Line 5 contains the message displayed if the visitor's browser does not support the <audio> tag. You can omit this if you want or change it.
  6. You cannot change the width or height of the audio player by resizing the SiteSpinner Code object. The width (300px) and height (40px) are the default values used by browsers. To set the width, you can include CSS style inside the <audio> tag. If you do this, you should keep the width above the default 300px. Doing so will hide some of the user controls. For example, a width of 50px will only show the play/pause button. To set the width, you would include the width value as a style; e.g.: 
    <audio src='some audio.file.mp3' controls style='width:350px'>
</audio>
    Change the style value from the 350 shown to the pixel value you want to use. Since the <audio> tag is an in-line HTML element (like text), you cannot set the height. Nor can you change the controller background color or style the control buttons.
  7. Save and close the Code object, and position the Code object on your page where you want the audio player to display. To get an idea of the size of the resulting audio player, resize the Code object to a width of either 300px (if using the default setting) or to the width value you used in the style settings. Resize the height to 40px. To preview the page, copy the audio file into your Preview folder. (Need help finding your Preview folder? See the Tips section for more information.)

WARNING: SiteSpinner is unaware of the file used inside a Code object, so it will not automatically upload it to your site. See the Tips section for more information about uploading external files.

If you are using a single audio file format (e.g., an MP3 file), you can use the <audio> tag code:

<audio src='folder/audio-file.mp3' controls preload loop>
</audio>

Change the "src" value as outlined above.

Audio player options

Note: Browsers may not recognize nor implement some of these options. For example, the Microsoft IE browser is no longer maintained. In addition, while version 10 and up can play audio, only a few options are available. A browser ignores unsupported player options.

autoplay This option indicates that the audio file should begin playing once the page is loaded. Both Firefox and Chrome browsers will block autoplay, depending on the version. So even if you specify autoplay, it will not work. Most mobile devices will not autoplay. Auto-playing the audio could disturb your visitor, mainly because you do not know the visitor’s speaker volume. When autoplay begins, it does so at full volume (unless muted). I find it irritating when a sudden burst of sound blares out of my speakers when I visit a site.

controls This option should always be specified. It displays the player controls, which allow the visitor to start & stop the audio, display the current playing time and duration, and volume control.

preload This option is only a suggestion for the browser; some browsers will ignore it. The purpose of this option is to download the audio file while the page is loading so it will be ready when it is fully loaded. There are several settings for this option:

  • preload='auto' — This is the default. If autoplay is specified, this option setting has no meaning.
  • preload='metadata' — This option will provide the audio file's duration. This information is useful when using JavaScript.
  • preload='none' — No file preloading is performed. Most browsers ignore this setting and will download the audio file to provide the best user experience.

muted This turns volume off. Be sure to add the controls option so the volume control is visible.

controlslist In Chromium-based browsers (Chrome, Opera, Edge & Safari), the player controls panel will have a ”⋮” button to show additional controls. Currently, the only other control is “Download.” When clicked, the visitor can download and save the audio file. To disable this feature, set the value of this option to controlslist=‘nodownload’

Note: In most browsers, the mere presence of an option name is enough to turn that option on. In other browsers, you may need to set the option value explicitly; e.g., controls=“yes” or preload=“none” However, while testing this code in newer browser versions, I have not needed to set an option value.