Music Files

When my daughter, "Andrea" first asked me to create a website where she could post her music, as well as her music playlist, I had no idea what I was getting into when I said, "Okay, I'll do it". As familiar as I am with the creation of websites, which I have done over the course of 12 years, both for pleasure and work, I never fully recognized how fast technology changes; and like it or not, you need to "get onboard", or you will be left behind. Just so you know, some of the overall goals of this article is to share with readers not only how the music was made, but to also explain in every day terms some of the technical aspects of creating music files while using various software programs. We also wanted to be able to share specific code for putting music audio files on websites, while keeping accessibility guidelines in mind.

Music Creation Process

The software Andrea used to create her music "Elood" and "Ominuous dancefloor" was "Garageband" and "Reason" which are applications available for the Mac Operating System. According to her, anyone who can operate a computer should be able to create a very simple song with either of these applications. "Garageband" allows you to turn your MAC into a musical instrument. Just plug a USB music keyboard into your Mac and you get instant access to over 100 realistic software instruments - pianos, strings, drums, guitars, and horns - everything from bass to woodwinds. Just create a new track, choose your instrument, and play.

Garageband has a loop library, which allows you to drag loops onto the computer and align them correctly to match the tempo of each track you use. Not only does Garageband allow you to play various instruments and create tracks, it now has a feature which allows users to buy pre-recorded lessons for various musical instruments. Reason on the other hand, according to her, requires more advanced musical software skills. Reason is a popular music software program developed by Swedish software developers "Propellerhead Software". It emulates a rack of hardware synthesizers, samplers, signal processors, sequencers and mixers, all of which can be freely interconnected in an arbitrary manner. Reason can be used either as a complete virtual music studio, or as a collection of virtual instruments to be played live or used with other sequencing software. Both Garageband and Reason can generate export files such as .aif or .wav unless otherwise selected. Both .wav and .aif files are high quality formats while .aac and .mp3 are compressed formats that lower the quality of files which renders the music dynamics and stereo images, but are smaller and easier to upload onto the web.

How the .m4a Files were created

Once she created the .aif or .wav files from Garageband and Reason, she exported them into Itunes. Once they were in her Itunes library she was able to convert the .aif files to .aac files (.mp4). According to her, it is a very simple procedure for anyone who is familiar with Itunes and Mac software features. The songs "Elood" and "Ominuous dancefloor" are in .m4a format which is actually the audio layer (non-video) of Mpeg - 4 movies. According to popular opinion .m4a format is slated to become the new standard for audio file compression. This format is also known as Apple Lossless, Apple Lossless Encode, or ALE. It is a new codec designed to provide lossless encoding in less storage space. Codec is a device or computer program capable of encoding and/or decoding a Digital data stream or signal. Both compressor-decompressor or coder-decoder are another way of defining Codec. Lossless data is used in many applications. It is used in the popular Zip file format and in Unix tool Gzip. Lossless data compression is a class of data compression algorithms that allows the exact original data to be constructed from the compressed data. The term lossless is in contrast to lossy data compression, which only allows an approximation of the original data to be reconstructed, in exchange for better compression rates.

Clarification for MPEG - 4 Files

MPEG-4 files with audio and video generally use the standard .mp4 extension. Audio-only MPEG-4 files generally have a .m4a extension. The .m4a extension is especially true of non-protected content. However, as would be expected, software capable of audio/video playback should recognize files with either .m4a or .mp4 file extensions as there is no file format difference between the two. The common but non-standard use of the extensions .m4a and .m4v is due to the popularity of Apple's IPOD, IPHONE, and Itunes store. Without modifications Nintendo's DSI and SONY's PSP can also play .m4a.

The needed software to play these music files are RealPlayer 11 or QuickTime for Apple's Mac operating systems, and Windows Media Player 10 for Windows XP and earlier versions. Windows Media Player 11 is able to play these music files for Windows XP and Windows Vista operating systems.

Adding Music to Website

To have music play only when a link is clicked on, use the following code:

<a href="/yourmusicfile.mid" mce_href="/yourmusicfile.mid">Play background music</a>

To have music start automatically when the web page loads, place the following code in the <head> section of your web document. With this code your visitor has no choice to hear it or not and there is no option to turn it off. You need both html codes below to automatically load for Internet Explorer and Netscape.

Internet Explorer

<BGSOUND src="/yourmusic.m4a" mce_src="/yourmusic.m4a" LOOP=INFINITE>

