The BlueGriffon web editor has built-in facilities for you to insert an audio clip or music file into a web page. Here's how to use it.
This tutorial deals with the specific task of adding audio (whether it is music, purely voice, or some other thing) to your web page with BlueGriffon. As such, it presupposes that you already have a website, and indeed a web page into which you want to place the audio clip. If this is not true, please read How to Start a Website first.
Those who use some other web editor or perhaps even blogging software do not need to switch to BlueGriffon just to add music or audio. If you are comfortable with inserting HTML code, please read How to Play Music or Audio on a Website with HTML (HTML5) instead.
Note that this article is just a technical "How to" article. It does not deal with copyright issues. See Is It Legal to Use Any Piece of Music, Image, or Article for my Website? And Other Questions on Copyright Relevant to Webmasters for a discussion of those.
Copy the audio or music file into the same folder as the web page that is playing it. Yes, I'm talking about your own computer, where you have stored your web pages prior to uploading. Do this even if the audio file is already in another folder on the same hard disk. If you don't, you may find later that the audio file plays fine on your own computer when you test it, but when you upload everything to your website, it doesn't work.
You can, of course, put it in a subfolder of your web page, if you wish. However, make sure that the file is really in your local website folder's hierarchy before you link to it with BlueGriffon, or the latter will not insert the correct link. If you don't understand this paragraph because it contains too much technical gobbledygook ("Hierarchy? What hierarchy?"), just copy the file into the same folder as your web page.
Start up BlueGriffon and open the web page into which you want to insert the sound file.
If the previous paragraph sounds too vague (eg, you are thinking, "Wait a minute. What web page? How do I open one?"), it probably means that you should start at chapter 1 of the BlueGriffon tutorial, where such things are taught. As I said earlier, this article only deals with the specific task of inserting audio.
Click "Insert" on the menu bar, followed by "Audio" in the drop down menu that appears.
Click the folder icon next to the empty field for "Audio file location".
A new dialog box with the title "Select a file" will appear. Navigate to your file and click it once to select it. The click the "Open" button near the bottom of the dialog box.
Click to put a tick in the checkbox labelled "Make URL relative to page location".
There are now additional options near the bottom of the dialog box, along with a picture of the audio player.
If you click the drop down field for "Preload" and select "Metadata", the browser will be told to obtain information about the audio file (for example, how long the audio clip is) from your site in advance. "Automatic" means that the browser can do as it pleases, even to the extent of downloading the entire file ahead of time. "None" tells the browser not to preload anything before the user takes action. Note that this field is just a suggestion to the browser. It is not actually required to follow what you state here.
If you put a tick in this field, the browser will display controls on the audio player. The exact controls vary from browser to browser, but will typically consist of things like a play button, volume control, and a way to seek to a specific spot in the audio stream.
Putting a tick in this field tells the browser that you want it to start playing the file immediately, even if your visitor has not clicked the Play button. However, since most people find music or audio that automatically plays to be extremely irritating, not to mention battery-draining if they are visiting the site on a mobile phone, many modern browsers ignore this option by default.
This option causes the browser to seek back to the beginning of the audio file when it has reached the end.
When you have finished configuring the player, click the "OK" button.
The audio player will now appear on your page. You can test it from within BlueGriffon if you wish. Note though that the appearance of the player varies from browser to browser. What you see in BlueGriffon is merely how its internal rendering engine depicts it. If you are curious about how it looks in different browsers, you will need to test your page in those.
You can see a demo of what the audio player looks like in your current browser by going to the HTML version of this tutorial, and scrolling down. You can ignore the text of that article, since it was written for people coding HTML by hand. However, the audio player is the same whether you write it directly in HTML or use BlueGriffon to do it for you, so it should give you an idea of what it looks like.
In general, for compatibility with the largest number of modern browsers, your audio file should probably be encoded in MP3 and placed in an MP3 container. If your file is in some other audio format, and you want to convert it to MP3, one possibility is to use an audio editor (eg, Audacity, which is free) that can load in one format and save in another (effectively converting the file in the process). Note that changing the file extension alone will not alter its internal format. You will need to actually convert it.
Copyright © 2020-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 Add an Audio or Music File to a Web Page with BlueGriffon
