GetDotted Domains

Viewing Thread:
"Beginners Tutorial - Inserting Sound into your HTML!"

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

Thu 07/05/09 at 13:13
Regular
"THFC"
Posts: 4,488
This is a big leap for me to come away from writing reviews about films and games. My technical knowledge is not that great in comparison to most of the users on this site. Anyway, when I was younger I did some HTML work and made some sites, I used to really enjoy learning the different scripting to make various things happen on my sites and would often compete with my brother to see who could make the most advanced site.

Sadly I fell out of doing this due to work and other commitments, but it is something that I still have a bit of a soft spot for and if time permitted I would like to get back into doing. While there are many things I have forgotten about doing HTML there are always a few little tricks which have remained lodges into my brain! Hopefully if you are new to HTML and are creating your website, then this little tutorial and any others I compile will be of use to you.

While I know most of you will know how to do this kind of thing, this really is aimed at those who are new to the world of HTML and are trying to push the boundaries a little bit further than adding a link or inserting a picture. Please be aware that this will only work within Internet Explorer.

To Add Background Sound to your Site;
Please be aware that these tags must appear between the tags, and it is also important to note that the file types which can be used within the tag I am about to show you include; Midi Sequencer (.mid), Wave Sound (.wav), Real Media (.ra & .ram), AU Sound (.au & .snd) and finally AIFF Sound (.aif, .aifc, .aiff). These are pretty common and if you are using a nice little programme called Wavepad that can be downloaded for free (trial version, just search it) then you open up a world of cutting and mixing that creates sound files that will be saved as .wav – not everyone wants to use this but it is a suggestion and something that I used when I was creating sounds to go on a website, as the ability to mix made it more fun and especially as it was at the same sort of time when I wanted to become an able DJ!

Anyway, on with the sound! The tag that you are going to be inserting between HEAD is
Now it is not hard to see that background sound = bgsound! But just inserting this will have the music play through once and finish, if you want the music to loop, then you will need to extend the tag a little bit. On the end of you “song name.wav” you need to add; loop="-1"

Right so the finished tag for music in HTML to loop on your web page, bear in mind this will happen automatically and cannot be turned off by your visitors any other way than turning the speaker down!
So the tag is;



Now I thought I would show you the complete example of how it should look;




Emmie87




So there you have it, your website now has the sound you always wanted to – simple!

Hopefully this has helped anyone wanting to introduce some audio to their HTML website, like I said this is a basic tutorial and just a foot in the door to what can be done with sound. This is the most basic form that can be added and it simple enough for anyone to be able to add sound.

Thanks for taking the time to read my first tutorial and I hope you found it useful.
Thu 07/05/09 at 13:13
Regular
"THFC"
Posts: 4,488
This is a big leap for me to come away from writing reviews about films and games. My technical knowledge is not that great in comparison to most of the users on this site. Anyway, when I was younger I did some HTML work and made some sites, I used to really enjoy learning the different scripting to make various things happen on my sites and would often compete with my brother to see who could make the most advanced site.

Sadly I fell out of doing this due to work and other commitments, but it is something that I still have a bit of a soft spot for and if time permitted I would like to get back into doing. While there are many things I have forgotten about doing HTML there are always a few little tricks which have remained lodges into my brain! Hopefully if you are new to HTML and are creating your website, then this little tutorial and any others I compile will be of use to you.

While I know most of you will know how to do this kind of thing, this really is aimed at those who are new to the world of HTML and are trying to push the boundaries a little bit further than adding a link or inserting a picture. Please be aware that this will only work within Internet Explorer.

To Add Background Sound to your Site;
Please be aware that these tags must appear between the tags, and it is also important to note that the file types which can be used within the tag I am about to show you include; Midi Sequencer (.mid), Wave Sound (.wav), Real Media (.ra & .ram), AU Sound (.au & .snd) and finally AIFF Sound (.aif, .aifc, .aiff). These are pretty common and if you are using a nice little programme called Wavepad that can be downloaded for free (trial version, just search it) then you open up a world of cutting and mixing that creates sound files that will be saved as .wav – not everyone wants to use this but it is a suggestion and something that I used when I was creating sounds to go on a website, as the ability to mix made it more fun and especially as it was at the same sort of time when I wanted to become an able DJ!

Anyway, on with the sound! The tag that you are going to be inserting between HEAD is
Now it is not hard to see that background sound = bgsound! But just inserting this will have the music play through once and finish, if you want the music to loop, then you will need to extend the tag a little bit. On the end of you “song name.wav” you need to add; loop="-1"

Right so the finished tag for music in HTML to loop on your web page, bear in mind this will happen automatically and cannot be turned off by your visitors any other way than turning the speaker down!
So the tag is;



Now I thought I would show you the complete example of how it should look;




Emmie87




So there you have it, your website now has the sound you always wanted to – simple!

Hopefully this has helped anyone wanting to introduce some audio to their HTML website, like I said this is a basic tutorial and just a foot in the door to what can be done with sound. This is the most basic form that can be added and it simple enough for anyone to be able to add sound.

Thanks for taking the time to read my first tutorial and I hope you found it useful.
Thu 07/05/09 at 13:54
Regular
Posts: 391
Cool review Emmie!

For this to work in all browsers, you simply need to use the embed tag instead, anywhere in the body of your page:

<embed hidden="true" loop="true" src="your_sound.wav" type="application/x-mplayer2">
</embed>

Replace your_sound.wav with the location of your sound file :)
Thu 07/05/09 at 14:14
Regular
"THFC"
Posts: 4,488
Oh right! Thats a good tip to know. Well glad my first slight technical post was an enjoyable read for someone lol.
Thu 07/05/09 at 16:11
Moderator
"possibly impossible"
Posts: 24,985
Nicely written Emmie.

You should be able to do a similar thing with MP3, though it will mean the person looking at the site has Media Player or equivalent for it to work.

Just save your MP3 to the website in a 'musicfolder' directory, use a text editor to type in the complete web address of the MP3 and save it as music.m3u

Then add this code to your site:




Think that should work.
Thu 07/05/09 at 16:47
Regular
"It goes so quickly"
Posts: 4,083
For what it's worth, web browsers (well, maybe not IE, shocking, I know) seem to be moving towards the use of the new <audio> element to embed sounds, as well as the <video> element for video.

It's included within the BETA of Firefox 3.5, due out sometime soon, so it may be something people want to look in to for the future.

Freeola & GetDotted are rated 5 Stars

Check out some of our customer reviews below:

LOVE it....
You have made it so easy to build & host a website!!!
Gemma
My website looks tremendous!
Fantastic site, easy to follow, simple guides... impressed with whole package. My website looks tremendous. You don't need to be a rocket scientist to set this up, Freeola helps you step-by-step.
Susan

View More Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.