Netscape

<EMBED src="/yourmusic.m4a" mce_src="/yourmusic.m4a" AUTOSTART="true" HIDDEN="true" LOOP="true"></noembed>

To Embed music on your website with a shut off button

You can embed music into your page so it starts automatically when someone views your page and have a small image where your visitor can turn it off.

Place the following html music code where you want the button to appear on your page.

<embed src="/yourmusic.m4a" mce_src="/yourmusic.m4a" width="25" height="25" autostart="false" repeat="no"></embed>

To Embed music with console

Instead of the button, you can have a small console with on and off switches on your page such as the one below.

<embed src="/yourmusic.m4a" mce_src="/yourmusic.m4a" width="360" height="165" autostart="false" />Bottom of Form

Some of the Parameters you can use for Music Files are:

Autostart: choose if the media file will start automatically ("True" or "False")

Loop: sets the media file to repeat or not ("True" or "False")

Volume: set the volume of the media file. The range is 0-100. ("60")

Hidden: set to "True" will not display the player.

Some ways to ensure your music/audio files meet Accessibility Guidelines

Adding music to websites, is not that hard, the hard part is when you try to make it accessible. At the very minimum you must provide a link where the user can download the music player.

See below for Examples:

Download Music Players Free

RealPlayer 11 (Mac OS)
QuickTime (Mac OS)
Windows Media Player 10,11 (Windows OS)

The code would be:

<p>Download Music Player Free</p>
<ul>
<li><a href="http://www.real.com/realplayer?rppr=rnwk" mce_href="http://www.real.com/realplayer?rppr=rnwk">RealPlayer 11 (Mac OS)</a></li>
<li><a href="http:// www.apple.com/quicktime/download ">QuickTime (Mac OS)</a></li>
<li><a href="http://www.microsoft.com/windows/windowsmedia/download/AllDownloads
aspx?displang=en&qstechnology=">Windows Media Player 10, 11 (Windows OS)</a>
</li>
</ul>

To have background music play when web page loads and also be accessible you would add the following in the head of the html document

<script type="text/javascript">
function play() {
embed = document.createElement("embed");
embed.setAttribute("src", "yourmusicfile.m4a");
embed.setAttribute("hidden", true);
embed.setAttribute("autostart", true);
embed.setAttribute("loop", false);
document.body.appendChild(embed);
}
</script>

You also have the option of putting the various attributes you want, i.e., hidden= true or false, loop=true or false, etc.

The following would be added after </head>

<body onload="play();rotateImage('rImage')">

To add music for a playlist all you need to do is the following:

<a href="/yourmusicfile.m4a" mce_href="/yourmusicfile.m4a">Music Name</a>

However a better way to add a playlist as far as keeping with accessibility guidelines you should add the object type and use the following parameters in the example below:

<object type="application/windowsmediaplayer"
codebase="http://www.microsoft.com/windows/windowsmedia/download/AllDownloads.aspx?displang=en&qstechnology="
data="elood.m4a" width="0"
height="0" title="yourmusicfile">
<param name="song" value="yourmusicfile.m4a" />
<param name="quality" value="high"/>
</object>

In closing, it really depends on the site you are creating about with regards how various Music files are used. I have found that most audiences prefer not to have background music and to have the option of hearing music only when they are in control of the on and off buttons, as well as the player controls: play, pause, stop, etc. However, when polling music lovers, they have no problem with background music, as long as they also have the ability to select music of their choice.


About Company

KJK Web Design Services was formed 2010. With over 17 years of professional Web Design Development, it wasn't until I created personal websites for a few of my two daughters interests, sports, music and art did I decide I would like to do this on a one to one basis with clients.

Privacy Policy
FAQs
Sitemap

Favorite Quotes

"I think I should have no other mortal wants, if I could always have plenty of music. It seems to infuse strength into my limbs and ideas into my brain. Life seems to go on without effort, when I am filled with music."

"Go as far as you can see, and when you get there you will see farther."

"Find something you love to do and you'll never have to work a day in your life."

"Change brings freshness"

Favorite Things

Within this website you will find many references to Art that can be enjoyed or purchased, music to enjoy, and also some images and links to some of the more recent websites that I created.

Get in Touch

  • Phone:
    (518) 785 1674 / 526 1274
  • Email:
    kkosek@nycap.rr.com
  • Address:
    74 West Glenwood Drive
    Latham, NY 12110
    USA